ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fix typos

Browse Source
This commit is contained in:
Sam Potts 2021-12-16 22:56:46 +11:00
parent cbd1596af4
commit 626e1dba64
3 changed files with 87 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -66,7 +66,7 @@
- Fix "A `ReferenceError: _classCallCheck is not defined` error has occurred." error (thanks @hex-ci) - Fix "A `ReferenceError: _classCallCheck is not defined` error has occurred." error (thanks @hex-ci)
- Fix issue with CSS custom property check (thanks @syedhusain-appspace) - Fix issue with CSS custom property check (thanks @syedhusain-appspace)
- Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG) - Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG)
- Fix for betwork requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG) - Fix for network requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG)
- Added option to disable custom controls for YouTube and Vimeo - Added option to disable custom controls for YouTube and Vimeo
### v3.6.2 ### v3.6.2
@ -111,7 +111,7 @@
### v3.5.8 ### v3.5.8
- Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS - Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS
- Cleaned up the organisation of some of the SCSS files (should not effect CSS output) - Cleaned up the organization of some of the SCSS files (should not effect CSS output)
- Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site - Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site
- Remove all Vimeo controls for Pro & Premium accounts - Remove all Vimeo controls for Pro & Premium accounts
- Improve thumbnail size calculations when size is set per css (thanks @ydylla) - Improve thumbnail size calculations when size is set per css (thanks @ydylla)
@ -126,7 +126,7 @@
- Accessibility tweak for the play button (thanks @lunika) - Accessibility tweak for the play button (thanks @lunika)
- Fix for ads configuration (thanks @SoftCreatR) - Fix for ads configuration (thanks @SoftCreatR)
- Fix handling listener return value (thanks @taion) - Fix handling listener return value (thanks @taion)
- Added localisation key for PIP (picture-in-picture) (thanks @lmislm) - Added localization key for PIP (picture-in-picture) (thanks @lmislm)
- Preserve viewBox attribute in SVG sprite symbols (thanks @bseib) - Preserve viewBox attribute in SVG sprite symbols (thanks @bseib)
- Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh) - Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh)
- Fixed Plyr container not resizing responsively (thanks @shravan2x) - Fixed Plyr container not resizing responsively (thanks @shravan2x)

2
CONTROLS.md
View File

@ -35,7 +35,7 @@ controls: [
### Internationalization using default controls ### Internationalization using default controls
You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. You can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls.
#### Example #### Example

24
README.md
View File

@ -131,7 +131,7 @@ Alternatively you can include the `plyr.js` script before the closing `</body>`
See [initialising](#initialising) for more information on advanced setups. See [initialising](#initialising) for more information on advanced setups.
You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build. You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.
```html ```html
<script src="https://cdn.plyr.io/3.6.10/plyr.js"></script> <script src="https://cdn.plyr.io/3.6.10/plyr.js"></script>
@ -145,7 +145,7 @@ You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the Java
## CSS ## CSS
Include the `plyr.css` stylsheet into your `<head>`. Include the `plyr.css` stylesheet into your `<head>`.
```html ```html
<link rel="stylesheet" href="path/to/plyr.css" /> <link rel="stylesheet" href="path/to/plyr.css" />
@ -267,9 +267,7 @@ You can set them in your CSS for all players:
...or in your HTML: ...or in your HTML:
```html ```html
<video class="player" style="--plyr-color-main: #1ac266;"> <video class="player" style="--plyr-color-main: #1ac266;">...</video>
...
</video>
``` ```
### SASS ### SASS
@ -344,7 +342,7 @@ The HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<
You have two choices here. You can either use a simple array loop to map the constructor: You have two choices here. You can either use a simple array loop to map the constructor:
```javascript ```javascript
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p)); const players = Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));
``` ```
...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object: ...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object:
@ -400,7 +398,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
| `invertTime` | Boolean | `true` | Display the current time as a countdown rather than an incremental counter. | | `invertTime` | Boolean | `true` | Display the current time as a countdown rather than an incremental counter. |
| `toggleInvert` | Boolean | `true` | Allow users to click to toggle the above. | | `toggleInvert` | Boolean | `true` | Allow users to click to toggle the above. |
| `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. | | `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. |
| `captions` | Object | `{ active: false, language: 'auto', update: false }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options). | | `captions` | Object | `{ active: false, language: 'auto', update: false }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in non-selectable language options). |
| `fullscreen` | Object | `{ enabled: true, fallback: true, iosNative: false, container: null }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls). `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored. | | `fullscreen` | Object | `{ enabled: true, fallback: true, iosNative: false, container: null }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls). `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored. |
| `ratio` | String | `null` | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default. | | `ratio` | String | `null` | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default. |
| `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use. | | `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use. |
@ -437,7 +435,7 @@ const player = new Plyr('#player', {
You can also access the object through any events: You can also access the object through any events:
```javascript ```javascript
element.addEventListener('ready', event => { element.addEventListener('ready', (event) => {
const player = event.detail.plyr; const player = event.detail.plyr;
}); });
``` ```
@ -452,7 +450,7 @@ player.fullscreen.enter(); // Enter fullscreen
``` ```
| Method | Parameters | Description | | Method | Parameters | Description |
| -------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- | | -------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
| `play()`&sup1; | - | Start playback. | | `play()`&sup1; | - | Start playback. |
| `pause()` | - | Pause playback. | | `pause()` | - | Pause playback. |
| `togglePlay(toggle)`&sup1; | Boolean | Toggle playback, if no parameters are passed, it will toggle based on current status. | | `togglePlay(toggle)`&sup1; | Boolean | Toggle playback, if no parameters are passed, it will toggle based on current status. |
@ -467,7 +465,7 @@ player.fullscreen.enter(); // Enter fullscreen
| `fullscreen.exit()` | - | Exit fullscreen. | | `fullscreen.exit()` | - | Exit fullscreen. |
| `fullscreen.toggle()` | - | Toggle fullscreen. | | `fullscreen.toggle()` | - | Toggle fullscreen. |
| `airplay()` | - | Trigger the airplay dialog on supported devices. | | `airplay()` | - | Trigger the airplay dialog on supported devices. |
| `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | - | Sets the preview thubmnails for the current source. | | `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | - | Sets the preview thumbnails for the current source. |
| `toggleControls(toggle)` | Boolean | Toggle the controls (video only). Takes optional truthy value to force it on/off. | | `toggleControls(toggle)` | Boolean | Toggle the controls (video only). Takes optional truthy value to force it on/off. |
| `on(event, function)` | String, Function | Add an event listener for the specified event. | | `on(event, function)` | String, Function | Add an event listener for the specified event. |
| `once(event, function)` | String, Function | Add an event listener for the specified event once. | | `once(event, function)` | String, Function | Add an event listener for the specified event once. |
@ -514,7 +512,7 @@ player.fullscreen.active; // false;
| `loop` | ✓ | ✓ | Gets or sets the current loop state of the player. The setter accepts a boolean. | | `loop` | ✓ | ✓ | Gets or sets the current loop state of the player. The setter accepts a boolean. |
| `source` | ✓ | ✓ | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples. | | `source` | ✓ | ✓ | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples. |
| `poster` | ✓ | ✓ | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image. | | `poster` | ✓ | ✓ | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image. |
| `previewThumbnails` | ✓ | ✓ | Gets or sets the current preview Thubmnail source for the player. The setter accepts a string | | `previewThumbnails` | ✓ | ✓ | Gets or sets the current preview thumbnail source for the player. The setter accepts a string |
| `autoplay` | ✓ | ✓ | Gets or sets the autoplay state of the player. The setter accepts a boolean. | | `autoplay` | ✓ | ✓ | Gets or sets the autoplay state of the player. The setter accepts a boolean. |
| `currentTrack` | ✓ | ✓ | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active | | `currentTrack` | ✓ | ✓ | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active |
| `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. | | `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
@ -637,7 +635,7 @@ reference to the instance, you can use the `on()` API method or `addEventListene
property. Here's an example: property. Here's an example:
```javascript ```javascript
player.on('ready', event => { player.on('ready', (event) => {
const instance = event.detail.plyr; const instance = event.detail.plyr;
}); });
``` ```
@ -785,7 +783,7 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
Some awesome folks have made plugins for CMSs and Components for JavaScript frameworks: Some awesome folks have made plugins for CMSs and Components for JavaScript frameworks:
| Type | Maintainer | Link | | Type | Maintainer | Link |
| --------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | ----------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| WordPress | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/) | | WordPress | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/) |
| Angular | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv)) | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr) | | Angular | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv)) | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr) |
| React | Chintan Prajapati ([@chintan9](https://github.com/chintan9)) | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react) | | React | Chintan Prajapati ([@chintan9](https://github.com/chintan9)) | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react) |