Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0505e49038 | |||
| 6ff1e47341 | |||
| e72a91de6e | |||
| 52ec4c012d | |||
| ae89c92ab6 | |||
| 57ad124ce8 | |||
| a85d45d2e5 | |||
| a6f57fc034 | |||
| 04c9653b86 | |||
| b8cdc71001 | |||
| 277ebf0fd1 | |||
| 7682d998e7 | |||
| 05b9b9a831 |
16
changelog.md
16
changelog.md
@ -1,5 +1,21 @@
|
||||
# Changelog
|
||||
|
||||
## v1.8.11
|
||||
- Fix for keyboard navigation on Vimeo (Fixes #317)
|
||||
- Fix for bug introduced in v1.8.9 related to additional controls
|
||||
- Vimeo API upgrade
|
||||
- Fix for YouTube bug introduced in v1.8.9
|
||||
- Added support for passing array to .setup() (Fixes #319)
|
||||
|
||||
## v1.8.10
|
||||
- Fix for seek issues introduced in v1.8.9
|
||||
|
||||
## v1.8.9
|
||||
- Fix for fullscreen not being defined (Fixes #295)
|
||||
- Fix for multiline captions (Fixes #314)
|
||||
- Clean up of type checks and fix for `restart()` (Fixes #315)
|
||||
- Fix for `MEDIA_ERR_SRC_NOT_SUPPORTED` when calling `.source()` API method
|
||||
|
||||
## v1.8.8
|
||||
- Added getCurrentTime API method (fixes #292)
|
||||
- Fix for !hideControls on touch devices (fixes #303)
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.8.8",
|
||||
"version": "1.8.11",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
||||
15
readme.md
15
readme.md
@ -3,7 +3,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
|
||||
|
||||
[Checkout the demo](https://plyr.io)
|
||||
|
||||
[](https://plyr.io)
|
||||
[](https://plyr.io)
|
||||
|
||||
## Why?
|
||||
We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
||||
@ -21,8 +21,8 @@ We wanted a lightweight, accessible and customizable media player that supports
|
||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
|
||||
- **i18n support** - support for internationalization of controls
|
||||
- **No dependencies** - written in "vanilla" JavaScript, no jQuery required
|
||||
- **SASS and LESS provided** - If you like _these_ over plain CSS
|
||||
- **[Streaming](#streaming)** - Support for hls.js, Shaka and dash.js streaming playback
|
||||
- **SASS and LESS source** - to include in your build process
|
||||
- **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
|
||||
|
||||
Oh and yes, it works with Bootstrap.
|
||||
|
||||
@ -47,6 +47,9 @@ Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com
|
||||
### [Neos](https://packagist.org/packages/jonnitto/plyr)
|
||||
Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
|
||||
|
||||
### [Kirby](https://github.com/dpschen/kirby-plyrtag)
|
||||
Created and maintained by Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))
|
||||
|
||||
## Using package managers
|
||||
You can grab the source using one of the following package managers.
|
||||
|
||||
@ -118,7 +121,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
|
||||
If you want to use our CDN for the JavaScript, you can use the following:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.8.8/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.8.11/plyr.js"></script>
|
||||
```
|
||||
|
||||
### CSS
|
||||
@ -131,11 +134,11 @@ Include the `plyr.css` stylsheet into your `<head>`
|
||||
If you want to use our CDN for the default CSS, you can use the following:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.8.8/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.8.11/plyr.css">
|
||||
```
|
||||
|
||||
### SVG Sprite
|
||||
The SVG sprite is loaded automatically from our CDN. To change this, see the [#options](Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/1.8.8/plyr.svg`.
|
||||
The SVG sprite is loaded automatically from our CDN. To change this, see the [#options](Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/1.8.11/plyr.svg`.
|
||||
|
||||
## Advanced
|
||||
|
||||
|
||||
330
src/js/plyr.js
330
src/js/plyr.js
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.8.8
|
||||
// plyr.js v1.8.11
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -23,7 +23,6 @@
|
||||
}
|
||||
}(typeof window !== 'undefined' ? window : this, function(window, document) {
|
||||
'use strict';
|
||||
/*global YT,$f*/
|
||||
|
||||
// Globals
|
||||
var fullscreen,
|
||||
@ -44,7 +43,7 @@
|
||||
displayDuration: true,
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/1.8.8/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/1.8.11/plyr.svg',
|
||||
clickToPlay: true,
|
||||
hideControls: true,
|
||||
showPosterOnEnd: false,
|
||||
@ -146,7 +145,7 @@
|
||||
// URLs
|
||||
urls: {
|
||||
vimeo: {
|
||||
api: 'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js',
|
||||
api: 'https://player.vimeo.com/api/player.js',
|
||||
},
|
||||
youtube: {
|
||||
api: 'https://www.youtube.com/iframe_api'
|
||||
@ -376,7 +375,7 @@
|
||||
// Set attributes
|
||||
function _setAttributes(element, attributes) {
|
||||
for (var key in attributes) {
|
||||
element.setAttribute(key, (typeof attributes[key] === 'boolean' && attributes[key]) ? '' : attributes[key]);
|
||||
element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -464,7 +463,7 @@
|
||||
|
||||
// Whether the listener is a capturing listener or not
|
||||
// Default to false
|
||||
if (typeof useCapture !== 'boolean') {
|
||||
if (!_is.boolean(useCapture)) {
|
||||
useCapture = false;
|
||||
}
|
||||
|
||||
@ -492,7 +491,7 @@
|
||||
}
|
||||
|
||||
// Default bubbles to false
|
||||
if (typeof bubbles !== 'boolean') {
|
||||
if (!_is.boolean(bubbles)) {
|
||||
bubbles = false;
|
||||
}
|
||||
|
||||
@ -515,7 +514,7 @@
|
||||
}
|
||||
|
||||
// Get state
|
||||
state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed'));
|
||||
state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
|
||||
|
||||
// Set the attribute on target
|
||||
target.setAttribute('aria-pressed', state);
|
||||
@ -570,6 +569,34 @@
|
||||
return destination;
|
||||
}
|
||||
|
||||
// Check variable types
|
||||
var _is = {
|
||||
object: function(input) {
|
||||
return input !== null && typeof(input) === 'object';
|
||||
},
|
||||
array: function(input) {
|
||||
return input !== null && typeof(input) === 'object' && input.constructor === Array;
|
||||
},
|
||||
number: function(input) {
|
||||
return typeof(input) === 'number' && !isNaN(input - 0) || (typeof input == 'object' && input.constructor === Number);
|
||||
},
|
||||
string: function(input) {
|
||||
return typeof input === 'string' || (typeof input == 'object' && input.constructor === String);
|
||||
},
|
||||
boolean: function(input) {
|
||||
return typeof input === 'boolean';
|
||||
},
|
||||
nodeList: function(input) {
|
||||
return input instanceof NodeList;
|
||||
},
|
||||
htmlElement: function(input) {
|
||||
return input instanceof HTMLElement;
|
||||
},
|
||||
undefined: function(input) {
|
||||
return typeof input === 'undefined';
|
||||
}
|
||||
};
|
||||
|
||||
// Fullscreen API
|
||||
function _fullscreen() {
|
||||
var fullscreen = {
|
||||
@ -584,7 +611,7 @@
|
||||
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
|
||||
|
||||
// Check for native support
|
||||
if (typeof document.cancelFullScreen !== 'undefined') {
|
||||
if (!_is.undefined(document.cancelFullScreen)) {
|
||||
fullscreen.supportsFullScreen = true;
|
||||
}
|
||||
else {
|
||||
@ -592,12 +619,12 @@
|
||||
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
|
||||
fullscreen.prefix = browserPrefixes[i];
|
||||
|
||||
if (typeof document[fullscreen.prefix + 'CancelFullScreen'] !== 'undefined') {
|
||||
if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) {
|
||||
fullscreen.supportsFullScreen = true;
|
||||
break;
|
||||
}
|
||||
// Special case for MS (when isn't it?)
|
||||
else if (typeof document.msExitFullscreen !== 'undefined' && document.msFullscreenEnabled) {
|
||||
else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
|
||||
fullscreen.prefix = 'ms';
|
||||
fullscreen.supportsFullScreen = true;
|
||||
break;
|
||||
@ -612,7 +639,7 @@
|
||||
fullscreen.fullScreenEventName = (fullscreen.prefix == 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange');
|
||||
|
||||
fullscreen.isFullScreen = function(element) {
|
||||
if (typeof element === 'undefined') {
|
||||
if (_is.undefined(element)) {
|
||||
element = document.body;
|
||||
}
|
||||
switch (this.prefix) {
|
||||
@ -625,7 +652,7 @@
|
||||
}
|
||||
};
|
||||
fullscreen.requestFullScreen = function(element) {
|
||||
if (typeof element === 'undefined') {
|
||||
if (_is.undefined(element)) {
|
||||
element = document.body;
|
||||
}
|
||||
return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix == 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
|
||||
@ -878,7 +905,9 @@
|
||||
}
|
||||
|
||||
// Toggle state
|
||||
_toggleState(plyr.buttons.fullscreen, false);
|
||||
if (plyr.buttons && plyr.buttons.fullscreen) {
|
||||
_toggleState(plyr.buttons.fullscreen, false);
|
||||
}
|
||||
|
||||
// Setup focus trap
|
||||
_focusTrap();
|
||||
@ -887,6 +916,7 @@
|
||||
|
||||
// Setup captions
|
||||
function _setupCaptions() {
|
||||
// Bail if not HTML5 video
|
||||
if (plyr.type !== 'video') {
|
||||
return;
|
||||
}
|
||||
@ -1041,12 +1071,12 @@
|
||||
container.innerHTML = '';
|
||||
|
||||
// Default to empty
|
||||
if (typeof caption === 'undefined') {
|
||||
if (_is.undefined(caption)) {
|
||||
caption = '';
|
||||
}
|
||||
|
||||
// Set the span content
|
||||
if (typeof caption === 'string') {
|
||||
if (_is.undefined(caption)) {
|
||||
content.innerHTML = caption.trim();
|
||||
}
|
||||
else {
|
||||
@ -1106,7 +1136,7 @@
|
||||
// Check time is a number, if not use currentTime
|
||||
// IE has a bug where currentTime doesn't go to 0
|
||||
// https://twitter.com/Sam_Potts/status/573715746506731521
|
||||
time = typeof time === 'number' ? time : plyr.media.currentTime;
|
||||
time = _is.number(time) ? time : plyr.media.currentTime;
|
||||
|
||||
// If there's no subs available, bail
|
||||
if (!plyr.captions[plyr.subcount]) {
|
||||
@ -1197,7 +1227,7 @@
|
||||
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
function _insertChildElements(type, attributes) {
|
||||
if (typeof attributes === 'string') {
|
||||
if (_is.string(attributes)) {
|
||||
_insertElement(type, plyr.media, { src: attributes });
|
||||
}
|
||||
else if (attributes.constructor === Array) {
|
||||
@ -1247,13 +1277,13 @@
|
||||
if (config.selectors.controls.container !== null) {
|
||||
container = config.selectors.controls.container;
|
||||
|
||||
if (typeof selector === 'string') {
|
||||
if (_is.string(container)) {
|
||||
container = document.querySelector(container);
|
||||
}
|
||||
}
|
||||
|
||||
// Inject into the container by default
|
||||
if (!(container instanceof HTMLElement)) {
|
||||
if (!_is.htmlElement(container)) {
|
||||
container = plyr.container
|
||||
}
|
||||
|
||||
@ -1350,7 +1380,7 @@
|
||||
var label = config.i18n.play;
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (typeof(config.title) !== 'undefined' && config.title.length) {
|
||||
if (!_is.undefined(config.title) && config.title.length) {
|
||||
label += ', ' + config.title;
|
||||
}
|
||||
|
||||
@ -1363,7 +1393,7 @@
|
||||
|
||||
// Set iframe title
|
||||
// https://github.com/Selz/plyr/issues/124
|
||||
if (iframe instanceof HTMLElement) {
|
||||
if (_is.htmlElement(iframe)) {
|
||||
iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
|
||||
}
|
||||
}
|
||||
@ -1443,7 +1473,7 @@
|
||||
container.setAttribute('id', id);
|
||||
|
||||
// Setup API
|
||||
if (typeof YT === 'object') {
|
||||
if (_is.object(window.YT)) {
|
||||
_youTubeReady(mediaId, container);
|
||||
}
|
||||
else {
|
||||
@ -1464,41 +1494,27 @@
|
||||
}
|
||||
// Vimeo
|
||||
else if (plyr.type === 'vimeo') {
|
||||
// Inject the iframe
|
||||
var vimeo = document.createElement('iframe');
|
||||
// Create the YouTube container
|
||||
plyr.media.appendChild(container);
|
||||
|
||||
// Watch for iframe load
|
||||
vimeo.loaded = false;
|
||||
_on(vimeo, 'load', function() { vimeo.loaded = true; });
|
||||
|
||||
_setAttributes(vimeo, {
|
||||
'src': 'https://player.vimeo.com/video/' + mediaId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0',
|
||||
'id': id,
|
||||
'allowfullscreen': '',
|
||||
'frameborder': 0
|
||||
});
|
||||
|
||||
// If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo
|
||||
if (plyr.supported.full) {
|
||||
container.appendChild(vimeo);
|
||||
plyr.media.appendChild(container);
|
||||
}
|
||||
else {
|
||||
plyr.media.appendChild(vimeo);
|
||||
}
|
||||
// Set ID
|
||||
container.setAttribute('id', id);
|
||||
|
||||
// Load the API if not already
|
||||
if (!('$f' in window)) {
|
||||
if (!_is.object(window.Vimeo)) {
|
||||
_injectScript(config.urls.vimeo.api);
|
||||
}
|
||||
|
||||
// Wait for fragaloop load
|
||||
var vimeoTimer = window.setInterval(function() {
|
||||
if ('$f' in window && vimeo.loaded) {
|
||||
window.clearInterval(vimeoTimer);
|
||||
_vimeoReady.call(vimeo);
|
||||
}
|
||||
}, 50);
|
||||
// Wait for fragaloop load
|
||||
var vimeoTimer = window.setInterval(function() {
|
||||
if (_is.object(window.Vimeo)) {
|
||||
window.clearInterval(vimeoTimer);
|
||||
_vimeoReady(mediaId, container);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
else {
|
||||
_vimeoReady(mediaId, container);
|
||||
}
|
||||
}
|
||||
// Soundcloud
|
||||
else if (plyr.type === 'soundcloud') {
|
||||
@ -1556,7 +1572,7 @@
|
||||
|
||||
// Setup instance
|
||||
// https://developers.google.com/youtube/iframe_api_reference
|
||||
plyr.embed = new YT.Player(container.id, {
|
||||
plyr.embed = new window.YT.Player(container.id, {
|
||||
videoId: videoId,
|
||||
playerVars: {
|
||||
autoplay: (config.autoplay ? 1 : 0),
|
||||
@ -1684,86 +1700,86 @@
|
||||
}
|
||||
|
||||
// Vimeo ready
|
||||
function _vimeoReady() {
|
||||
/* jshint validthis: true */
|
||||
plyr.embed = $f(this);
|
||||
function _vimeoReady(mediaId, container) {
|
||||
// Setup player
|
||||
plyr.embed = new window.Vimeo.Player(container.id, {
|
||||
id: mediaId,
|
||||
loop: config.loop,
|
||||
autoplay: config.autoplay,
|
||||
byline: false,
|
||||
portrait: false,
|
||||
title: false
|
||||
});
|
||||
|
||||
// Setup on ready
|
||||
plyr.embed.addEvent('ready', function() {
|
||||
|
||||
// Create a faux HTML5 API using the Vimeo API
|
||||
plyr.media.play = function() {
|
||||
plyr.embed.api('play');
|
||||
plyr.media.paused = false;
|
||||
};
|
||||
plyr.media.pause = function() {
|
||||
plyr.embed.api('pause');
|
||||
plyr.media.paused = true;
|
||||
};
|
||||
plyr.media.stop = function() {
|
||||
plyr.embed.api('stop');
|
||||
plyr.media.paused = true;
|
||||
};
|
||||
// Create a faux HTML5 API using the Vimeo API
|
||||
plyr.media.play = function() {
|
||||
plyr.embed.play();
|
||||
plyr.media.paused = false;
|
||||
};
|
||||
plyr.media.pause = function() {
|
||||
plyr.embed.pause();
|
||||
plyr.media.paused = true;
|
||||
plyr.media.currentTime = 0;
|
||||
};
|
||||
plyr.media.stop = function() {
|
||||
plyr.embed.stop();
|
||||
plyr.media.paused = true;
|
||||
};
|
||||
plyr.media.paused = true;
|
||||
plyr.media.currentTime = 0;
|
||||
|
||||
// Update UI
|
||||
_embedReady();
|
||||
// Update UI
|
||||
_embedReady();
|
||||
|
||||
plyr.embed.api('getCurrentTime', function (value) {
|
||||
plyr.media.currentTime = value;
|
||||
plyr.embed.getCurrentTime().then(function (value) {
|
||||
plyr.media.currentTime = value;
|
||||
|
||||
// Trigger timeupdate
|
||||
_triggerEvent(plyr.media, 'timeupdate');
|
||||
});
|
||||
// Trigger timeupdate
|
||||
_triggerEvent(plyr.media, 'timeupdate');
|
||||
});
|
||||
|
||||
plyr.embed.api('getDuration', function(value) {
|
||||
plyr.media.duration = value;
|
||||
plyr.embed.getDuration().then(function(value) {
|
||||
plyr.media.duration = value;
|
||||
|
||||
// Display duration if available
|
||||
_displayDuration();
|
||||
});
|
||||
// Display duration if available
|
||||
_displayDuration();
|
||||
});
|
||||
|
||||
plyr.embed.addEvent('play', function() {
|
||||
plyr.media.paused = false;
|
||||
_triggerEvent(plyr.media, 'play');
|
||||
_triggerEvent(plyr.media, 'playing');
|
||||
});
|
||||
// Captions
|
||||
if (config.captions.defaultActive) {
|
||||
plyr.embed.enableTextTrack('en');
|
||||
}
|
||||
|
||||
plyr.embed.addEvent('pause', function() {
|
||||
plyr.media.paused = true;
|
||||
_triggerEvent(plyr.media, 'pause');
|
||||
});
|
||||
plyr.embed.on('play', function() {
|
||||
plyr.media.paused = false;
|
||||
_triggerEvent(plyr.media, 'play');
|
||||
_triggerEvent(plyr.media, 'playing');
|
||||
});
|
||||
|
||||
plyr.embed.addEvent('playProgress', function(data) {
|
||||
plyr.media.seeking = false;
|
||||
plyr.media.currentTime = data.seconds;
|
||||
_triggerEvent(plyr.media, 'timeupdate');
|
||||
});
|
||||
plyr.embed.on('pause', function() {
|
||||
plyr.media.paused = true;
|
||||
_triggerEvent(plyr.media, 'pause');
|
||||
});
|
||||
|
||||
plyr.embed.addEvent('loadProgress', function(data) {
|
||||
plyr.media.buffered = data.percent;
|
||||
_triggerEvent(plyr.media, 'progress');
|
||||
plyr.embed.on('timeupdate', function(data) {
|
||||
plyr.media.seeking = false;
|
||||
plyr.media.currentTime = data.seconds;
|
||||
_triggerEvent(plyr.media, 'timeupdate');
|
||||
});
|
||||
|
||||
if (parseInt(data.percent) === 1) {
|
||||
// Trigger event
|
||||
_triggerEvent(plyr.media, 'canplaythrough');
|
||||
}
|
||||
});
|
||||
plyr.embed.on('progress', function(data) {
|
||||
plyr.media.buffered = data.percent;
|
||||
_triggerEvent(plyr.media, 'progress');
|
||||
|
||||
plyr.embed.addEvent('finish', function() {
|
||||
plyr.media.paused = true;
|
||||
_triggerEvent(plyr.media, 'ended');
|
||||
});
|
||||
|
||||
// Always seek to 0
|
||||
// plyr.embed.api('seekTo', 0);
|
||||
|
||||
// Autoplay
|
||||
if (config.autoplay) {
|
||||
plyr.embed.api('play');
|
||||
if (parseInt(data.percent) === 1) {
|
||||
// Trigger event
|
||||
_triggerEvent(plyr.media, 'canplaythrough');
|
||||
}
|
||||
});
|
||||
|
||||
plyr.embed.on('ended', function() {
|
||||
plyr.media.paused = true;
|
||||
_triggerEvent(plyr.media, 'ended');
|
||||
});
|
||||
}
|
||||
|
||||
// Soundcloud ready
|
||||
@ -1878,7 +1894,7 @@
|
||||
// Rewind
|
||||
function _rewind(seekTime) {
|
||||
// Use default if needed
|
||||
if (typeof seekTime !== 'number') {
|
||||
if (!_is.number(seekTime)) {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
_seek(plyr.media.currentTime - seekTime);
|
||||
@ -1887,7 +1903,7 @@
|
||||
// Fast forward
|
||||
function _forward(seekTime) {
|
||||
// Use default if needed
|
||||
if (typeof seekTime !== 'number') {
|
||||
if (!_is.number(seekTime)) {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
_seek(plyr.media.currentTime + seekTime);
|
||||
@ -1901,11 +1917,11 @@
|
||||
duration = _getDuration();
|
||||
|
||||
// Explicit position
|
||||
if (typeof input === 'number') {
|
||||
if (_is.number(input)) {
|
||||
targetTime = input;
|
||||
}
|
||||
// Event
|
||||
else if (input.type && _inArray(['input', 'change'], input.type)) {
|
||||
else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
|
||||
// It's the seek slider
|
||||
// Seek to the selected time
|
||||
targetTime = ((input.target.value / input.target.max) * duration);
|
||||
@ -1939,7 +1955,7 @@
|
||||
|
||||
case 'vimeo':
|
||||
// Round to nearest second for vimeo
|
||||
plyr.embed.api('seekTo', targetTime.toFixed(0));
|
||||
plyr.embed.setCurrentTime(targetTime.toFixed(0));
|
||||
break;
|
||||
|
||||
case 'soundcloud':
|
||||
@ -2060,7 +2076,9 @@
|
||||
_focusTrap(plyr.isFullscreen);
|
||||
|
||||
// Set button state
|
||||
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
|
||||
if (plyr.buttons && plyr.buttons.fullscreen) {
|
||||
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
|
||||
}
|
||||
|
||||
// Trigger an event
|
||||
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true);
|
||||
@ -2082,7 +2100,7 @@
|
||||
// Mute
|
||||
function _toggleMute(muted) {
|
||||
// If the method is called without parameter, toggle based on current value
|
||||
if (typeof muted !== 'boolean') {
|
||||
if (!_is.boolean(muted)) {
|
||||
muted = !plyr.media.muted;
|
||||
}
|
||||
|
||||
@ -2106,9 +2124,6 @@
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
|
||||
break;
|
||||
|
||||
case 'soundcloud':
|
||||
plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
|
||||
break;
|
||||
@ -2125,7 +2140,7 @@
|
||||
min = config.volumeMin;
|
||||
|
||||
// Use default if no value specified
|
||||
if (typeof volume === 'undefined') {
|
||||
if (_is.undefined(volume)) {
|
||||
volume = config.volume;
|
||||
|
||||
if (config.storage.enabled && _storage().supported) {
|
||||
@ -2161,16 +2176,12 @@
|
||||
|
||||
// Embeds
|
||||
if (_inArray(config.types.embed, plyr.type)) {
|
||||
// YouTube
|
||||
switch(plyr.type) {
|
||||
case 'youtube':
|
||||
plyr.embed.setVolume(plyr.media.volume * 100);
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
plyr.embed.api('setVolume', plyr.media.volume);
|
||||
break;
|
||||
|
||||
case 'soundcloud':
|
||||
plyr.embed.setVolume(plyr.media.volume);
|
||||
break;
|
||||
@ -2237,7 +2248,7 @@
|
||||
}
|
||||
|
||||
// If the method is called without parameter, toggle based on current value
|
||||
if (typeof show !== 'boolean') {
|
||||
if (!_is.boolean(show)) {
|
||||
show = (plyr.container.className.indexOf(config.classes.captions.active) === -1);
|
||||
}
|
||||
|
||||
@ -2307,7 +2318,7 @@
|
||||
return _getPercentage(buffered.end(0), duration);
|
||||
}
|
||||
// YouTube returns between 0 and 1
|
||||
else if (typeof buffered === 'number') {
|
||||
else if (_is.number(buffered)) {
|
||||
return (buffered * 100);
|
||||
}
|
||||
|
||||
@ -2329,11 +2340,11 @@
|
||||
}
|
||||
|
||||
// Default to 0
|
||||
if (typeof value === 'undefined') {
|
||||
if (_is.undefined(value)) {
|
||||
value = 0;
|
||||
}
|
||||
// Default to buffer or bail
|
||||
if (typeof progress === 'undefined') {
|
||||
if (_is.undefined(progress)) {
|
||||
if (plyr.progress && plyr.progress.buffer) {
|
||||
progress = plyr.progress.buffer;
|
||||
}
|
||||
@ -2343,7 +2354,7 @@
|
||||
}
|
||||
|
||||
// One progress element passed
|
||||
if (progress instanceof HTMLElement) {
|
||||
if (_is.htmlElement(progress)) {
|
||||
progress.value = value;
|
||||
}
|
||||
// Object of progress + text element
|
||||
@ -2424,7 +2435,7 @@
|
||||
// Update seek range and progress
|
||||
function _updateSeekDisplay(time) {
|
||||
// Default to 0
|
||||
if (typeof time !== 'number') {
|
||||
if (!_is.number(time)) {
|
||||
time = 0;
|
||||
}
|
||||
|
||||
@ -2501,7 +2512,7 @@
|
||||
show = toggle;
|
||||
|
||||
// Default to false if no boolean
|
||||
if (typeof toggle !== 'boolean') {
|
||||
if (!_is.boolean(toggle)) {
|
||||
if (toggle && toggle.type) {
|
||||
// Is the enter fullscreen event
|
||||
isEnterFullscreen = (toggle.type === 'enterfullscreen');
|
||||
@ -2559,7 +2570,7 @@
|
||||
// Add common function to retrieve media source
|
||||
function _source(source) {
|
||||
// If not null or undefined, parse it
|
||||
if (typeof source !== 'undefined') {
|
||||
if (!_is.undefined(source)) {
|
||||
_updateSource(source);
|
||||
return;
|
||||
}
|
||||
@ -2572,7 +2583,7 @@
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
plyr.embed.api('getVideoUrl', function (value) {
|
||||
plyr.embed.getVideoUrl.then(function (value) {
|
||||
url = value;
|
||||
});
|
||||
break;
|
||||
@ -2594,7 +2605,7 @@
|
||||
// Update source
|
||||
// Sources are not checked for support so be careful
|
||||
function _updateSource(source) {
|
||||
if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) {
|
||||
if (!_is.object(source) || !('sources' in source) || !source.sources.length) {
|
||||
_warn('Invalid source format');
|
||||
return;
|
||||
}
|
||||
@ -2671,7 +2682,7 @@
|
||||
_prependChild(plyr.container, plyr.media);
|
||||
|
||||
// Autoplay the new source?
|
||||
if (typeof source.autoplay !== 'undefined') {
|
||||
if (_is.boolean(source.autoplay)) {
|
||||
config.autoplay = source.autoplay;
|
||||
}
|
||||
|
||||
@ -2800,7 +2811,7 @@
|
||||
for (var button in plyr.buttons) {
|
||||
var element = plyr.buttons[button];
|
||||
|
||||
if (element instanceof NodeList) {
|
||||
if (_is.nodeList(element)) {
|
||||
for (var i = 0; i < element.length; i++) {
|
||||
_toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
|
||||
}
|
||||
@ -3023,9 +3034,8 @@
|
||||
|
||||
// Set blank video src attribute
|
||||
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
|
||||
// Small mp4: https://github.com/mathiasbynens/small/blob/master/mp4.mp4
|
||||
// Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
|
||||
plyr.media.setAttribute('src', 'data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAGm1kYXQAAAGzABAHAAABthBgUYI9t+8AAAMNbW9vdgAAAGxtdmhkAAAAAMXMvvrFzL76AAAD6AAAACoAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAABhpb2RzAAAAABCAgIAHAE/////+/wAAAiF0cmFrAAAAXHRraGQAAAAPxcy++sXMvvoAAAABAAAAAAAAACoAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAgAAAAIAAAAAAG9bWRpYQAAACBtZGhkAAAAAMXMvvrFzL76AAAAGAAAAAEVxwAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAABaG1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAShzdGJsAAAAxHN0c2QAAAAAAAAAAQAAALRtcDR2AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAgACABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAXmVzZHMAAAAAA4CAgE0AAQAEgICAPyARAAAAAAMNQAAAAAAFgICALQAAAbABAAABtYkTAAABAAAAASAAxI2IAMUARAEUQwAAAbJMYXZjNTMuMzUuMAaAgIABAgAAABhzdHRzAAAAAAAAAAEAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAAAAASAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYHVkdGEAAABYbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAraWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yMS4x');
|
||||
plyr.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4');
|
||||
|
||||
// Load the new empty source
|
||||
// This will cancel existing requests
|
||||
@ -3274,7 +3284,7 @@
|
||||
var x = new XMLHttpRequest();
|
||||
|
||||
// If the id is set and sprite exists, bail
|
||||
if (typeof id === 'string' && document.querySelector('#' + id) !== null) {
|
||||
if (_is.string(id) && document.querySelector('#' + id) !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -3290,7 +3300,7 @@
|
||||
x.onload = function() {
|
||||
var c = document.createElement('div');
|
||||
c.setAttribute('hidden', '');
|
||||
if (typeof id === 'string') {
|
||||
if (_is.string(id)) {
|
||||
c.setAttribute('id', id);
|
||||
}
|
||||
c.innerHTML = x.responseText;
|
||||
@ -3348,17 +3358,17 @@
|
||||
|
||||
// Select the elements
|
||||
// Assume elements is a NodeList by default
|
||||
if (typeof targets === 'string') {
|
||||
if (_is.string(targets)) {
|
||||
targets = document.querySelectorAll(targets);
|
||||
}
|
||||
// Single HTMLElement passed
|
||||
else if (targets instanceof HTMLElement) {
|
||||
else if (_is.htmlElement(targets)) {
|
||||
targets = [targets];
|
||||
}
|
||||
// No selector passed, possibly options as first argument
|
||||
else if (!(targets instanceof NodeList) && typeof targets !== 'string') {
|
||||
else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
|
||||
// If options are the first argument
|
||||
if (typeof options === 'undefined' && typeof targets === 'object') {
|
||||
if (_is.undefined(options) && _is.object(targets)) {
|
||||
options = targets;
|
||||
}
|
||||
|
||||
@ -3366,17 +3376,17 @@
|
||||
targets = document.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
// Convert NodeList to array
|
||||
if (_is.nodeList(targets)) {
|
||||
targets = Array.prototype.slice.call(targets);
|
||||
}
|
||||
|
||||
// Bail if disabled or no basic support
|
||||
// You may want to disable certain UAs etc
|
||||
if (!supported().basic || !targets.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert NodeList to array
|
||||
if (targets instanceof NodeList) {
|
||||
targets = Array.prototype.slice.call(targets);
|
||||
}
|
||||
|
||||
// Check if the targets have multiple media elements
|
||||
for (var i = 0; i < targets.length; i++) {
|
||||
var target = targets[i];
|
||||
@ -3452,7 +3462,7 @@
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
|
||||
(function () {
|
||||
if (typeof window.CustomEvent === 'function') {
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
function CustomEvent(event, params) {
|
||||
|
||||
@ -225,6 +225,8 @@
|
||||
border-radius: 2px;
|
||||
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
|
||||
background: @plyr-captions-bg;
|
||||
box-decoration-break: clone;
|
||||
line-height: 150%;
|
||||
}
|
||||
span:empty {
|
||||
display: none;
|
||||
|
||||
@ -225,6 +225,8 @@
|
||||
border-radius: 2px;
|
||||
padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
|
||||
background: $plyr-captions-bg;
|
||||
box-decoration-break: clone;
|
||||
line-height: 150%;
|
||||
}
|
||||
span:empty {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user