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

Merge branch 'develop' into a11y-improvements

Browse Source 
# Conflicts:
#	demo/dist/demo.css
#	dist/plyr.css
#	dist/plyr.js.map
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.polyfilled.js.map
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map
#	src/js/captions.js
This commit is contained in:
Sam Potts
2018-06-11 16:54:20 +10:00
parent 38f10d4cc6 38f954ef17
commit 3fad6ed42c
29 changed files with 1519 additions and 1207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,52 @@
# Contributing
We welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.
## Reporting issues
Our GitHub issue tracker is for bug reports and feature requests. Don't create support issues here. Use [Stack Overflow](https://stackoverflow.com/) or [our Slack](https://bit.ly/plyr-chat) for that.
Please verify that your issue hasn't already been answered by our FAQ (https://github.com/sampotts/plyr/wiki/FAQ), or that there isn't already an open issue for it.
When applicable, check that your problem doesn't happen without Plyr (see [FAQ#1](https://github.com/sampotts/plyr/wiki/FAQ#1-does-plyr-work-with--)).
Verify that you are following the documentation, are using the latest version of Plyr, and aren't getting any errors in your own code, causing the issues.
Describe the issue as detailed as possible, answering these questions:
* Does it happen only with specific options and/or specific browsers?
* Does is happen only with HTML5 video, audio, youtube, vimeo or a specific library?
* Does the issue happen on [our demo](https://plyr.io/)? If not, please recreate it with a **minimal** example online. You can use our Codepen templates to get started:
* [HTML5 video](https://codepen.io/pen?template=bKeqpr)
* [HTML5 audio](https://codepen.io/pen?template=rKLywR)
* [YouTube](https://codepen.io/pen?template=GGqbbJ)
* [Vimeo](https://codepen.io/pen?template=bKeXNq)
* [Dash.js integration](https://codepen.io/pen?template=zaBgBy)
* [Hls.js integration](https://codepen.io/pen?template=oyLKQb)
* [Shaka Player integration](https://codepen.io/pen?template=ZRpzZO)
It's important that you keep the issue description and replication demo **minimal**. If your implementation is using a framework, library or custom methods, which aren't needed to reproduce the issue, this makes it harder to debug and understand the issue. While it may be relevant to bring this up (ex: "I need Plyr to trigger the event sooner or it breaks Framework X") it also means that the person who is trying to fix the issue either has to know or learn your frameworks, libraries and custom methods, or that no one will try to fix your issue because it's too much work.
In order to keep things on topic and to avoid bothering people with github notifications, please don't combine multiple problems or bugs into one issue, don't comment on issues unless your comment is related to that issue, and don't post "+1" or "I agree" type of comments. Use the emojis instead.
Last but not least: Keep a civil tone in issues and comments. Non-constructive comments may be removed.
## Requesting features and improvements
If you are missing something in Plyr, you can create a GitHub issue for this as well. Since we prioritize fixing bugs first, and may have a lot of other suggestions and architectural changes to work on as well, these may not be at the top of our list. If it's important or urgent to you, you may want to first ensure it's something we want to have in Plyr, and then contribute it as a pull request.
## Contributing features and documentation
* Fork Plyr, and create a new branch in your fork, based on the **develop** branch
* To test locally, you can use the demo. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build while you are working, and run a local server from the repository root directory. If you have Python installed, this command should work: `python -m SimpleHTTPServer 8080`. Then go to `http://localhost:8080/demo/`
* Develop and test your modifications.
* Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as logging or breakpoints you added for testing, and the build output.
* If your modifications changes the documented behavior or add new features, document these changes in readme.md.
* When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
* If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.

816
changelog.md
View File

File diff suppressed because it is too large Load Diff

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

110
demo/dist/demo.js vendored
View File

@ -767,11 +767,12 @@ function getLocationOrigin() {
// Oh dear IE10... // Oh dear IE10...
if (!document.location.origin) { if (!document.location.origin) {
document.location.origin = return (
document.location.protocol + document.location.protocol +
'//' + '//' +
document.location.hostname + document.location.hostname +
(document.location.port ? ':' + document.location.port : ''); (document.location.port ? ':' + document.location.port : '')
);
} }
return document.location.origin; return document.location.origin;
@ -1866,7 +1867,7 @@ Raven.prototype = {
// webpack (using a build step causes webpack #1617). Grunt verifies that // webpack (using a build step causes webpack #1617). Grunt verifies that
// this value matches package.json during build. // this value matches package.json during build.
// See: https://github.com/getsentry/raven-js/issues/465 // See: https://github.com/getsentry/raven-js/issues/465
VERSION: '3.25.2', VERSION: '3.26.1',
debug: false, debug: false,
@ -2032,7 +2033,7 @@ Raven.prototype = {
if (isFunction$1(options)) { if (isFunction$1(options)) {
args = func || []; args = func || [];
func = options; func = options;
options = undefined; options = {};
} }
return this.wrap(options, func).apply(this, args); return this.wrap(options, func).apply(this, args);
@ -2043,7 +2044,7 @@ Raven.prototype = {
* *
* @param {object} options A specific set of options for this context [optional] * @param {object} options A specific set of options for this context [optional]
* @param {function} func The function to be wrapped in a new context * @param {function} func The function to be wrapped in a new context
* @param {function} func A function to call before the try/catch wrapper [optional, private] * @param {function} _before A function to call before the try/catch wrapper [optional, private]
* @return {function} The newly wrapped functions with a context * @return {function} The newly wrapped functions with a context
*/ */
wrap: function(options, func, _before) { wrap: function(options, func, _before) {
@ -2156,8 +2157,9 @@ Raven.prototype = {
_promiseRejectionHandler: function(event) { _promiseRejectionHandler: function(event) {
this._logDebug('debug', 'Raven caught unhandled promise rejection:', event); this._logDebug('debug', 'Raven caught unhandled promise rejection:', event);
this.captureException(event.reason, { this.captureException(event.reason, {
extra: { mechanism: {
unhandledPromiseRejection: true type: 'onunhandledrejection',
handled: false
} }
}); });
}, },
@ -2834,7 +2836,15 @@ Raven.prototype = {
} }
var originalCallback = args[0]; var originalCallback = args[0];
if (isFunction$1(originalCallback)) { if (isFunction$1(originalCallback)) {
args[0] = self.wrap(originalCallback); args[0] = self.wrap(
{
mechanism: {
type: 'instrument',
data: {function: orig.name}
}
},
originalCallback
);
} }
// IE < 9 doesn't support .call/.apply on setInterval/setTimeout, but it // IE < 9 doesn't support .call/.apply on setInterval/setTimeout, but it
@ -2861,7 +2871,15 @@ Raven.prototype = {
// preserve arity // preserve arity
try { try {
if (fn && fn.handleEvent) { if (fn && fn.handleEvent) {
fn.handleEvent = self.wrap(fn.handleEvent); fn.handleEvent = self.wrap(
{
mechanism: {
type: 'instrument',
data: {target: global, function: 'handleEvent', handler: fn.name}
}
},
fn.handleEvent
);
} }
} catch (err) { } catch (err) {
// can sometimes get 'Permission denied to access property "handle Event' // can sometimes get 'Permission denied to access property "handle Event'
@ -2901,7 +2919,20 @@ Raven.prototype = {
return orig.call( return orig.call(
this, this,
evtName, evtName,
self.wrap(fn, undefined, before), self.wrap(
{
mechanism: {
type: 'instrument',
data: {
target: global,
function: 'addEventListener',
handler: fn.name
}
}
},
fn,
before
),
capture, capture,
secure secure
); );
@ -2935,7 +2966,17 @@ Raven.prototype = {
'requestAnimationFrame', 'requestAnimationFrame',
function(orig) { function(orig) {
return function(cb) { return function(cb) {
return orig(self.wrap(cb)); return orig(
self.wrap(
{
mechanism: {
type: 'instrument',
data: {function: 'requestAnimationFrame', handler: orig.name}
}
},
cb
)
);
}; };
}, },
wrappedBuiltIns wrappedBuiltIns
@ -2998,7 +3039,15 @@ Raven.prototype = {
function wrapProp(prop, xhr) { function wrapProp(prop, xhr) {
if (prop in xhr && isFunction$1(xhr[prop])) { if (prop in xhr && isFunction$1(xhr[prop])) {
fill$1(xhr, prop, function(orig) { fill$1(xhr, prop, function(orig) {
return self.wrap(orig); return self.wrap(
{
mechanism: {
type: 'instrument',
data: {function: prop, handler: orig.name}
}
},
orig
);
}); // intentionally don't track filled methods on XHR instances }); // intentionally don't track filled methods on XHR instances
} }
} }
@ -3063,7 +3112,19 @@ Raven.prototype = {
xhr, xhr,
'onreadystatechange', 'onreadystatechange',
function(orig) { function(orig) {
return self.wrap(orig, undefined, onreadystatechangeHandler); return self.wrap(
{
mechanism: {
type: 'instrument',
data: {
function: 'onreadystatechange',
handler: orig.name
}
}
},
orig,
onreadystatechangeHandler
);
} /* intentionally don't track this instrumentation */ } /* intentionally don't track this instrumentation */
); );
} else { } else {
@ -3287,10 +3348,16 @@ Raven.prototype = {
return globalServer; return globalServer;
}, },
_handleOnErrorStackInfo: function() { _handleOnErrorStackInfo: function(stackInfo, options) {
options = options || {};
options.mechanism = options.mechanism || {
type: 'onerror',
handled: false
};
// if we are intentionally ignoring errors via onerror, bail out // if we are intentionally ignoring errors via onerror, bail out
if (!this._ignoreOnError) { if (!this._ignoreOnError) {
this._handleStackInfo.apply(this, arguments); this._handleStackInfo(stackInfo, options);
} }
}, },
@ -3427,6 +3494,19 @@ Raven.prototype = {
options options
); );
// Move mechanism from options to exception interface
// We do this, as requiring user to pass `{exception:{mechanism:{ ... }}}` would be
// too much
if (!data.exception.mechanism && data.mechanism) {
data.exception.mechanism = data.mechanism;
delete data.mechanism;
}
data.exception.mechanism = objectMerge$1(data.exception.mechanism || {}, {
type: 'generic',
handled: true
});
// Fire away! // Fire away!
this._send(data); this._send(data);
}, },

2
demo/dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

577
dist/plyr.js vendored
View File

@ -493,61 +493,63 @@ var utils = {
// Check variable types // Check variable types
is: { is: {
object: function object(input) { object: function object(input) {
return this.getConstructor(input) === Object; return utils.getConstructor(input) === Object;
}, },
number: function number(input) { number: function number(input) {
return this.getConstructor(input) === Number && !Number.isNaN(input); return utils.getConstructor(input) === Number && !Number.isNaN(input);
}, },
string: function string(input) { string: function string(input) {
return this.getConstructor(input) === String; return utils.getConstructor(input) === String;
}, },
boolean: function boolean(input) { boolean: function boolean(input) {
return this.getConstructor(input) === Boolean; return utils.getConstructor(input) === Boolean;
}, },
function: function _function(input) { function: function _function(input) {
return this.getConstructor(input) === Function; return utils.getConstructor(input) === Function;
}, },
array: function array(input) { array: function array(input) {
return !this.nullOrUndefined(input) && Array.isArray(input); return !utils.is.nullOrUndefined(input) && Array.isArray(input);
}, },
weakMap: function weakMap(input) { weakMap: function weakMap(input) {
return this.instanceof(input, WeakMap); return utils.is.instanceof(input, WeakMap);
}, },
nodeList: function nodeList(input) { nodeList: function nodeList(input) {
return this.instanceof(input, NodeList); return utils.is.instanceof(input, NodeList);
}, },
element: function element(input) { element: function element(input) {
return this.instanceof(input, Element); return utils.is.instanceof(input, Element);
}, },
textNode: function textNode(input) { textNode: function textNode(input) {
return this.getConstructor(input) === Text; return utils.getConstructor(input) === Text;
}, },
event: function event(input) { event: function event(input) {
return this.instanceof(input, Event); return utils.is.instanceof(input, Event);
}, },
cue: function cue(input) { cue: function cue(input) {
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
}, },
track: function track(input) { track: function track(input) {
return this.instanceof(input, TextTrack) || !this.nullOrUndefined(input) && this.string(input.kind); return utils.is.instanceof(input, TextTrack) || !utils.is.nullOrUndefined(input) && utils.is.string(input.kind);
}, },
url: function url(input) { url: function url(input) {
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input); return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
}, },
nullOrUndefined: function nullOrUndefined(input) { nullOrUndefined: function nullOrUndefined(input) {
return input === null || typeof input === 'undefined'; return input === null || typeof input === 'undefined';
}, },
empty: function empty(input) { empty: function empty(input) {
return this.nullOrUndefined(input) || (this.string(input) || this.array(input) || this.nodeList(input)) && !input.length || this.object(input) && !Object.keys(input).length; return utils.is.nullOrUndefined(input) || (utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length || utils.is.object(input) && !Object.keys(input).length;
}, },
instanceof: function _instanceof$$1(input, constructor) { instanceof: function _instanceof$$1(input, constructor) {
return Boolean(input && constructor && input instanceof constructor); return Boolean(input && constructor && input instanceof constructor);
},
getConstructor: function getConstructor(input) {
return !this.nullOrUndefined(input) ? input.constructor : null;
} }
}, },
getConstructor: function getConstructor(input) {
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
},
// Unfortunately, due to mixed support, UA sniffing is required // Unfortunately, due to mixed support, UA sniffing is required
getBrowser: function getBrowser() { getBrowser: function getBrowser() {
return { return {
@ -1142,7 +1144,7 @@ var utils = {
// Bail if the value isn't a number // Bail if the value isn't a number
if (!utils.is.number(time)) { if (!utils.is.number(time)) {
return this.formatTime(null, displayHours, inverted); return utils.formatTime(null, displayHours, inverted);
} }
// Format time component to add leading zero // Format time component to add leading zero
@ -1151,9 +1153,9 @@ var utils = {
}; };
// Breakdown to hours, mins, secs // Breakdown to hours, mins, secs
var hours = this.getHours(time); var hours = utils.getHours(time);
var mins = this.getMinutes(time); var mins = utils.getMinutes(time);
var secs = this.getSeconds(time); var secs = utils.getSeconds(time);
// Do we need to display hours? // Do we need to display hours?
if (displayHours || hours > 0) { if (displayHours || hours > 0) {
@ -1349,12 +1351,12 @@ var utils = {
// Parse URL if needed // Parse URL if needed
if (input.startsWith('http://') || input.startsWith('https://')) { if (input.startsWith('http://') || input.startsWith('https://')) {
var _parseUrl = this.parseUrl(input); var _utils$parseUrl = utils.parseUrl(input);
search = _parseUrl.search; search = _utils$parseUrl.search;
} }
if (this.is.empty(search)) { if (utils.is.empty(search)) {
return null; return null;
} }
@ -1393,6 +1395,14 @@ var utils = {
}, },
// Like outerHTML, but also works for DocumentFragment
getHTML: function getHTML(element) {
var wrapper = document.createElement('div');
wrapper.appendChild(element);
return wrapper.innerHTML;
},
// Get aspect ratio for dimensions // Get aspect ratio for dimensions
getAspectRatio: function getAspectRatio(width, height) { getAspectRatio: function getAspectRatio(width, height) {
var getRatio = function getRatio(w, h) { var getRatio = function getRatio(w, h) {
@ -2134,9 +2144,15 @@ var controls = {
// Create a settings menu item // Create a settings menu item
createMenuItem: function createMenuItem(value, list, type, title) { createMenuItem: function createMenuItem(_ref) {
var badge = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null; var value = _ref.value,
var checked = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false; list = _ref.list,
type = _ref.type,
title = _ref.title,
_ref$badge = _ref.badge,
badge = _ref$badge === undefined ? null : _ref$badge,
_ref$checked = _ref.checked,
checked = _ref$checked === undefined ? false : _ref$checked;
var item = utils.createElement('li'); var item = utils.createElement('li');
@ -2483,8 +2499,13 @@ var controls = {
var sorting = _this3.config.quality.options; var sorting = _this3.config.quality.options;
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
}).forEach(function (quality) { }).forEach(function (quality) {
var label = controls.getLabel.call(_this3, 'quality', quality); controls.createMenuItem.call(_this3, {
controls.createMenuItem.call(_this3, quality, list, type, label, getBadge(quality)); value: quality,
list: list,
type: type,
title: controls.getLabel.call(_this3, 'quality', quality),
badge: getBadge(quality)
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -2527,18 +2548,7 @@ var controls = {
switch (setting) { switch (setting) {
case 'captions': case 'captions':
if (this.captions.active) { value = this.currentTrack;
if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
return lang === 'enabled';
})) {
value = this.captions.language;
} else {
value = 'enabled';
}
} else {
value = '';
}
break; break;
default: default:
@ -2633,10 +2643,10 @@ var controls = {
// TODO: Captions or language? Currently it's mixed // TODO: Captions or language? Currently it's mixed
var type = 'captions'; var type = 'captions';
var list = this.elements.settings.panes.captions.querySelector('ul'); var list = this.elements.settings.panes.captions.querySelector('ul');
var tracks = captions.getTracks.call(this);
// Toggle the pane and tab // Toggle the pane and tab
var toggle = captions.getTracks.call(this).length; controls.toggleTab.call(this, type, tracks.length);
controls.toggleTab.call(this, type, toggle);
// Empty the menu // Empty the menu
utils.emptyElement(list); utils.emptyElement(list);
@ -2645,28 +2655,33 @@ var controls = {
controls.checkMenu.call(this); controls.checkMenu.call(this);
// If there's no captions, bail // If there's no captions, bail
if (!toggle) { if (!tracks.length) {
return; return;
} }
// Re-map the tracks into just the data we need // Generate options data
var tracks = captions.getTracks.call(this).map(function (track) { var options = tracks.map(function (track, value) {
return { return {
language: !utils.is.empty(track.language) ? track.language : 'enabled', value: value,
label: captions.getLabel.call(_this4, track) checked: _this4.captions.active && _this4.currentTrack === value,
title: captions.getLabel.call(_this4, track),
badge: track.language && controls.createBadge.call(_this4, track.language.toUpperCase()),
list: list,
type: 'language'
}; };
}); });
// Add the "Disabled" option to turn off captions // Add the "Disabled" option to turn off captions
tracks.unshift({ options.unshift({
language: '', value: -1,
label: i18n.get('disabled', this.config) checked: !this.captions.active,
title: i18n.get('disabled', this.config),
list: list,
type: 'language'
}); });
// Generate options // Generate options
tracks.forEach(function (track) { options.forEach(controls.createMenuItem.bind(this));
controls.createMenuItem.call(_this4, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this4, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this4.language);
});
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
}, },
@ -2720,8 +2735,12 @@ var controls = {
// Create items // Create items
this.options.speed.forEach(function (speed) { this.options.speed.forEach(function (speed) {
var label = controls.getLabel.call(_this5, 'speed', speed); controls.createMenuItem.call(_this5, {
controls.createMenuItem.call(_this5, speed, list, type, label); value: speed,
list: list,
type: type,
title: controls.getLabel.call(_this5, 'speed', speed)
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -3191,10 +3210,10 @@ var controls = {
var replace = function replace(input) { var replace = function replace(input) {
var result = input; var result = input;
Object.entries(props).forEach(function (_ref) { Object.entries(props).forEach(function (_ref2) {
var _ref2 = slicedToArray(_ref, 2), var _ref3 = slicedToArray(_ref2, 2),
key = _ref2[0], key = _ref3[0],
value = _ref2[1]; value = _ref3[1];
result = utils.replaceAll(result, '{' + key + '}', value); result = utils.replaceAll(result, '{' + key + '}', value);
}); });
@ -3310,29 +3329,8 @@ var captions = {
active = this.config.captions.active; active = this.config.captions.active;
} }
// Set toggled state // Get language from storage, fallback to config
this.toggleCaptions(active); var language = this.storage.get('language') || this.config.captions.language;
// Watch changes to textTracks and update captions menu
if (this.config.captions.update) {
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
}
// Update available languages in list next tick (the event must not be triggered before the listeners)
setTimeout(captions.update.bind(this), 0);
},
update: function update() {
// Update tracks
var tracks = captions.getTracks.call(this);
this.options.captions = tracks.map(function (_ref) {
var language = _ref.language;
return language;
});
// Set language if it hasn't been set already
if (!this.language) {
var language = this.config.captions.language;
if (language === 'auto') { if (language === 'auto') {
var _split = (navigator.language || navigator.userLanguage).split('-'); var _split = (navigator.language || navigator.userLanguage).split('-');
@ -3340,61 +3338,159 @@ var captions = {
language = _split2[0]; language = _split2[0];
} }
this.language = this.storage.get('language') || (language || '').toLowerCase(); // Set language and show if active
captions.setLanguage.call(this, language, active);
// Watch changes to textTracks and update captions menu
if (this.isHTML5) {
var trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
} }
// Toggle the class hooks // Update available languages in list next tick (the event must not be triggered before the listeners)
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); setTimeout(captions.update.bind(this), 0);
},
update: function update() {
var _this = this;
var tracks = captions.getTracks.call(this, true);
// Get the wanted language
var _captions = this.captions,
language = _captions.language,
meta = _captions.meta;
// Handle tracks (add event listener and "pseudo"-default)
if (this.isHTML5 && this.isVideo) {
tracks.filter(function (track) {
return !meta.get(track);
}).forEach(function (track) {
_this.debug.log('Track added', track);
// Attempt to store if the original dom element was "default"
meta.set(track, {
default: track.mode === 'showing'
});
// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';
// Add event listener for cue changes
utils.on(track, 'cuechange', function () {
return captions.updateCues.call(_this);
});
});
}
var trackRemoved = !tracks.find(function (track) {
return track === _this.captions.currentTrackNode;
});
var firstMatch = this.language !== language && tracks.find(function (track) {
return track.language === language;
});
// Update language if removed or first matching track added
if (trackRemoved || firstMatch) {
captions.setLanguage.call(this, language, this.config.captions.active);
}
// Enable or disable captions based on track length
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
// Update available languages in list // Update available languages in list
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
controls.setCaptionsMenu.call(this); controls.setCaptionsMenu.call(this);
} }
}, },
set: function set$$1(index) {
var setLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var tracks = captions.getTracks.call(this);
// Disable captions if setting to -1
if (index === -1) {
this.toggleCaptions(false);
return;
}
if (!utils.is.number(index)) {
this.debug.warn('Invalid caption argument', index);
return;
}
if (!(index in tracks)) {
this.debug.warn('Track not found', index);
return;
}
if (this.captions.currentTrack !== index) {
this.captions.currentTrack = index;
var track = captions.getCurrentTrack.call(this);
var _ref = track || {},
language = _ref.language;
// Store reference to node for invalidation on remove
// Set the captions language this.captions.currentTrackNode = track;
setLanguage: function setLanguage() {
var _this = this; // Prevent setting language in some cases, since it can violate user's intentions
if (setLanguage) {
this.captions.language = language;
}
// Handle Vimeo captions
if (this.isVimeo) {
this.embed.enableTextTrack(language);
}
// Trigger event
utils.dispatchEvent.call(this, this.media, 'languagechange');
}
// Setup HTML5 track rendering
if (this.isHTML5 && this.isVideo) { if (this.isHTML5 && this.isVideo) {
captions.getTracks.call(this).forEach(function (track) {
// Show track
utils.on(track, 'cuechange', function (event) {
return captions.setCue.call(_this, event);
});
// Turn off native caption rendering to avoid double captions
// eslint-disable-next-line
track.mode = 'hidden';
});
// Get current track
var currentTrack = captions.getCurrentTrack.call(this);
// Check if suported kind
if (utils.is.track(currentTrack)) {
// If we change the active track while a cue is already displayed we need to update it // If we change the active track while a cue is already displayed we need to update it
if (Array.from(currentTrack.activeCues || []).length) { captions.updateCues.call(this);
captions.setCue.call(this, currentTrack);
} }
// Show captions
if (show) {
this.toggleCaptions(true);
} }
} else if (this.isVimeo && this.captions.active) { },
this.embed.enableTextTrack(this.language); setLanguage: function setLanguage(language) {
var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (!utils.is.string(language)) {
this.debug.warn('Invalid language argument', language);
return;
} }
// Normalize
this.captions.language = language.toLowerCase();
// Set currentTrack
var tracks = captions.getTracks.call(this);
var track = captions.getCurrentTrack.call(this, true);
captions.set.call(this, tracks.indexOf(track), false, show);
}, },
// Get the tracks // Get current valid caption tracks
// If update is false it will also ignore tracks without metadata
// This is used to "freeze" the language options when captions.update is false
getTracks: function getTracks() { getTracks: function getTracks() {
// Return empty array at least var _this2 = this;
if (utils.is.nullOrUndefined(this.media)) {
return [];
}
// Only get accepted kinds var update = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return Array.from(this.media.textTracks || []).filter(function (track) {
// Handle media or textTracks missing or null
var tracks = Array.from((this.media || {}).textTracks || []);
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
return tracks.filter(function (track) {
return !_this2.isHTML5 || update || _this2.captions.meta.has(track);
}).filter(function (track) {
return ['captions', 'subtitles'].includes(track.kind); return ['captions', 'subtitles'].includes(track.kind);
}); });
}, },
@ -3402,32 +3498,20 @@ var captions = {
// Get the current track for the current language // Get the current track for the current language
getCurrentTrack: function getCurrentTrack() { getCurrentTrack: function getCurrentTrack() {
var _this2 = this; var _this3 = this;
var fromLanguage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var tracks = captions.getTracks.call(this); var tracks = captions.getTracks.call(this);
var sortIsDefault = function sortIsDefault(track) {
if (!tracks.length) { return Number((_this3.captions.meta.get(track) || {}).default);
return null; };
} var sorted = Array.from(tracks).sort(function (a, b) {
return sortIsDefault(b) - sortIsDefault(a);
// Get track based on current language
var track = tracks.find(function (track) {
return track.language.toLowerCase() === _this2.language;
}); });
return !fromLanguage && tracks[this.currentTrack] || sorted.find(function (track) {
// Get the <track> with default attribute return track.language === _this3.captions.language;
if (!track) { }) || sorted[0];
track = utils.getElement.call(this, 'track[default]');
}
// Get the first track
if (!track) {
var _tracks = slicedToArray(tracks, 1);
track = _tracks[0];
}
return track;
}, },
@ -3455,58 +3539,50 @@ var captions = {
}, },
// Display active caption if it contains text // Update captions using current track's active cues
setCue: function setCue(input) { // Also optional array argument in case there isn't any track (ex: vimeo)
// Get the track from the event if needed updateCues: function updateCues(input) {
var track = utils.is.event(input) ? input.target : input;
var activeCues = track.activeCues;
var active = activeCues.length && activeCues[0];
var currentTrack = captions.getCurrentTrack.call(this);
// Only display current track
if (track !== currentTrack) {
return;
}
// Display a cue, if there is one
if (utils.is.cue(active)) {
captions.setText.call(this, active.getCueAsHTML());
} else {
captions.setText.call(this, null);
}
utils.dispatchEvent.call(this, this.media, 'cuechange');
},
// Set the current caption
setText: function setText(input) {
// Requires UI // Requires UI
if (!this.supported.ui) { if (!this.supported.ui) {
return; return;
} }
if (utils.is.element(this.elements.captions)) { if (!utils.is.element(this.elements.captions)) {
var content = utils.createElement('span'); this.debug.warn('No captions element to render to');
return;
}
// Empty the container // Only accept array or empty input
utils.emptyElement(this.elements.captions); if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
this.debug.warn('updateCues: Invalid input', input);
return;
}
// Default to empty var cues = input;
var caption = !utils.is.nullOrUndefined(input) ? input : '';
// Set the span content // Get cues from track
if (utils.is.string(caption)) { if (!cues) {
content.innerText = caption.trim(); var track = captions.getCurrentTrack.call(this);
} else { cues = Array.from((track || {}).activeCues || []).map(function (cue) {
content.appendChild(caption); return cue.getCueAsHTML();
}).map(utils.getHTML);
} }
// Set new caption text // Set new caption text
this.elements.captions.appendChild(content); var content = cues.map(function (cueText) {
} else { return cueText.trim();
this.debug.warn('No captions element to render to'); }).join('\n');
var changed = content !== this.elements.captions.innerHTML;
if (changed) {
// Empty the container and create a new child element
utils.emptyElement(this.elements.captions);
var caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
caption.innerHTML = content;
this.elements.captions.appendChild(caption);
// Trigger event
utils.dispatchEvent.call(this, this.media, 'cuechange');
} }
} }
}; };
@ -3613,7 +3689,7 @@ var defaults$1 = {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -3816,6 +3892,7 @@ var defaults$1 = {
}, },
progress: '.plyr__progress', progress: '.plyr__progress',
captions: '.plyr__captions', captions: '.plyr__captions',
caption: '.plyr__caption',
menu: { menu: {
quality: '.js-plyr__menu__list--quality' quality: '.js-plyr__menu__list--quality'
} }
@ -4796,9 +4873,11 @@ var Listeners = function () {
// Proxy events to container // Proxy events to container
// Bubble up key events for Edge // Bubble up key events for Edge
utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) { utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) {
var detail = {}; var _event$detail = event.detail,
detail = _event$detail === undefined ? {} : _event$detail;
// Get error details from media // Get error details from media
if (event.type === 'error') { if (event.type === 'error') {
detail = _this3.player.media.error; detail = _this3.player.media.error;
} }
@ -4897,7 +4976,7 @@ var Listeners = function () {
// Settings menu items - use event delegation as items are added/removed // Settings menu items - use event delegation as items are added/removed
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) { if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
proxy(event, function () { proxy(event, function () {
_this4.player.language = event.target.value; _this4.player.currentTrack = Number(event.target.value);
showHomeTab(); showHomeTab();
}, 'language'); }, 'language');
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) { } else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
@ -5092,6 +5171,9 @@ var Listeners = function () {
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) { function assurePlaybackState(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -5244,24 +5326,25 @@ var vimeo = {
paused = player.paused, paused = player.paused,
volume = player.volume; volume = player.volume;
// Set seeking state and trigger event var restorePause = paused && !embed.hasPlayed;
// Set seeking state and trigger event
media.seeking = true; media.seeking = true;
utils.dispatchEvent.call(player, media, 'seeking'); utils.dispatchEvent.call(player, media, 'seeking');
// If paused, mute until seek is complete // If paused, mute until seek is complete
Promise.resolve(paused && embed.setVolume(0)) Promise.resolve(restorePause && embed.setVolume(0))
// Seek // Seek
.then(function () { .then(function () {
return embed.setCurrentTime(time); return embed.setCurrentTime(time);
}) })
// Restore paused // Restore paused
.then(function () { .then(function () {
return paused && embed.pause(); return restorePause && embed.pause();
}) })
// Restore volume // Restore volume
.then(function () { .then(function () {
return paused && embed.setVolume(volume); return restorePause && embed.setVolume(volume);
}).catch(function () { }).catch(function () {
// Do nothing // Do nothing
}); });
@ -5391,17 +5474,25 @@ var vimeo = {
captions.setup.call(player); captions.setup.call(player);
}); });
player.embed.on('cuechange', function (data) { player.embed.on('cuechange', function (_ref) {
var cue = null; var _ref$cues = _ref.cues,
cues = _ref$cues === undefined ? [] : _ref$cues;
if (data.cues.length) { var strippedCues = cues.map(function (cue) {
cue = utils.stripHTML(data.cues[0].text); return utils.stripHTML(cue.text);
} });
captions.updateCues.call(player, strippedCues);
captions.setText.call(player, cue);
}); });
player.embed.on('loaded', function () { player.embed.on('loaded', function () {
// Assure state and events are updated on autoplay
player.embed.getPaused().then(function (paused) {
assurePlaybackState.call(player, !paused);
if (!paused) {
utils.dispatchEvent.call(player, player.media, 'playing');
}
});
if (utils.is.element(player.embed.element) && player.supported.ui) { if (utils.is.element(player.embed.element) && player.supported.ui) {
var frame = player.embed.element; var frame = player.embed.element;
@ -5531,6 +5622,9 @@ function mapQualityUnits(levels) {
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState$1(play) { function assurePlaybackState$1(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -5944,7 +6038,7 @@ var youtube = {
case 1: case 1:
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet) // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
if (player.media.paused) { if (player.media.paused && !player.embed.hasPlayed) {
player.media.pause(); player.media.pause();
} else { } else {
assurePlaybackState$1.call(player, true); assurePlaybackState$1.call(player, true);
@ -6935,7 +7029,8 @@ var Plyr = function () {
// Captions // Captions
this.captions = { this.captions = {
active: null, active: null,
currentTrack: null currentTrack: -1,
meta: new WeakMap()
}; };
// Fullscreen // Fullscreen
@ -6946,8 +7041,7 @@ var Plyr = function () {
// Options // Options
this.options = { this.options = {
speed: [], speed: [],
quality: [], quality: []
captions: []
}; };
// Debugging // Debugging
@ -7320,8 +7414,8 @@ var Plyr = function () {
} }
/** /**
* Set the captions language * Set the caption track by index
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc) * @param {number} - Caption index
*/ */
}, { }, {
@ -8012,60 +8106,41 @@ var Plyr = function () {
return Boolean(this.config.autoplay); return Boolean(this.config.autoplay);
} }
}, { }, {
key: 'language', key: 'currentTrack',
set: function set$$1(input) { set: function set$$1(input) {
// Nothing specified captions.set.call(this, input);
if (!utils.is.string(input)) {
return;
}
// If empty string is passed, assume disable captions
if (utils.is.empty(input)) {
this.toggleCaptions(false);
return;
}
// Normalize
var language = input.toLowerCase();
// Check for support
if (!this.options.captions.includes(language)) {
this.debug.warn('Unsupported language option: ' + language);
return;
}
// Ensure captions are enabled
this.toggleCaptions(true);
// Enabled only
if (language === 'enabled') {
return;
}
// If nothing to change, bail
if (this.language === language) {
return;
}
// Update config
this.captions.language = language;
// Clear caption
captions.setText.call(this, null);
// Update captions
captions.setLanguage.call(this);
// Trigger an event
utils.dispatchEvent.call(this, this.media, 'languagechange');
} }
/** /**
* Get the current captions language * Get the current caption track index (-1 if disabled)
*/ */
, ,
get: function get$$1() { get: function get$$1() {
return this.captions.language; var _captions = this.captions,
active = _captions.active,
currentTrack = _captions.currentTrack;
return active ? currentTrack : -1;
}
/**
* Set the wanted language for captions
* Since tracks can be added later it won't update the actual caption track until there is a matching track
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
*/
}, {
key: 'language',
set: function set$$1(input) {
captions.setLanguage.call(this, input);
}
/**
* Get the current track's language
*/
,
get: function get$$1() {
return (captions.getCurrentTrack.call(this) || {}).language;
} }
/** /**
@ -8141,9 +8216,7 @@ var Plyr = function () {
} else if (utils.is.nodeList(selector)) { } else if (utils.is.nodeList(selector)) {
targets = Array.from(selector); targets = Array.from(selector);
} else if (utils.is.array(selector)) { } else if (utils.is.array(selector)) {
targets = selector.filter(function (i) { targets = selector.filter(utils.is.element);
return utils.is.element(i);
});
} }
if (utils.is.empty(targets)) { if (utils.is.empty(targets)) {

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

577
dist/plyr.polyfilled.js vendored
View File

@ -5876,61 +5876,63 @@ var utils = {
// Check variable types // Check variable types
is: { is: {
object: function object(input) { object: function object(input) {
return this.getConstructor(input) === Object; return utils.getConstructor(input) === Object;
}, },
number: function number(input) { number: function number(input) {
return this.getConstructor(input) === Number && !Number.isNaN(input); return utils.getConstructor(input) === Number && !Number.isNaN(input);
}, },
string: function string(input) { string: function string(input) {
return this.getConstructor(input) === String; return utils.getConstructor(input) === String;
}, },
boolean: function boolean(input) { boolean: function boolean(input) {
return this.getConstructor(input) === Boolean; return utils.getConstructor(input) === Boolean;
}, },
function: function _function(input) { function: function _function(input) {
return this.getConstructor(input) === Function; return utils.getConstructor(input) === Function;
}, },
array: function array(input) { array: function array(input) {
return !this.nullOrUndefined(input) && Array.isArray(input); return !utils.is.nullOrUndefined(input) && Array.isArray(input);
}, },
weakMap: function weakMap(input) { weakMap: function weakMap(input) {
return this.instanceof(input, WeakMap); return utils.is.instanceof(input, WeakMap);
}, },
nodeList: function nodeList(input) { nodeList: function nodeList(input) {
return this.instanceof(input, NodeList); return utils.is.instanceof(input, NodeList);
}, },
element: function element(input) { element: function element(input) {
return this.instanceof(input, Element); return utils.is.instanceof(input, Element);
}, },
textNode: function textNode(input) { textNode: function textNode(input) {
return this.getConstructor(input) === Text; return utils.getConstructor(input) === Text;
}, },
event: function event(input) { event: function event(input) {
return this.instanceof(input, Event); return utils.is.instanceof(input, Event);
}, },
cue: function cue(input) { cue: function cue(input) {
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
}, },
track: function track(input) { track: function track(input) {
return this.instanceof(input, TextTrack) || !this.nullOrUndefined(input) && this.string(input.kind); return utils.is.instanceof(input, TextTrack) || !utils.is.nullOrUndefined(input) && utils.is.string(input.kind);
}, },
url: function url(input) { url: function url(input) {
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input); return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
}, },
nullOrUndefined: function nullOrUndefined(input) { nullOrUndefined: function nullOrUndefined(input) {
return input === null || typeof input === 'undefined'; return input === null || typeof input === 'undefined';
}, },
empty: function empty(input) { empty: function empty(input) {
return this.nullOrUndefined(input) || (this.string(input) || this.array(input) || this.nodeList(input)) && !input.length || this.object(input) && !Object.keys(input).length; return utils.is.nullOrUndefined(input) || (utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length || utils.is.object(input) && !Object.keys(input).length;
}, },
instanceof: function _instanceof$$1(input, constructor) { instanceof: function _instanceof$$1(input, constructor) {
return Boolean(input && constructor && input instanceof constructor); return Boolean(input && constructor && input instanceof constructor);
},
getConstructor: function getConstructor(input) {
return !this.nullOrUndefined(input) ? input.constructor : null;
} }
}, },
getConstructor: function getConstructor(input) {
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
},
// Unfortunately, due to mixed support, UA sniffing is required // Unfortunately, due to mixed support, UA sniffing is required
getBrowser: function getBrowser() { getBrowser: function getBrowser() {
return { return {
@ -6525,7 +6527,7 @@ var utils = {
// Bail if the value isn't a number // Bail if the value isn't a number
if (!utils.is.number(time)) { if (!utils.is.number(time)) {
return this.formatTime(null, displayHours, inverted); return utils.formatTime(null, displayHours, inverted);
} }
// Format time component to add leading zero // Format time component to add leading zero
@ -6534,9 +6536,9 @@ var utils = {
}; };
// Breakdown to hours, mins, secs // Breakdown to hours, mins, secs
var hours = this.getHours(time); var hours = utils.getHours(time);
var mins = this.getMinutes(time); var mins = utils.getMinutes(time);
var secs = this.getSeconds(time); var secs = utils.getSeconds(time);
// Do we need to display hours? // Do we need to display hours?
if (displayHours || hours > 0) { if (displayHours || hours > 0) {
@ -6732,12 +6734,12 @@ var utils = {
// Parse URL if needed // Parse URL if needed
if (input.startsWith('http://') || input.startsWith('https://')) { if (input.startsWith('http://') || input.startsWith('https://')) {
var _parseUrl = this.parseUrl(input); var _utils$parseUrl = utils.parseUrl(input);
search = _parseUrl.search; search = _utils$parseUrl.search;
} }
if (this.is.empty(search)) { if (utils.is.empty(search)) {
return null; return null;
} }
@ -6776,6 +6778,14 @@ var utils = {
}, },
// Like outerHTML, but also works for DocumentFragment
getHTML: function getHTML(element) {
var wrapper = document.createElement('div');
wrapper.appendChild(element);
return wrapper.innerHTML;
},
// Get aspect ratio for dimensions // Get aspect ratio for dimensions
getAspectRatio: function getAspectRatio(width, height) { getAspectRatio: function getAspectRatio(width, height) {
var getRatio = function getRatio(w, h) { var getRatio = function getRatio(w, h) {
@ -7518,9 +7528,15 @@ var controls = {
// Create a settings menu item // Create a settings menu item
createMenuItem: function createMenuItem(value, list, type, title) { createMenuItem: function createMenuItem(_ref) {
var badge = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null; var value = _ref.value,
var checked = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false; list = _ref.list,
type = _ref.type,
title = _ref.title,
_ref$badge = _ref.badge,
badge = _ref$badge === undefined ? null : _ref$badge,
_ref$checked = _ref.checked,
checked = _ref$checked === undefined ? false : _ref$checked;
var item = utils.createElement('li'); var item = utils.createElement('li');
@ -7836,8 +7852,13 @@ var controls = {
var sorting = _this3.config.quality.options; var sorting = _this3.config.quality.options;
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
}).forEach(function (quality) { }).forEach(function (quality) {
var label = controls.getLabel.call(_this3, 'quality', quality); controls.createMenuItem.call(_this3, {
controls.createMenuItem.call(_this3, quality, list, type, label, getBadge(quality)); value: quality,
list: list,
type: type,
title: controls.getLabel.call(_this3, 'quality', quality),
badge: getBadge(quality)
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -7880,18 +7901,7 @@ var controls = {
switch (setting) { switch (setting) {
case 'captions': case 'captions':
if (this.captions.active) { value = this.currentTrack;
if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
return lang === 'enabled';
})) {
value = this.captions.language;
} else {
value = 'enabled';
}
} else {
value = '';
}
break; break;
default: default:
@ -7986,10 +7996,10 @@ var controls = {
// TODO: Captions or language? Currently it's mixed // TODO: Captions or language? Currently it's mixed
var type = 'captions'; var type = 'captions';
var list = this.elements.settings.panes.captions.querySelector('ul'); var list = this.elements.settings.panes.captions.querySelector('ul');
var tracks = captions.getTracks.call(this);
// Toggle the pane and tab // Toggle the pane and tab
var toggle = captions.getTracks.call(this).length; controls.toggleTab.call(this, type, tracks.length);
controls.toggleTab.call(this, type, toggle);
// Empty the menu // Empty the menu
utils.emptyElement(list); utils.emptyElement(list);
@ -7998,28 +8008,33 @@ var controls = {
controls.checkMenu.call(this); controls.checkMenu.call(this);
// If there's no captions, bail // If there's no captions, bail
if (!toggle) { if (!tracks.length) {
return; return;
} }
// Re-map the tracks into just the data we need // Generate options data
var tracks = captions.getTracks.call(this).map(function (track) { var options = tracks.map(function (track, value) {
return { return {
language: !utils.is.empty(track.language) ? track.language : 'enabled', value: value,
label: captions.getLabel.call(_this4, track) checked: _this4.captions.active && _this4.currentTrack === value,
title: captions.getLabel.call(_this4, track),
badge: track.language && controls.createBadge.call(_this4, track.language.toUpperCase()),
list: list,
type: 'language'
}; };
}); });
// Add the "Disabled" option to turn off captions // Add the "Disabled" option to turn off captions
tracks.unshift({ options.unshift({
language: '', value: -1,
label: i18n.get('disabled', this.config) checked: !this.captions.active,
title: i18n.get('disabled', this.config),
list: list,
type: 'language'
}); });
// Generate options // Generate options
tracks.forEach(function (track) { options.forEach(controls.createMenuItem.bind(this));
controls.createMenuItem.call(_this4, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this4, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this4.language);
});
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
}, },
@ -8073,8 +8088,12 @@ var controls = {
// Create items // Create items
this.options.speed.forEach(function (speed) { this.options.speed.forEach(function (speed) {
var label = controls.getLabel.call(_this5, 'speed', speed); controls.createMenuItem.call(_this5, {
controls.createMenuItem.call(_this5, speed, list, type, label); value: speed,
list: list,
type: type,
title: controls.getLabel.call(_this5, 'speed', speed)
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -8544,10 +8563,10 @@ var controls = {
var replace = function replace(input) { var replace = function replace(input) {
var result = input; var result = input;
Object.entries(props).forEach(function (_ref) { Object.entries(props).forEach(function (_ref2) {
var _ref2 = slicedToArray(_ref, 2), var _ref3 = slicedToArray(_ref2, 2),
key = _ref2[0], key = _ref3[0],
value = _ref2[1]; value = _ref3[1];
result = utils.replaceAll(result, '{' + key + '}', value); result = utils.replaceAll(result, '{' + key + '}', value);
}); });
@ -8664,29 +8683,8 @@ var captions = {
active = this.config.captions.active; active = this.config.captions.active;
} }
// Set toggled state // Get language from storage, fallback to config
this.toggleCaptions(active); var language = this.storage.get('language') || this.config.captions.language;
// Watch changes to textTracks and update captions menu
if (this.config.captions.update) {
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
}
// Update available languages in list next tick (the event must not be triggered before the listeners)
setTimeout(captions.update.bind(this), 0);
},
update: function update() {
// Update tracks
var tracks = captions.getTracks.call(this);
this.options.captions = tracks.map(function (_ref) {
var language = _ref.language;
return language;
});
// Set language if it hasn't been set already
if (!this.language) {
var language = this.config.captions.language;
if (language === 'auto') { if (language === 'auto') {
var _split = (navigator.language || navigator.userLanguage).split('-'); var _split = (navigator.language || navigator.userLanguage).split('-');
@ -8694,61 +8692,159 @@ var captions = {
language = _split2[0]; language = _split2[0];
} }
this.language = this.storage.get('language') || (language || '').toLowerCase(); // Set language and show if active
captions.setLanguage.call(this, language, active);
// Watch changes to textTracks and update captions menu
if (this.isHTML5) {
var trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
} }
// Toggle the class hooks // Update available languages in list next tick (the event must not be triggered before the listeners)
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); setTimeout(captions.update.bind(this), 0);
},
update: function update() {
var _this = this;
var tracks = captions.getTracks.call(this, true);
// Get the wanted language
var _captions = this.captions,
language = _captions.language,
meta = _captions.meta;
// Handle tracks (add event listener and "pseudo"-default)
if (this.isHTML5 && this.isVideo) {
tracks.filter(function (track) {
return !meta.get(track);
}).forEach(function (track) {
_this.debug.log('Track added', track);
// Attempt to store if the original dom element was "default"
meta.set(track, {
default: track.mode === 'showing'
});
// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';
// Add event listener for cue changes
utils.on(track, 'cuechange', function () {
return captions.updateCues.call(_this);
});
});
}
var trackRemoved = !tracks.find(function (track) {
return track === _this.captions.currentTrackNode;
});
var firstMatch = this.language !== language && tracks.find(function (track) {
return track.language === language;
});
// Update language if removed or first matching track added
if (trackRemoved || firstMatch) {
captions.setLanguage.call(this, language, this.config.captions.active);
}
// Enable or disable captions based on track length
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
// Update available languages in list // Update available languages in list
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
controls.setCaptionsMenu.call(this); controls.setCaptionsMenu.call(this);
} }
}, },
set: function set(index) {
var setLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var tracks = captions.getTracks.call(this);
// Disable captions if setting to -1
if (index === -1) {
this.toggleCaptions(false);
return;
}
if (!utils.is.number(index)) {
this.debug.warn('Invalid caption argument', index);
return;
}
if (!(index in tracks)) {
this.debug.warn('Track not found', index);
return;
}
if (this.captions.currentTrack !== index) {
this.captions.currentTrack = index;
var track = captions.getCurrentTrack.call(this);
var _ref = track || {},
language = _ref.language;
// Store reference to node for invalidation on remove
// Set the captions language this.captions.currentTrackNode = track;
setLanguage: function setLanguage() {
var _this = this; // Prevent setting language in some cases, since it can violate user's intentions
if (setLanguage) {
this.captions.language = language;
}
// Handle Vimeo captions
if (this.isVimeo) {
this.embed.enableTextTrack(language);
}
// Trigger event
utils.dispatchEvent.call(this, this.media, 'languagechange');
}
// Setup HTML5 track rendering
if (this.isHTML5 && this.isVideo) { if (this.isHTML5 && this.isVideo) {
captions.getTracks.call(this).forEach(function (track) {
// Show track
utils.on(track, 'cuechange', function (event) {
return captions.setCue.call(_this, event);
});
// Turn off native caption rendering to avoid double captions
// eslint-disable-next-line
track.mode = 'hidden';
});
// Get current track
var currentTrack = captions.getCurrentTrack.call(this);
// Check if suported kind
if (utils.is.track(currentTrack)) {
// If we change the active track while a cue is already displayed we need to update it // If we change the active track while a cue is already displayed we need to update it
if (Array.from(currentTrack.activeCues || []).length) { captions.updateCues.call(this);
captions.setCue.call(this, currentTrack);
} }
// Show captions
if (show) {
this.toggleCaptions(true);
} }
} else if (this.isVimeo && this.captions.active) { },
this.embed.enableTextTrack(this.language); setLanguage: function setLanguage(language) {
var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (!utils.is.string(language)) {
this.debug.warn('Invalid language argument', language);
return;
} }
// Normalize
this.captions.language = language.toLowerCase();
// Set currentTrack
var tracks = captions.getTracks.call(this);
var track = captions.getCurrentTrack.call(this, true);
captions.set.call(this, tracks.indexOf(track), false, show);
}, },
// Get the tracks // Get current valid caption tracks
// If update is false it will also ignore tracks without metadata
// This is used to "freeze" the language options when captions.update is false
getTracks: function getTracks() { getTracks: function getTracks() {
// Return empty array at least var _this2 = this;
if (utils.is.nullOrUndefined(this.media)) {
return [];
}
// Only get accepted kinds var update = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return Array.from(this.media.textTracks || []).filter(function (track) {
// Handle media or textTracks missing or null
var tracks = Array.from((this.media || {}).textTracks || []);
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
return tracks.filter(function (track) {
return !_this2.isHTML5 || update || _this2.captions.meta.has(track);
}).filter(function (track) {
return ['captions', 'subtitles'].includes(track.kind); return ['captions', 'subtitles'].includes(track.kind);
}); });
}, },
@ -8756,32 +8852,20 @@ var captions = {
// Get the current track for the current language // Get the current track for the current language
getCurrentTrack: function getCurrentTrack() { getCurrentTrack: function getCurrentTrack() {
var _this2 = this; var _this3 = this;
var fromLanguage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var tracks = captions.getTracks.call(this); var tracks = captions.getTracks.call(this);
var sortIsDefault = function sortIsDefault(track) {
if (!tracks.length) { return Number((_this3.captions.meta.get(track) || {}).default);
return null; };
} var sorted = Array.from(tracks).sort(function (a, b) {
return sortIsDefault(b) - sortIsDefault(a);
// Get track based on current language
var track = tracks.find(function (track) {
return track.language.toLowerCase() === _this2.language;
}); });
return !fromLanguage && tracks[this.currentTrack] || sorted.find(function (track) {
// Get the <track> with default attribute return track.language === _this3.captions.language;
if (!track) { }) || sorted[0];
track = utils.getElement.call(this, 'track[default]');
}
// Get the first track
if (!track) {
var _tracks = slicedToArray(tracks, 1);
track = _tracks[0];
}
return track;
}, },
@ -8809,58 +8893,50 @@ var captions = {
}, },
// Display active caption if it contains text // Update captions using current track's active cues
setCue: function setCue(input) { // Also optional array argument in case there isn't any track (ex: vimeo)
// Get the track from the event if needed updateCues: function updateCues(input) {
var track = utils.is.event(input) ? input.target : input;
var activeCues = track.activeCues;
var active = activeCues.length && activeCues[0];
var currentTrack = captions.getCurrentTrack.call(this);
// Only display current track
if (track !== currentTrack) {
return;
}
// Display a cue, if there is one
if (utils.is.cue(active)) {
captions.setText.call(this, active.getCueAsHTML());
} else {
captions.setText.call(this, null);
}
utils.dispatchEvent.call(this, this.media, 'cuechange');
},
// Set the current caption
setText: function setText(input) {
// Requires UI // Requires UI
if (!this.supported.ui) { if (!this.supported.ui) {
return; return;
} }
if (utils.is.element(this.elements.captions)) { if (!utils.is.element(this.elements.captions)) {
var content = utils.createElement('span'); this.debug.warn('No captions element to render to');
return;
}
// Empty the container // Only accept array or empty input
utils.emptyElement(this.elements.captions); if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
this.debug.warn('updateCues: Invalid input', input);
return;
}
// Default to empty var cues = input;
var caption = !utils.is.nullOrUndefined(input) ? input : '';
// Set the span content // Get cues from track
if (utils.is.string(caption)) { if (!cues) {
content.innerText = caption.trim(); var track = captions.getCurrentTrack.call(this);
} else { cues = Array.from((track || {}).activeCues || []).map(function (cue) {
content.appendChild(caption); return cue.getCueAsHTML();
}).map(utils.getHTML);
} }
// Set new caption text // Set new caption text
this.elements.captions.appendChild(content); var content = cues.map(function (cueText) {
} else { return cueText.trim();
this.debug.warn('No captions element to render to'); }).join('\n');
var changed = content !== this.elements.captions.innerHTML;
if (changed) {
// Empty the container and create a new child element
utils.emptyElement(this.elements.captions);
var caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
caption.innerHTML = content;
this.elements.captions.appendChild(caption);
// Trigger event
utils.dispatchEvent.call(this, this.media, 'cuechange');
} }
} }
}; };
@ -8967,7 +9043,7 @@ var defaults$1 = {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -9168,6 +9244,7 @@ var defaults$1 = {
}, },
progress: '.plyr__progress', progress: '.plyr__progress',
captions: '.plyr__captions', captions: '.plyr__captions',
caption: '.plyr__caption',
menu: { menu: {
quality: '.js-plyr__menu__list--quality' quality: '.js-plyr__menu__list--quality'
} }
@ -10151,9 +10228,11 @@ var Listeners = function () {
// Proxy events to container // Proxy events to container
// Bubble up key events for Edge // Bubble up key events for Edge
utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) { utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) {
var detail = {}; var _event$detail = event.detail,
detail = _event$detail === undefined ? {} : _event$detail;
// Get error details from media // Get error details from media
if (event.type === 'error') { if (event.type === 'error') {
detail = _this3.player.media.error; detail = _this3.player.media.error;
} }
@ -10252,7 +10331,7 @@ var Listeners = function () {
// Settings menu items - use event delegation as items are added/removed // Settings menu items - use event delegation as items are added/removed
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) { if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
proxy(event, function () { proxy(event, function () {
_this4.player.language = event.target.value; _this4.player.currentTrack = Number(event.target.value);
showHomeTab(); showHomeTab();
}, 'language'); }, 'language');
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) { } else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
@ -10447,6 +10526,9 @@ var Listeners = function () {
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) { function assurePlaybackState(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -10599,24 +10681,25 @@ var vimeo = {
paused = player.paused, paused = player.paused,
volume = player.volume; volume = player.volume;
// Set seeking state and trigger event var restorePause = paused && !embed.hasPlayed;
// Set seeking state and trigger event
media.seeking = true; media.seeking = true;
utils.dispatchEvent.call(player, media, 'seeking'); utils.dispatchEvent.call(player, media, 'seeking');
// If paused, mute until seek is complete // If paused, mute until seek is complete
Promise.resolve(paused && embed.setVolume(0)) Promise.resolve(restorePause && embed.setVolume(0))
// Seek // Seek
.then(function () { .then(function () {
return embed.setCurrentTime(time); return embed.setCurrentTime(time);
}) })
// Restore paused // Restore paused
.then(function () { .then(function () {
return paused && embed.pause(); return restorePause && embed.pause();
}) })
// Restore volume // Restore volume
.then(function () { .then(function () {
return paused && embed.setVolume(volume); return restorePause && embed.setVolume(volume);
}).catch(function () { }).catch(function () {
// Do nothing // Do nothing
}); });
@ -10746,17 +10829,25 @@ var vimeo = {
captions.setup.call(player); captions.setup.call(player);
}); });
player.embed.on('cuechange', function (data) { player.embed.on('cuechange', function (_ref) {
var cue = null; var _ref$cues = _ref.cues,
cues = _ref$cues === undefined ? [] : _ref$cues;
if (data.cues.length) { var strippedCues = cues.map(function (cue) {
cue = utils.stripHTML(data.cues[0].text); return utils.stripHTML(cue.text);
} });
captions.updateCues.call(player, strippedCues);
captions.setText.call(player, cue);
}); });
player.embed.on('loaded', function () { player.embed.on('loaded', function () {
// Assure state and events are updated on autoplay
player.embed.getPaused().then(function (paused) {
assurePlaybackState.call(player, !paused);
if (!paused) {
utils.dispatchEvent.call(player, player.media, 'playing');
}
});
if (utils.is.element(player.embed.element) && player.supported.ui) { if (utils.is.element(player.embed.element) && player.supported.ui) {
var frame = player.embed.element; var frame = player.embed.element;
@ -10886,6 +10977,9 @@ function mapQualityUnits(levels) {
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState$1(play) { function assurePlaybackState$1(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -11299,7 +11393,7 @@ var youtube = {
case 1: case 1:
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet) // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
if (player.media.paused) { if (player.media.paused && !player.embed.hasPlayed) {
player.media.pause(); player.media.pause();
} else { } else {
assurePlaybackState$1.call(player, true); assurePlaybackState$1.call(player, true);
@ -12290,7 +12384,8 @@ var Plyr = function () {
// Captions // Captions
this.captions = { this.captions = {
active: null, active: null,
currentTrack: null currentTrack: -1,
meta: new WeakMap()
}; };
// Fullscreen // Fullscreen
@ -12301,8 +12396,7 @@ var Plyr = function () {
// Options // Options
this.options = { this.options = {
speed: [], speed: [],
quality: [], quality: []
captions: []
}; };
// Debugging // Debugging
@ -12678,8 +12772,8 @@ var Plyr = function () {
} }
/** /**
* Set the captions language * Set the caption track by index
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc) * @param {number} - Caption index
*/ */
}, { }, {
@ -13370,60 +13464,41 @@ var Plyr = function () {
return Boolean(this.config.autoplay); return Boolean(this.config.autoplay);
} }
}, { }, {
key: 'language', key: 'currentTrack',
set: function set(input) { set: function set(input) {
// Nothing specified captions.set.call(this, input);
if (!utils.is.string(input)) {
return;
}
// If empty string is passed, assume disable captions
if (utils.is.empty(input)) {
this.toggleCaptions(false);
return;
}
// Normalize
var language = input.toLowerCase();
// Check for support
if (!this.options.captions.includes(language)) {
this.debug.warn('Unsupported language option: ' + language);
return;
}
// Ensure captions are enabled
this.toggleCaptions(true);
// Enabled only
if (language === 'enabled') {
return;
}
// If nothing to change, bail
if (this.language === language) {
return;
}
// Update config
this.captions.language = language;
// Clear caption
captions.setText.call(this, null);
// Update captions
captions.setLanguage.call(this);
// Trigger an event
utils.dispatchEvent.call(this, this.media, 'languagechange');
} }
/** /**
* Get the current captions language * Get the current caption track index (-1 if disabled)
*/ */
, ,
get: function get() { get: function get() {
return this.captions.language; var _captions = this.captions,
active = _captions.active,
currentTrack = _captions.currentTrack;
return active ? currentTrack : -1;
}
/**
* Set the wanted language for captions
* Since tracks can be added later it won't update the actual caption track until there is a matching track
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
*/
}, {
key: 'language',
set: function set(input) {
captions.setLanguage.call(this, input);
}
/**
* Get the current track's language
*/
,
get: function get() {
return (captions.getCurrentTrack.call(this) || {}).language;
} }
/** /**
@ -13499,9 +13574,7 @@ var Plyr = function () {
} else if (utils.is.nodeList(selector)) { } else if (utils.is.nodeList(selector)) {
targets = Array.from(selector); targets = Array.from(selector);
} else if (utils.is.array(selector)) { } else if (utils.is.array(selector)) {
targets = selector.filter(function (i) { targets = selector.filter(utils.is.element);
return utils.is.element(i);
});
} }
if (utils.is.empty(targets)) { if (utils.is.empty(targets)) {

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "3.3.10", "version": "3.3.11",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io", "homepage": "https://plyr.io",
"main": "./dist/plyr.js", "main": "./dist/plyr.js",
@ -74,7 +74,7 @@
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"custom-event-polyfill": "^0.3.0", "custom-event-polyfill": "^0.3.0",
"loadjs": "^3.5.4", "loadjs": "^3.5.4",
"raven-js": "^3.25.2", "raven-js": "^3.26.1",
"url-polyfill": "^1.0.13" "url-polyfill": "^1.0.13"
} }
} }

26
readme.md
View File

@ -51,6 +51,10 @@ Some awesome folks have made plugins for CMSs and Components for JavaScript fram
Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp). You can grab all of the source with [NPM](https://www.npmjs.com/package/plyr) using `npm install plyr`. Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp). You can grab all of the source with [NPM](https://www.npmjs.com/package/plyr) using `npm install plyr`.
### Try Plyr online
You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=zaBgBy), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
### HTML ### HTML
Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types. Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
@ -128,13 +132,13 @@ 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 seperately 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.3.10/plyr.js"></script> <script src="https://cdn.plyr.io/3.3.11/plyr.js"></script>
``` ```
...or... ...or...
```html ```html
<script src="https://cdn.plyr.io/3.3.10/plyr.polyfilled.js"></script> <script src="https://cdn.plyr.io/3.3.11/plyr.polyfilled.js"></script>
``` ```
### CSS ### CSS
@ -148,13 +152,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: If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.3.10/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/3.3.11/plyr.css">
``` ```
### SVG Sprite ### 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 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.3.10/plyr.svg`. reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.11/plyr.svg`.
## Ads ## Ads
@ -407,7 +411,8 @@ player.fullscreen.active; // false;
| `source` | ✓ | ✓ | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#source-setter) below for examples. | | `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. | | `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. | | `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. |
| `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. | | `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. |
| `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. | | `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. |
| `pip` | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. | | `pip` | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. |
@ -607,17 +612,6 @@ document then the shortcuts will work when any element has focus, apart from an
| `C` | Toggle captions | | `C` | Toggle captions |
| `L` | Toggle loop | | `L` | Toggle loop |
## Streaming
Because Plyr is an extension of the standard HTML5 video and audio elements, third party streaming plugins can be used with Plyr. Massive thanks to Matias
Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's a few examples:
* Using [hls.js](https://github.com/dailymotion/hls.js) - [Demo](http://codepen.io/sampotts/pen/JKEMqB)
* 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
Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).

248
src/js/captions.js
View File

@ -69,12 +69,18 @@ const captions = {
({ active } = this.config.captions); ({ active } = this.config.captions);
} }
// Set toggled state // Get language from storage, fallback to config
this.toggleCaptions(active); let language = this.storage.get('language') || this.config.captions.language;
if (language === 'auto') {
[ language ] = (navigator.language || navigator.userLanguage).split('-');
}
// Set language and show if active
captions.setLanguage.call(this, language, active);
// Watch changes to textTracks and update captions menu // Watch changes to textTracks and update captions menu
if (this.config.captions.update) { if (this.isHTML5) {
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this)); const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
} }
// Update available languages in list next tick (the event must not be triggered before the listeners) // Update available languages in list next tick (the event must not be triggered before the listeners)
@ -82,21 +88,39 @@ const captions = {
}, },
update() { update() {
// Update tracks const tracks = captions.getTracks.call(this, true);
const tracks = captions.getTracks.call(this); // Get the wanted language
this.options.captions = tracks.map(({ language }) => language); const { language, meta } = this.captions;
// Set language if it hasn't been set already // Handle tracks (add event listener and "pseudo"-default)
if (!this.language) { if (this.isHTML5 && this.isVideo) {
let { language } = this.config.captions; tracks
if (language === 'auto') { .filter(track => !meta.get(track))
[language] = (navigator.language || navigator.userLanguage).split('-'); .forEach(track => {
} this.debug.log('Track added', track);
this.language = this.storage.get('language') || (language || '').toLowerCase(); // Attempt to store if the original dom element was "default"
meta.set(track, {
default: track.mode === 'showing',
});
// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';
// Add event listener for cue changes
utils.on(track, 'cuechange', () => captions.updateCues.call(this));
});
} }
// Toggle the class hooks const trackRemoved = !tracks.find(track => track === this.captions.currentTrackNode);
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); const firstMatch = this.language !== language && tracks.find(track => track.language === language);
// Update language if removed or first matching track added
if (trackRemoved || firstMatch) {
captions.setLanguage.call(this, language, this.config.captions.active);
}
// Enable or disable captions based on track length
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
// Update available languages in list // Update available languages in list
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
@ -104,70 +128,94 @@ const captions = {
} }
}, },
// Set the captions language set(index, setLanguage = true, show = true) {
setLanguage() { const tracks = captions.getTracks.call(this);
// Setup HTML5 track rendering
// Disable captions if setting to -1
if (index === -1) {
this.toggleCaptions(false);
return;
}
if (!utils.is.number(index)) {
this.debug.warn('Invalid caption argument', index);
return;
}
if (!(index in tracks)) {
this.debug.warn('Track not found', index);
return;
}
if (this.captions.currentTrack !== index) {
this.captions.currentTrack = index;
const track = captions.getCurrentTrack.call(this);
const { language } = track || {};
// Store reference to node for invalidation on remove
this.captions.currentTrackNode = track;
// Prevent setting language in some cases, since it can violate user's intentions
if (setLanguage) {
this.captions.language = language;
}
// Handle Vimeo captions
if (this.isVimeo) {
this.embed.enableTextTrack(language);
}
// Trigger event
utils.dispatchEvent.call(this, this.media, 'languagechange');
}
if (this.isHTML5 && this.isVideo) { if (this.isHTML5 && this.isVideo) {
captions.getTracks.call(this).forEach(track => {
// Show track
utils.on(track, 'cuechange', event => captions.setCue.call(this, event));
// Turn off native caption rendering to avoid double captions
// eslint-disable-next-line
track.mode = 'hidden';
});
// Get current track
const currentTrack = captions.getCurrentTrack.call(this);
// Check if suported kind
if (utils.is.track(currentTrack)) {
// If we change the active track while a cue is already displayed we need to update it // If we change the active track while a cue is already displayed we need to update it
if (Array.from(currentTrack.activeCues || []).length) { captions.updateCues.call(this);
captions.setCue.call(this, currentTrack);
} }
}
} else if (this.isVimeo && this.captions.active) { // Show captions
this.embed.enableTextTrack(this.language); if (show) {
this.toggleCaptions(true);
} }
}, },
// Get the tracks setLanguage(language, show = true) {
getTracks() { if (!utils.is.string(language)) {
// Return empty array at least this.debug.warn('Invalid language argument', language);
if (utils.is.nullOrUndefined(this.media)) { return;
return [];
} }
// Normalize
this.captions.language = language.toLowerCase();
// Only get accepted kinds // Set currentTrack
return Array.from(this.media.textTracks || []).filter(track => [ const tracks = captions.getTracks.call(this);
const track = captions.getCurrentTrack.call(this, true);
captions.set.call(this, tracks.indexOf(track), false, show);
},
// Get current valid caption tracks
// If update is false it will also ignore tracks without metadata
// This is used to "freeze" the language options when captions.update is false
getTracks(update = false) {
// Handle media or textTracks missing or null
const tracks = Array.from((this.media || {}).textTracks || []);
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
return tracks
.filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
.filter(track => [
'captions', 'captions',
'subtitles', 'subtitles',
].includes(track.kind)); ].includes(track.kind));
}, },
// Get the current track for the current language // Get the current track for the current language
getCurrentTrack() { getCurrentTrack(fromLanguage = false) {
const tracks = captions.getTracks.call(this); const tracks = captions.getTracks.call(this);
const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
if (!tracks.length) { const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
return null; return (!fromLanguage && tracks[this.currentTrack]) || sorted.find(track => track.language === this.captions.language) || sorted[0];
}
// Get track based on current language
let track = tracks.find(track => track.language.toLowerCase() === this.language);
// Get the <track> with default attribute
if (!track) {
track = utils.getElement.call(this, 'track[default]');
}
// Get the first track
if (!track) {
[track] = tracks;
}
return track;
}, },
// Get UI label for track // Get UI label for track
@ -193,56 +241,48 @@ const captions = {
return i18n.get('disabled', this.config); return i18n.get('disabled', this.config);
}, },
// Display active caption if it contains text // Update captions using current track's active cues
setCue(input) { // Also optional array argument in case there isn't any track (ex: vimeo)
// Get the track from the event if needed updateCues(input) {
const track = utils.is.event(input) ? input.target : input;
const { activeCues } = track;
const active = activeCues.length && activeCues[0];
const currentTrack = captions.getCurrentTrack.call(this);
// Only display current track
if (track !== currentTrack) {
return;
}
// Display a cue, if there is one
if (utils.is.cue(active)) {
captions.setText.call(this, active.getCueAsHTML());
} else {
captions.setText.call(this, null);
}
utils.dispatchEvent.call(this, this.media, 'cuechange');
},
// Set the current caption
setText(input) {
// Requires UI // Requires UI
if (!this.supported.ui) { if (!this.supported.ui) {
return; return;
} }
if (utils.is.element(this.elements.captions)) { if (!utils.is.element(this.elements.captions)) {
const content = utils.createElement('span'); this.debug.warn('No captions element to render to');
return;
}
// Empty the container // Only accept array or empty input
utils.emptyElement(this.elements.captions); if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
this.debug.warn('updateCues: Invalid input', input);
return;
}
// Default to empty let cues = input;
const caption = !utils.is.nullOrUndefined(input) ? input : '';
// Set the span content // Get cues from track
if (utils.is.string(caption)) { if (!cues) {
content.innerText = caption.trim(); const track = captions.getCurrentTrack.call(this);
} else { cues = Array.from((track || {}).activeCues || [])
content.appendChild(caption); .map(cue => cue.getCueAsHTML())
.map(utils.getHTML);
} }
// Set new caption text // Set new caption text
this.elements.captions.appendChild(content); const content = cues.map(cueText => cueText.trim()).join('\n');
} else { const changed = content !== this.elements.captions.innerHTML;
this.debug.warn('No captions element to render to');
if (changed) {
// Empty the container and create a new child element
utils.emptyElement(this.elements.captions);
const caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
caption.innerHTML = content;
this.elements.captions.appendChild(caption);
// Trigger event
utils.dispatchEvent.call(this, this.media, 'cuechange');
} }
}, },
}; };

69
src/js/controls.js vendored
View File

@ -373,7 +373,7 @@ const controls = {
}, },
// Create a settings menu item // Create a settings menu item
createMenuItem(value, list, type, title, badge = null, checked = false) { createMenuItem({value, list, type, title, badge = null, checked = false}) {
const item = utils.createElement('li'); const item = utils.createElement('li');
const label = utils.createElement('label', { const label = utils.createElement('label', {
@ -704,8 +704,13 @@ const controls = {
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
}) })
.forEach(quality => { .forEach(quality => {
const label = controls.getLabel.call(this, 'quality', quality); controls.createMenuItem.call(this, {
controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality)); value: quality,
list,
type,
title: controls.getLabel.call(this, 'quality', quality),
badge: getBadge(quality),
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
@ -746,16 +751,7 @@ const controls = {
switch (setting) { switch (setting) {
case 'captions': case 'captions':
if (this.captions.active) { value = this.currentTrack;
if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) {
value = this.captions.language;
} else {
value = 'enabled';
}
} else {
value = '';
}
break; break;
default: default:
@ -855,10 +851,10 @@ const controls = {
// TODO: Captions or language? Currently it's mixed // TODO: Captions or language? Currently it's mixed
const type = 'captions'; const type = 'captions';
const list = this.elements.settings.panes.captions.querySelector('ul'); const list = this.elements.settings.panes.captions.querySelector('ul');
const tracks = captions.getTracks.call(this);
// Toggle the pane and tab // Toggle the pane and tab
const toggle = captions.getTracks.call(this).length; controls.toggleTab.call(this, type, tracks.length);
controls.toggleTab.call(this, type, toggle);
// Empty the menu // Empty the menu
utils.emptyElement(list); utils.emptyElement(list);
@ -867,34 +863,31 @@ const controls = {
controls.checkMenu.call(this); controls.checkMenu.call(this);
// If there's no captions, bail // If there's no captions, bail
if (!toggle) { if (!tracks.length) {
return; return;
} }
// Re-map the tracks into just the data we need // Generate options data
const tracks = captions.getTracks.call(this).map(track => ({ const options = tracks.map((track, value) => ({
language: !utils.is.empty(track.language) ? track.language : 'enabled', value,
label: captions.getLabel.call(this, track), checked: this.captions.active && this.currentTrack === value,
title: captions.getLabel.call(this, track),
badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
list,
type: 'language',
})); }));
// Add the "Disabled" option to turn off captions // Add the "Disabled" option to turn off captions
tracks.unshift({ options.unshift({
language: '', value: -1,
label: i18n.get('disabled', this.config), checked: !this.captions.active,
title: i18n.get('disabled', this.config),
list,
type: 'language',
}); });
// Generate options // Generate options
tracks.forEach(track => { options.forEach(controls.createMenuItem.bind(this));
controls.createMenuItem.call(
this,
track.language,
list,
'language',
track.label,
track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null,
track.language.toLowerCase() === this.language,
);
});
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);
}, },
@ -951,8 +944,12 @@ const controls = {
// Create items // Create items
this.options.speed.forEach(speed => { this.options.speed.forEach(speed => {
const label = controls.getLabel.call(this, 'speed', speed); controls.createMenuItem.call(this, {
controls.createMenuItem.call(this, speed, list, type, label); value: speed,
list,
type,
title: controls.getLabel.call(this, 'speed', speed),
});
}); });
controls.updateSetting.call(this, type, list); controls.updateSetting.call(this, type, list);

3
src/js/defaults.js
View File

@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -334,6 +334,7 @@ const defaults = {
}, },
progress: '.plyr__progress', progress: '.plyr__progress',
captions: '.plyr__captions', captions: '.plyr__captions',
caption: '.plyr__caption',
menu: { menu: {
quality: '.js-plyr__menu__list--quality', quality: '.js-plyr__menu__list--quality',
}, },

4
src/js/listeners.js
View File

@ -414,7 +414,7 @@ class Listeners {
'keyup', 'keyup',
'keydown', 'keydown',
]).join(' '), event => { ]).join(' '), event => {
let detail = {}; let {detail = {}} = event;
// Get error details from media // Get error details from media
if (event.type === 'error') { if (event.type === 'error') {
@ -523,7 +523,7 @@ class Listeners {
proxy( proxy(
event, event,
() => { () => {
this.player.language = event.target.value; this.player.currentTrack = Number(event.target.value);
showHomeTab(); showHomeTab();
}, },
'language', 'language',

29
src/js/plugins/vimeo.js
View File

@ -9,6 +9,9 @@ import utils from './../utils';
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) { function assurePlaybackState(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -153,19 +156,20 @@ const vimeo = {
// Get current paused state and volume etc // Get current paused state and volume etc
const { embed, media, paused, volume } = player; const { embed, media, paused, volume } = player;
const restorePause = paused && !embed.hasPlayed;
// Set seeking state and trigger event // Set seeking state and trigger event
media.seeking = true; media.seeking = true;
utils.dispatchEvent.call(player, media, 'seeking'); utils.dispatchEvent.call(player, media, 'seeking');
// If paused, mute until seek is complete // If paused, mute until seek is complete
Promise.resolve(paused && embed.setVolume(0)) Promise.resolve(restorePause && embed.setVolume(0))
// Seek // Seek
.then(() => embed.setCurrentTime(time)) .then(() => embed.setCurrentTime(time))
// Restore paused // Restore paused
.then(() => paused && embed.pause()) .then(() => restorePause && embed.pause())
// Restore volume // Restore volume
.then(() => paused && embed.setVolume(volume)) .then(() => restorePause && embed.setVolume(volume))
.catch(() => { .catch(() => {
// Do nothing // Do nothing
}); });
@ -301,17 +305,20 @@ const vimeo = {
captions.setup.call(player); captions.setup.call(player);
}); });
player.embed.on('cuechange', data => { player.embed.on('cuechange', ({ cues = [] }) => {
let cue = null; const strippedCues = cues.map(cue => utils.stripHTML(cue.text));
captions.updateCues.call(player, strippedCues);
if (data.cues.length) {
cue = utils.stripHTML(data.cues[0].text);
}
captions.setText.call(player, cue);
}); });
player.embed.on('loaded', () => { player.embed.on('loaded', () => {
// Assure state and events are updated on autoplay
player.embed.getPaused().then(paused => {
assurePlaybackState.call(player, !paused);
if (!paused) {
utils.dispatchEvent.call(player, player.media, 'playing');
}
});
if (utils.is.element(player.embed.element) && player.supported.ui) { if (utils.is.element(player.embed.element) && player.supported.ui) {
const frame = player.embed.element; const frame = player.embed.element;

5
src/js/plugins/youtube.js
View File

@ -66,6 +66,9 @@ function mapQualityUnits(levels) {
// Set playback state and trigger change (only on actual change) // Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) { function assurePlaybackState(play) {
if (play && !this.embed.hasPlayed) {
this.embed.hasPlayed = true;
}
if (this.media.paused === play) { if (this.media.paused === play) {
this.media.paused = !play; this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@ -469,7 +472,7 @@ const youtube = {
case 1: case 1:
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet) // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
if (player.media.paused) { if (player.media.paused && !player.embed.hasPlayed) {
player.media.pause(); player.media.pause();
} else { } else {
assurePlaybackState.call(player, true); assurePlaybackState.call(player, true);

80
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v3.3.10 // plyr.js v3.3.11
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -84,7 +84,8 @@ class Plyr {
// Captions // Captions
this.captions = { this.captions = {
active: null, active: null,
currentTrack: null, currentTrack: -1,
meta: new WeakMap(),
}; };
// Fullscreen // Fullscreen
@ -96,7 +97,6 @@ class Plyr {
this.options = { this.options = {
speed: [], speed: [],
quality: [], quality: [],
captions: [],
}; };
// Debugging // Debugging
@ -851,61 +851,35 @@ class Plyr {
} }
/** /**
* Set the captions language * Set the caption track by index
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc) * @param {number} - Caption index
*/ */
set language(input) { set currentTrack(input) {
// Nothing specified captions.set.call(this, input);
if (!utils.is.string(input)) {
return;
}
// If empty string is passed, assume disable captions
if (utils.is.empty(input)) {
this.toggleCaptions(false);
return;
}
// Normalize
const language = input.toLowerCase();
// Check for support
if (!this.options.captions.includes(language)) {
this.debug.warn(`Unsupported language option: ${language}`);
return;
}
// Ensure captions are enabled
this.toggleCaptions(true);
// Enabled only
if (language === 'enabled') {
return;
}
// If nothing to change, bail
if (this.language === language) {
return;
}
// Update config
this.captions.language = language;
// Clear caption
captions.setText.call(this, null);
// Update captions
captions.setLanguage.call(this);
// Trigger an event
utils.dispatchEvent.call(this, this.media, 'languagechange');
} }
/** /**
* Get the current captions language * Get the current caption track index (-1 if disabled)
*/
get currentTrack() {
const { active, currentTrack } = this.captions;
return active ? currentTrack : -1;
}
/**
* Set the wanted language for captions
* Since tracks can be added later it won't update the actual caption track until there is a matching track
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
*/
set language(input) {
captions.setLanguage.call(this, input);
}
/**
* Get the current track's language
*/ */
get language() { get language() {
return this.captions.language; return (captions.getCurrentTrack.call(this) || {}).language;
} }
/** /**
@ -1156,7 +1130,7 @@ class Plyr {
} else if (utils.is.nodeList(selector)) { } else if (utils.is.nodeList(selector)) {
targets = Array.from(selector); targets = Array.from(selector);
} else if (utils.is.array(selector)) { } else if (utils.is.array(selector)) {
targets = selector.filter(i => utils.is.element(i)); targets = selector.filter(utils.is.element);
} }
if (utils.is.empty(targets)) { if (utils.is.empty(targets)) {

2
src/js/plyr.polyfilled.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr Polyfilled Build // Plyr Polyfilled Build
// plyr.js v3.3.10 // plyr.js v3.3.11
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================

58
src/js/utils.js
View File

@ -11,63 +11,64 @@ const utils = {
// Check variable types // Check variable types
is: { is: {
object(input) { object(input) {
return this.getConstructor(input) === Object; return utils.getConstructor(input) === Object;
}, },
number(input) { number(input) {
return this.getConstructor(input) === Number && !Number.isNaN(input); return utils.getConstructor(input) === Number && !Number.isNaN(input);
}, },
string(input) { string(input) {
return this.getConstructor(input) === String; return utils.getConstructor(input) === String;
}, },
boolean(input) { boolean(input) {
return this.getConstructor(input) === Boolean; return utils.getConstructor(input) === Boolean;
}, },
function(input) { function(input) {
return this.getConstructor(input) === Function; return utils.getConstructor(input) === Function;
}, },
array(input) { array(input) {
return !this.nullOrUndefined(input) && Array.isArray(input); return !utils.is.nullOrUndefined(input) && Array.isArray(input);
}, },
weakMap(input) { weakMap(input) {
return this.instanceof(input, WeakMap); return utils.is.instanceof(input, WeakMap);
}, },
nodeList(input) { nodeList(input) {
return this.instanceof(input, NodeList); return utils.is.instanceof(input, NodeList);
}, },
element(input) { element(input) {
return this.instanceof(input, Element); return utils.is.instanceof(input, Element);
}, },
textNode(input) { textNode(input) {
return this.getConstructor(input) === Text; return utils.getConstructor(input) === Text;
}, },
event(input) { event(input) {
return this.instanceof(input, Event); return utils.is.instanceof(input, Event);
}, },
cue(input) { cue(input) {
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
}, },
track(input) { track(input) {
return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind)); return utils.is.instanceof(input, TextTrack) || (!utils.is.nullOrUndefined(input) && utils.is.string(input.kind));
}, },
url(input) { url(input) {
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input); return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
}, },
nullOrUndefined(input) { nullOrUndefined(input) {
return input === null || typeof input === 'undefined'; return input === null || typeof input === 'undefined';
}, },
empty(input) { empty(input) {
return ( return (
this.nullOrUndefined(input) || utils.is.nullOrUndefined(input) ||
((this.string(input) || this.array(input) || this.nodeList(input)) && !input.length) || ((utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length) ||
(this.object(input) && !Object.keys(input).length) (utils.is.object(input) && !Object.keys(input).length)
); );
}, },
instanceof(input, constructor) { instanceof(input, constructor) {
return Boolean(input && constructor && input instanceof constructor); return Boolean(input && constructor && input instanceof constructor);
}, },
getConstructor(input) {
return !this.nullOrUndefined(input) ? input.constructor : null;
}, },
getConstructor(input) {
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
}, },
// Unfortunately, due to mixed support, UA sniffing is required // Unfortunately, due to mixed support, UA sniffing is required
@ -603,16 +604,16 @@ const utils = {
formatTime(time = 0, displayHours = false, inverted = false) { formatTime(time = 0, displayHours = false, inverted = false) {
// Bail if the value isn't a number // Bail if the value isn't a number
if (!utils.is.number(time)) { if (!utils.is.number(time)) {
return this.formatTime(null, displayHours, inverted); return utils.formatTime(null, displayHours, inverted);
} }
// Format time component to add leading zero // Format time component to add leading zero
const format = value => `0${value}`.slice(-2); const format = value => `0${value}`.slice(-2);
// Breakdown to hours, mins, secs // Breakdown to hours, mins, secs
let hours = this.getHours(time); let hours = utils.getHours(time);
const mins = this.getMinutes(time); const mins = utils.getMinutes(time);
const secs = this.getSeconds(time); const secs = utils.getSeconds(time);
// Do we need to display hours? // Do we need to display hours?
if (displayHours || hours > 0) { if (displayHours || hours > 0) {
@ -770,10 +771,10 @@ const utils = {
// Parse URL if needed // Parse URL if needed
if (input.startsWith('http://') || input.startsWith('https://')) { if (input.startsWith('http://') || input.startsWith('https://')) {
({ search } = this.parseUrl(input)); ({ search } = utils.parseUrl(input));
} }
if (this.is.empty(search)) { if (utils.is.empty(search)) {
return null; return null;
} }
@ -809,6 +810,13 @@ const utils = {
return fragment.firstChild.innerText; return fragment.firstChild.innerText;
}, },
// Like outerHTML, but also works for DocumentFragment
getHTML(element) {
const wrapper = document.createElement('div');
wrapper.appendChild(element);
return wrapper.innerHTML;
},
// Get aspect ratio for dimensions // Get aspect ratio for dimensions
getAspectRatio(width, height) { getAspectRatio(width, height) {
const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));

2
src/sass/components/captions.scss
View File

@ -21,7 +21,7 @@
transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out;
width: 100%; width: 100%;
span { .plyr__caption {
background: $plyr-captions-bg; background: $plyr-captions-bg;
border-radius: 2px; border-radius: 2px;
box-decoration-break: clone; box-decoration-break: clone;

6
yarn.lock
View File

@ -4988,9 +4988,9 @@ randomatic@^1.1.3:
is-number "^3.0.0" is-number "^3.0.0"
kind-of "^4.0.0" kind-of "^4.0.0"
raven-js@^3.25.2: raven-js@^3.26.1:
version "3.25.2" version "3.26.1"
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.25.2.tgz#d3ad1c694f70855dda6f705204ee6ab76ba62884" resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.1.tgz#13f78804f2bed524a7283382e1bca7ab423950a3"
rc@^1.0.1, rc@^1.1.6: rc@^1.0.1, rc@^1.1.6:
version "1.2.6" version "1.2.6"