diff options
Diffstat (limited to 'readme.md')
| -rw-r--r-- | readme.md | 60 |
1 files changed, 38 insertions, 22 deletions
@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups. If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following: ```html -<script src="https://cdn.plyr.io/3.2.4/plyr.js"></script> +<script src="https://cdn.plyr.io/3.3.6/plyr.js"></script> ``` _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility @@ -144,13 +144,13 @@ Include the `plyr.css` stylsheet into your `<head>` If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following: ```html -<link rel="stylesheet" href="https://cdn.plyr.io/3.2.4/plyr.css"> +<link rel="stylesheet" href="https://cdn.plyr.io/3.3.6/plyr.css"> ``` ### SVG Sprite The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For -reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.2.4/plyr.svg`. +reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.6/plyr.svg`. ## Ads @@ -210,7 +210,7 @@ You can specify a range of arguments for the constructor to use: * A [`NodeList]`(https://developer.mozilla.org/en-US/docs/Web/API/NodeList) * A [jQuery](https://jquery.com) object -_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. +_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [setting up multiple players](#setting-up-multiple-players) below. Here's some examples @@ -226,20 +226,32 @@ Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElemen const player = new Plyr(document.getElementById('player')); ``` -Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList): +Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) (see note below): ```javascript const player = new Plyr(document.querySelectorAll('.js-player')); ``` -The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds +The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds. ##### Setting up multiple players +You have two choices here. You can either use a simple array loop to map the constructor: + +```javascript +const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p)); +``` + +...or use a static method where you can pass a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) or an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements: + ```javascript -const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player)); +const players = Plyr.setup('.js-player'); ``` +Both options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array. + +##### Passing options + The second argument for the constructor is the [options](#options) object: ```javascript @@ -248,7 +260,7 @@ const player = new Plyr('#player', { }); ``` -The constructor will return a Plyr object that can be used with the [API](#api) methods. See the [API](#api) section for more info. +In all cases, the constructor will return a Plyr object that can be used with the [API](#api) methods. See the [API](#api) section for more info. #### Options @@ -279,7 +291,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke | `clickToPlay` | Boolean | `true` | Click (or tap) of the video container will toggle play/pause. | | `disableContextMenu` | Boolean | `true` | Disable right click menu on video to <em>help</em> as very primitive obfuscation to prevent downloads of content. | | `hideControls` | Boolean | `true` | Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly. | -| `showPosterOnEnd` | Boolean | false | This will restore and _reload_ HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution. | +| `resetOnEnd` | Boolean | false | Reset the playback to the start once playback is complete. | | `keyboard` | Object | `{ focused: true, global: false }` | Enable [keyboard shortcuts](#shortcuts) for focused players only or globally | | `tooltips` | Object | `{ controls: false, seek: true }` | `controls`: Display control labels as tooltips on `:hover` & `:focus` (by default, the labels are screen reader only). `seek`: Display a seek tooltip to indicate on click where the media would seek to. | | `duration` | Number | `null` | Specify a custom duration for media. | @@ -374,8 +386,9 @@ player.fullscreen.active; // false; | -------------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `isHTML5` | ✓ | - | Returns a boolean indicating if the current player is HTML5. | | `isEmbed` | ✓ | - | Returns a boolean indicating if the current player is an embedded player. | -| `paused` | ✓ | - | Returns a boolean indicating if the current player is paused. | | `playing` | ✓ | - | Returns a boolean indicating if the current player is playing. | +| `paused` | ✓ | - | Returns a boolean indicating if the current player is paused. | +| `stopped` | ✓ | - | Returns a boolean indicating if the current player is stopped. | | `ended` | ✓ | - | Returns a boolean indicating if the current player has finished playback. | | `buffered` | ✓ | - | Returns a float between 0 and 1 indicating how much of the media is buffered | | `currentTime` | ✓ | ✓ | Gets or sets the currentTime for the player. The setter accepts a float in seconds. | @@ -388,7 +401,7 @@ player.fullscreen.active; // false; | `quality`¹ | ✓ | ✓ | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config. | | `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](#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. | | `autoplay` | ✓ | ✓ | Gets or sets the autoplay state of the player. The setter accepts a boolean. | | `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. | | `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. | @@ -599,6 +612,8 @@ Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's * Using [Shaka](https://github.com/google/shaka-player) - [Demo](http://codepen.io/sampotts/pen/zBNpVR) * Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN) +_Note_: These need updating to use the new v3 syntax but would still work. + ## Fullscreen Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). @@ -607,19 +622,20 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http Plyr supports the last 2 versions of most _modern_ browsers. -| Browser | Supported | -| ------------- | --------- | -| Safari | ✓ | -| Mobile Safari | ✓¹ | -| Firefox | ✓ | -| Chrome | ✓ | -| Opera | ✓ | -| Edge | ✓ | -| IE11 | ✓ | -| IE10 | ✓² | +| Browser | Supported | +| ------------- | ------------- | +| Safari | ✓ | +| Mobile Safari | ✓¹ | +| Firefox | ✓ | +| Chrome | ✓ | +| Opera | ✓ | +| Edge | ✓ | +| IE11 | ✓³ | +| IE10 | ✓²³ | 1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide. -2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)) +2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)). +3. Polyfills required. See below. ### Polyfills |