Vimeo options, docs for multiple players

This commit is contained in:
Sam Potts
2018-05-08 13:12:39 +10:00
parent 90919411e9
commit bbb11e611e
14 changed files with 40 additions and 19 deletions
+2 -2
View File
@@ -3921,7 +3921,7 @@ singleton.Client = Client;
}); });
// Setup the player // Setup the player
var player = new Plyr('#player', { var player = Plyr.setup('#player', {
debug: true, debug: true,
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
iconUrl: '../dist/plyr.svg', iconUrl: '../dist/plyr.svg',
@@ -3991,7 +3991,7 @@ singleton.Client = Client;
enabled: true, enabled: true,
publisherId: '918848828995742' publisherId: '918848828995742'
} }
}); })[0];
// Expose for tinkering in the console // Expose for tinkering in the console
window.player = player; window.player = player;
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+4 -1
View File
@@ -4976,7 +4976,10 @@ var vimeo = {
// Setup instance // Setup instance
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
player.embed = new window.Vimeo.Player(iframe); player.embed = new window.Vimeo.Player(iframe, {
autopause: player.config.autopause,
muted: player.muted
});
player.media.paused = true; player.media.paused = true;
player.media.currentTime = 0; player.media.currentTime = 0;
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+4 -1
View File
@@ -10010,7 +10010,10 @@ var vimeo = {
// Setup instance // Setup instance
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
player.embed = new window.Vimeo.Player(iframe); player.embed = new window.Vimeo.Player(iframe, {
autopause: player.config.autopause,
muted: player.muted
});
player.media.paused = true; player.media.paused = true;
player.media.currentTime = 0; player.media.currentTime = 0;
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+17 -5
View File
@@ -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 [`NodeList]`(https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
* A [jQuery](https://jquery.com) object * 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 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')); 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 ```javascript
const player = new Plyr(document.querySelectorAll('.js-player')); 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 ##### Setting up multiple players
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(player => new Plyr(player)); 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 = 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: The second argument for the constructor is the [options](#options) object:
```javascript ```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 #### Options
+4 -1
View File
@@ -108,7 +108,10 @@ const vimeo = {
// Setup instance // Setup instance
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
player.embed = new window.Vimeo.Player(iframe); player.embed = new window.Vimeo.Player(iframe, {
autopause: player.config.autopause,
muted: player.muted,
});
player.media.paused = true; player.media.paused = true;
player.media.currentTime = 0; player.media.currentTime = 0;