Vimeo options, docs for multiple players
This commit is contained in:
parent
90919411e9
commit
bbb11e611e
4
demo/dist/demo.js
vendored
4
demo/dist/demo.js
vendored
@ -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;
|
||||||
|
2
demo/dist/demo.js.map
vendored
2
demo/dist/demo.js.map
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.min.js
vendored
2
demo/dist/demo.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.min.js.map
vendored
2
demo/dist/demo.min.js.map
vendored
File diff suppressed because one or more lines are too long
5
dist/plyr.js
vendored
5
dist/plyr.js
vendored
@ -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;
|
||||||
|
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.js
vendored
2
dist/plyr.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.js.map
vendored
2
dist/plyr.min.js.map
vendored
File diff suppressed because one or more lines are too long
5
dist/plyr.polyfilled.js
vendored
5
dist/plyr.polyfilled.js
vendored
@ -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;
|
||||||
|
2
dist/plyr.polyfilled.js.map
vendored
2
dist/plyr.polyfilled.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.polyfilled.min.js
vendored
2
dist/plyr.polyfilled.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.polyfilled.min.js.map
vendored
2
dist/plyr.polyfilled.min.js.map
vendored
File diff suppressed because one or more lines are too long
22
readme.md
22
readme.md
@ -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
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user