aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/plyr.js')
-rw-r--r--src/js/plyr.js4567
1 files changed, 890 insertions, 3677 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index afd1b997..e6df286c 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,3961 +1,1174 @@
-// ==========================================================================
+// ==========================================================================
// Plyr
-// plyr.js v2.0.18
+// plyr.js v3.0.0
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
-// Credits: http://paypal.github.io/accessible-html5-video-player/
-// ==========================================================================
-(function(root, factory) {
- 'use strict';
- /*global define,module*/
-
- if (typeof module === 'object' && typeof module.exports === 'object') {
- // Node, CommonJS-like
- module.exports = factory(root, document);
- } else if (typeof define === 'function' && define.amd) {
- // AMD
- define([], function() {
- return factory(root, document);
- });
- } else {
- // Browser globals (root is window)
- root.plyr = factory(root, document);
- }
-})(typeof window !== 'undefined' ? window : this, function(window, document) {
- 'use strict';
-
- // Globals
- var fullscreen,
- scroll = { x: 0, y: 0 },
- // Default config
- defaults = {
- enabled: true,
- debug: false,
- autoplay: false,
- loop: false,
- seekTime: 10,
- volume: 10,
- volumeMin: 0,
- volumeMax: 10,
- volumeStep: 1,
- duration: null,
- displayDuration: true,
- loadSprite: true,
- iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/2.0.18/plyr.svg',
- blankUrl: 'https://cdn.plyr.io/static/blank.mp4',
- clickToPlay: true,
- hideControls: true,
- showPosterOnEnd: false,
- disableContextMenu: true,
- keyboardShorcuts: {
- focused: true,
- global: false,
- },
- tooltips: {
- controls: false,
- seek: true,
- },
- selectors: {
- html5: 'video, audio',
- embed: '[data-type]',
- editable: 'input, textarea, select, [contenteditable]',
- container: '.plyr',
- controls: {
- container: null,
- wrapper: '.plyr__controls',
- },
- labels: '[data-plyr]',
- buttons: {
- seek: '[data-plyr="seek"]',
- play: '[data-plyr="play"]',
- pause: '[data-plyr="pause"]',
- restart: '[data-plyr="restart"]',
- rewind: '[data-plyr="rewind"]',
- forward: '[data-plyr="fast-forward"]',
- mute: '[data-plyr="mute"]',
- captions: '[data-plyr="captions"]',
- fullscreen: '[data-plyr="fullscreen"]',
- },
- volume: {
- input: '[data-plyr="volume"]',
- display: '.plyr__volume--display',
- },
- progress: {
- container: '.plyr__progress',
- buffer: '.plyr__progress--buffer',
- played: '.plyr__progress--played',
- },
- captions: '.plyr__captions',
- currentTime: '.plyr__time--current',
- duration: '.plyr__time--duration',
- },
- classes: {
- setup: 'plyr--setup',
- ready: 'plyr--ready',
- videoWrapper: 'plyr__video-wrapper',
- embedWrapper: 'plyr__video-embed',
- type: 'plyr--{0}',
- stopped: 'plyr--stopped',
- playing: 'plyr--playing',
- muted: 'plyr--muted',
- loading: 'plyr--loading',
- hover: 'plyr--hover',
- tooltip: 'plyr__tooltip',
- hidden: 'plyr__sr-only',
- hideControls: 'plyr--hide-controls',
- isIos: 'plyr--is-ios',
- isTouch: 'plyr--is-touch',
- captions: {
- enabled: 'plyr--captions-enabled',
- active: 'plyr--captions-active',
- },
- fullscreen: {
- enabled: 'plyr--fullscreen-enabled',
- fallback: 'plyr--fullscreen-fallback',
- active: 'plyr--fullscreen-active',
- },
- tabFocus: 'tab-focus',
- },
- captions: {
- defaultActive: false,
- },
- fullscreen: {
- enabled: true,
- fallback: true,
- allowAudio: false,
- },
- storage: {
- enabled: true,
- key: 'plyr',
- },
- controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
- i18n: {
- restart: 'Restart',
- rewind: 'Rewind {seektime} secs',
- play: 'Play',
- pause: 'Pause',
- forward: 'Forward {seektime} secs',
- played: 'played',
- buffered: 'buffered',
- currentTime: 'Current time',
- duration: 'Duration',
- volume: 'Volume',
- toggleMute: 'Toggle Mute',
- toggleCaptions: 'Toggle Captions',
- toggleFullscreen: 'Toggle Fullscreen',
- frameTitle: 'Player for {title}',
- },
- types: {
- embed: ['youtube', 'vimeo', 'soundcloud'],
- html5: ['video', 'audio'],
- },
- // URLs
- urls: {
- vimeo: {
- api: 'https://player.vimeo.com/api/player.js',
- },
- youtube: {
- api: 'https://www.youtube.com/iframe_api',
- },
- soundcloud: {
- api: 'https://w.soundcloud.com/player/api.js',
- },
- },
- // Custom control listeners
- listeners: {
- seek: null,
- play: null,
- pause: null,
- restart: null,
- rewind: null,
- forward: null,
- mute: null,
- volume: null,
- captions: null,
- fullscreen: null,
+import { providers, types } from './types';
+import defaults from './defaults';
+import support from './support';
+import utils from './utils';
+
+import Console from './console';
+import Storage from './storage';
+
+import captions from './captions';
+import controls from './controls';
+import fullscreen from './fullscreen';
+import listeners from './listeners';
+import media from './media';
+import source from './source';
+import ui from './ui';
+
+// Private properties
+// TODO: Use a WeakMap for private globals
+// const globals = new WeakMap();
+
+// Globals
+let scrollPosition = {
+ x: 0,
+ y: 0,
+};
+
+// Plyr instance
+class Plyr {
+ constructor(target, options) {
+ this.timers = {};
+
+ // State
+ this.ready = false;
+ this.loading = false;
+ this.failed = false;
+
+ // Set the media element
+ this.media = target;
+
+ // String selector passed
+ if (utils.is.string(this.media)) {
+ this.media = document.querySelectorAll(this.media);
+ }
+
+ // jQuery, NodeList or Array passed, use first element
+ if ((window.jQuery && this.media instanceof jQuery) || utils.is.nodeList(this.media) || utils.is.array(this.media)) {
+ // eslint-disable-next-line
+ this.media = this.media[0];
+ }
+
+ // Set config
+ this.config = utils.extend(
+ {},
+ defaults,
+ options,
+ (() => {
+ try {
+ return JSON.parse(this.media.getAttribute('data-plyr-config'));
+ } catch (e) {
+ return {};
+ }
+ })()
+ );
+
+ // Elements cache
+ this.elements = {
+ container: null,
+ buttons: {},
+ display: {},
+ progress: {},
+ inputs: {},
+ settings: {
+ menu: null,
+ panes: {},
+ tabs: {},
},
- // Events to watch on HTML5 media elements
- events: [
- 'ready',
- 'ended',
- 'progress',
- 'stalled',
- 'playing',
- 'waiting',
- 'canplay',
- 'canplaythrough',
- 'loadstart',
- 'loadeddata',
- 'loadedmetadata',
- 'timeupdate',
- 'volumechange',
- 'play',
- 'pause',
- 'error',
- 'seeking',
- 'seeked',
- 'emptied',
- ],
- // Logging
- logPrefix: '[Plyr]',
+ captions: null,
};
- // Credits: http://paypal.github.io/accessible-html5-video-player/
- // Unfortunately, due to mixed support, UA sniffing is required
- function _browserSniff() {
- var ua = navigator.userAgent,
- name = navigator.appName,
- fullVersion = '' + parseFloat(navigator.appVersion),
- majorVersion = parseInt(navigator.appVersion, 10),
- nameOffset,
- verOffset,
- ix,
- isIE = false,
- isFirefox = false,
- isChrome = false,
- isSafari = false;
-
- if (navigator.appVersion.indexOf('Windows NT') !== -1 && navigator.appVersion.indexOf('rv:11') !== -1) {
- // MSIE 11
- isIE = true;
- name = 'IE';
- fullVersion = '11';
- } else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
- // MSIE
- isIE = true;
- name = 'IE';
- fullVersion = ua.substring(verOffset + 5);
- } else if ((verOffset = ua.indexOf('Chrome')) !== -1) {
- // Chrome
- isChrome = true;
- name = 'Chrome';
- fullVersion = ua.substring(verOffset + 7);
- } else if ((verOffset = ua.indexOf('Safari')) !== -1) {
- // Safari
- isSafari = true;
- name = 'Safari';
- fullVersion = ua.substring(verOffset + 7);
- if ((verOffset = ua.indexOf('Version')) !== -1) {
- fullVersion = ua.substring(verOffset + 8);
- }
- } else if ((verOffset = ua.indexOf('Firefox')) !== -1) {
- // Firefox
- isFirefox = true;
- name = 'Firefox';
- fullVersion = ua.substring(verOffset + 8);
- } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
- // In most other browsers, 'name/version' is at the end of userAgent
- name = ua.substring(nameOffset, verOffset);
- fullVersion = ua.substring(verOffset + 1);
-
- if (name.toLowerCase() === name.toUpperCase()) {
- name = navigator.appName;
- }
- }
-
- // Trim the fullVersion string at semicolon/space if present
- if ((ix = fullVersion.indexOf(';')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
- if ((ix = fullVersion.indexOf(' ')) !== -1) {
- fullVersion = fullVersion.substring(0, ix);
- }
+ // Captions
+ this.captions = {
+ active: null,
+ currentTrack: null,
+ };
- // Get major version
- majorVersion = parseInt('' + fullVersion, 10);
- if (isNaN(majorVersion)) {
- fullVersion = '' + parseFloat(navigator.appVersion);
- majorVersion = parseInt(navigator.appVersion, 10);
- }
+ // Fullscreen
+ this.fullscreen = {
+ active: false,
+ };
- // Return data
- return {
- name: name,
- version: majorVersion,
- isIE: isIE,
- isFirefox: isFirefox,
- isChrome: isChrome,
- isSafari: isSafari,
- isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
- isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
- isTouch: 'ontouchstart' in document.documentElement,
+ // Options
+ this.options = {
+ speed: [],
+ quality: [],
};
- }
- // Check for mime type support against a player instance
- // Credits: http://diveintohtml5.info/everything.html
- // Related: http://www.leanbackplyr.com/test/h5mt.html
- function _supportMime(plyr, mimeType) {
- var media = plyr.media;
-
- if (plyr.type === 'video') {
- // Check type
- switch (mimeType) {
- case 'video/webm':
- return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
- case 'video/mp4':
- return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
- case 'video/ogg':
- return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
- }
- } else if (plyr.type === 'audio') {
- // Check type
- switch (mimeType) {
- case 'audio/mpeg':
- return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, ''));
- case 'audio/ogg':
- return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
- case 'audio/wav':
- return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
- }
- }
+ // Debugging
+ // TODO: move to globals
+ this.debug = new Console(this);
- // If we got this far, we're stuffed
- return false;
- }
+ // Log config options and support
+ this.debug.log('Config', this.config);
+ this.debug.log('Support', support);
- // Inject a script
- function _injectScript(source) {
- if (document.querySelectorAll('script[src="' + source + '"]').length) {
+ // We need an element to setup
+ if (utils.is.nullOrUndefined(this.media) || !utils.is.element(this.media)) {
+ this.debug.error('Setup failed: no suitable element passed');
return;
}
- var tag = document.createElement('script');
- tag.src = source;
- var firstScriptTag = document.getElementsByTagName('script')[0];
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- }
-
- // Element exists in an array
- function _inArray(haystack, needle) {
- return Array.prototype.indexOf && haystack.indexOf(needle) !== -1;
- }
-
- // Replace all
- function _replaceAll(string, find, replace) {
- return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
- }
-
- // Wrap an element
- function _wrap(elements, wrapper) {
- // Convert `elements` to an array, if necessary.
- if (!elements.length) {
- elements = [elements];
+ // Bail if the element is initialized
+ if (this.media.plyr) {
+ this.debug.warn('Target already setup');
+ return;
}
- // Loops backwards to prevent having to clone the wrapper on the
- // first element (see `child` below).
- for (var i = elements.length - 1; i >= 0; i--) {
- var child = i > 0 ? wrapper.cloneNode(true) : wrapper;
- var element = elements[i];
-
- // Cache the current parent and sibling.
- var parent = element.parentNode;
- var sibling = element.nextSibling;
-
- // Wrap the element (is automatically removed from its current
- // parent).
- child.appendChild(element);
-
- // If the element had a sibling, insert the wrapper before
- // the sibling to maintain the HTML structure; otherwise, just
- // append it to the parent.
- if (sibling) {
- parent.insertBefore(child, sibling);
- } else {
- parent.appendChild(child);
- }
-
- return child;
+ // Bail if not enabled
+ if (!this.config.enabled) {
+ this.debug.error('Setup failed: disabled by config');
+ return;
}
- }
-
- // Unwrap an element
- // http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/
- /*function _unwrap(wrapper) {
- // Get the element's parent node
- var parent = wrapper.parentNode;
- // Move all children out of the element
- while (wrapper.firstChild) {
- parent.insertBefore(wrapper.firstChild, wrapper);
+ // Bail if disabled or no basic support
+ // You may want to disable certain UAs etc
+ if (!support.check().api) {
+ this.debug.error('Setup failed: no support');
+ return;
}
- // Remove the empty element
- parent.removeChild(wrapper);
- }*/
+ // Cache original element state for .destroy()
+ this.elements.original = this.media.cloneNode(true);
- // Remove an element
- function _remove(element) {
- if (!element) {
- return;
- }
- element.parentNode.removeChild(element);
- }
+ // Set media type based on tag or data attribute
+ // Supported: video, audio, vimeo, youtube
+ const type = this.media.tagName.toLowerCase();
- // Prepend child
- function _prependChild(parent, element) {
- parent.insertBefore(element, parent.firstChild);
- }
+ // Embed attributes
+ const attributes = {
+ provider: 'data-plyr-provider',
+ id: 'data-plyr-embed-id',
+ };
- // Set attributes
- function _setAttributes(element, attributes) {
- for (var key in attributes) {
- element.setAttribute(key, _is.boolean(attributes[key]) && attributes[key] ? '' : attributes[key]);
- }
- }
+ // Different setup based on type
+ switch (type) {
+ // TODO: Handle passing an iframe for true progressive enhancement
+ // case 'iframe':
+ case 'div':
+ this.type = types.video; // Audio will come later for external providers
+ this.provider = this.media.getAttribute(attributes.provider);
+ this.embedId = this.media.getAttribute(attributes.id);
+
+ if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
+ this.debug.error('Setup failed: Invalid provider');
+ return;
+ }
- // Insert a HTML element
- function _insertElement(type, parent, attributes) {
- // Create a new <element>
- var element = document.createElement(type);
+ // Try and get the embed id
+ if (utils.is.empty(this.embedId)) {
+ this.debug.error('Setup failed: Embed ID or URL missing');
+ return;
+ }
- // Set all passed attributes
- _setAttributes(element, attributes);
+ // Clean up
+ this.media.removeAttribute(attributes.provider);
+ this.media.removeAttribute(attributes.id);
- // Inject the new element
- _prependChild(parent, element);
- }
+ break;
- // Get a classname from selector
- function _getClassname(selector) {
- return selector.replace('.', '');
- }
+ case 'video':
+ case 'audio':
+ this.type = type;
+ this.provider = providers.html5;
- // Toggle class on an element
- function _toggleClass(element, className, state) {
- if (element) {
- if (element.classList) {
- element.classList[state ? 'add' : 'remove'](className);
- } else {
- var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
- element.className = name + (state ? ' ' + className : '');
- }
- }
- }
+ if (this.media.hasAttribute('crossorigin')) {
+ this.config.crossorigin = true;
+ }
- // Has class name
- function _hasClass(element, className) {
- if (element) {
- if (element.classList) {
- return element.classList.contains(className);
- } else {
- return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
- }
- }
- return false;
- }
+ if (this.media.hasAttribute('autoplay')) {
+ this.config.autoplay = true;
+ }
- // Element matches selector
- function _matches(element, selector) {
- var p = Element.prototype;
+ if (this.media.hasAttribute('playsinline')) {
+ this.config.inline = true;
+ }
- var f =
- p.matches ||
- p.webkitMatchesSelector ||
- p.mozMatchesSelector ||
- p.msMatchesSelector ||
- function(s) {
- return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
- };
+ if (this.media.hasAttribute('muted')) {
+ this.config.muted = true;
+ }
- return f.call(element, selector);
- }
+ if (this.media.hasAttribute('loop')) {
+ this.config.loop.active = true;
+ }
+
+ break;
- // Bind along with custom handler
- function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
- if (userListener) {
- // Register this before defaultListener
- _on(
- element,
- eventName,
- function(event) {
- userListener.apply(element, [event]);
- },
- useCapture
- );
+ default:
+ this.debug.error('Setup failed: unsupported type');
+ return;
}
- _on(
- element,
- eventName,
- function(event) {
- defaultListener.apply(element, [event]);
- },
- useCapture
- );
- }
- // Toggle event listener
- function _toggleListener(element, events, callback, toggle, useCapture) {
- var eventList = events.split(' ');
+ // Setup local storage for user settings
+ this.storage = new Storage(this);
- // Whether the listener is a capturing listener or not
- // Default to false
- if (!_is.boolean(useCapture)) {
- useCapture = false;
- }
+ // Check for support again but with type
+ this.supported = support.check(this.type, this.provider, this.config.inline);
- // If a nodelist is passed, call itself on each node
- if (element instanceof NodeList) {
- for (var x = 0; x < element.length; x++) {
- if (element[x] instanceof Node) {
- _toggleListener(element[x], arguments[1], arguments[2], arguments[3]);
- }
- }
+ // If no support for even API, bail
+ if (!this.supported.api) {
+ this.debug.error('Setup failed: no support');
return;
}
- // If a single node is passed, bind the event listener
- for (var i = 0; i < eventList.length; i++) {
- element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
- }
- }
+ // Store reference
+ this.media.plyr = this;
- // Bind event
- function _on(element, events, callback, useCapture) {
- if (element) {
- _toggleListener(element, events, callback, true, useCapture);
- }
- }
-
- // Unbind event
- function _off(element, events, callback, useCapture) {
- if (element) {
- _toggleListener(element, events, callback, false, useCapture);
- }
- }
+ // Wrap media
+ this.elements.container = utils.createElement('div');
+ utils.wrap(this.media, this.elements.container);
- // Trigger event
- function _event(element, type, bubbles, properties) {
- // Bail if no element
- if (!element || !type) {
- return;
- }
+ // Allow focus to be captured
+ this.elements.container.setAttribute('tabindex', 0);
- // Default bubbles to false
- if (!_is.boolean(bubbles)) {
- bubbles = false;
- }
+ // Global listeners
+ listeners.global.call(this);
- // Create and dispatch the event
- var event = new CustomEvent(type, {
- bubbles: bubbles,
- detail: properties,
- });
+ // Add style hook
+ ui.addStyleHook.call(this);
- // Dispatch the event
- element.dispatchEvent(event);
- }
+ // Setup media
+ media.setup.call(this);
- // Toggle aria-pressed state on a toggle button
- // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
- function _toggleState(target, state) {
- // Bail if no target
- if (!target) {
- return;
+ // Listen for events if debugging
+ if (this.config.debug) {
+ utils.on(this.elements.container, this.config.events.join(' '), event => {
+ this.debug.log(`event: ${event.type}`);
+ });
}
- // Get state
- state = _is.boolean(state) ? state : !target.getAttribute('aria-pressed');
+ // Setup interface
+ // If embed but not fully supported, build interface now to avoid flash of controls
+ if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
+ ui.build.call(this);
+ }
+ }
- // Set the attribute on target
- target.setAttribute('aria-pressed', state);
+ // ---------------------------------------
+ // API
+ // ---------------------------------------
- return state;
+ /**
+ * Types and provider helpers
+ */
+ get isHTML5() {
+ return this.provider === providers.html5;
}
-
- // Get percentage
- function _getPercentage(current, max) {
- if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
- return 0;
- }
- return (current / max * 100).toFixed(2);
+ get isEmbed() {
+ return this.isYouTube || this.isVimeo;
+ }
+ get isYouTube() {
+ return this.provider === providers.youtube;
+ }
+ get isVimeo() {
+ return this.provider === providers.vimeo;
+ }
+ get isVideo() {
+ return this.type === types.video;
+ }
+ get isAudio() {
+ return this.type === types.audio;
}
- // Deep extend/merge destination object with N more objects
- // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
- // Removed call to arguments.callee (used explicit function name instead)
- function _extend() {
- // Get arguments
- var objects = arguments;
+ /**
+ * Play the media
+ */
+ play() {
+ return this.media.play();
+ }
- // Bail if nothing to merge
- if (!objects.length) {
+ /**
+ * Pause the media
+ */
+ pause() {
+ if (!this.playing) {
return;
}
- // Return first if specified but nothing to merge
- if (objects.length === 1) {
- return objects[0];
- }
-
- // First object is the destination
- var destination = Array.prototype.shift.call(objects),
- length = objects.length;
-
- // Loop through all objects to merge
- for (var i = 0; i < length; i++) {
- var source = objects[i];
-
- for (var property in source) {
- if (source[property] && source[property].constructor && source[property].constructor === Object) {
- destination[property] = destination[property] || {};
- _extend(destination[property], source[property]);
- } else {
- destination[property] = source[property];
- }
- }
- }
+ this.media.pause();
+ }
- return destination;
+ /**
+ * Get paused state
+ */
+ get paused() {
+ return this.media.paused;
}
- // Check variable types
- var _is = {
- object: function(input) {
- return input !== null && typeof input === 'object';
- },
- array: function(input) {
- return input !== null && (typeof input === 'object' && input.constructor === Array);
- },
- number: function(input) {
- return input !== null && ((typeof input === 'number' && !isNaN(input - 0)) || (typeof input === 'object' && input.constructor === Number));
- },
- string: function(input) {
- return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
- },
- boolean: function(input) {
- return input !== null && typeof input === 'boolean';
- },
- nodeList: function(input) {
- return input !== null && input instanceof NodeList;
- },
- htmlElement: function(input) {
- return input !== null && input instanceof HTMLElement;
- },
- function: function(input) {
- return input !== null && typeof input === 'function';
- },
- undefined: function(input) {
- return input !== null && typeof input === 'undefined';
- },
- };
-
- // Parse YouTube ID from url
- function _parseYouTubeId(url) {
- var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
- return url.match(regex) ? RegExp.$2 : url;
+ /**
+ * Get playing state
+ */
+ get playing() {
+ return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
}
- // Parse Vimeo ID from url
- function _parseVimeoId(url) {
- var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
- return url.match(regex) ? RegExp.$2 : url;
+ /**
+ * Get ended state
+ */
+ get ended() {
+ return this.media.ended;
}
- // Fullscreen API
- function _fullscreen() {
- var fullscreen = {
- supportsFullScreen: false,
- isFullScreen: function() {
- return false;
- },
- requestFullScreen: function() {},
- cancelFullScreen: function() {},
- fullScreenEventName: '',
- element: null,
- prefix: '',
- },
- browserPrefixes = 'webkit o moz ms khtml'.split(' ');
+ /**
+ * Toggle playback based on current status
+ * @param {boolean} input
+ */
+ togglePlay(input) {
+ // Toggle based on current state if nothing passed
+ const toggle = utils.is.boolean(input) ? input : !this.playing;
- // Check for native support
- if (!_is.undefined(document.cancelFullScreen)) {
- fullscreen.supportsFullScreen = true;
+ if (toggle) {
+ this.play();
} else {
- // Check for fullscreen support by vendor prefix
- for (var i = 0, il = browserPrefixes.length; i < il; i++) {
- fullscreen.prefix = browserPrefixes[i];
-
- if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) {
- fullscreen.supportsFullScreen = true;
- break;
- } else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
- // Special case for MS (when isn't it?)
- fullscreen.prefix = 'ms';
- fullscreen.supportsFullScreen = true;
- break;
- }
- }
- }
-
- // Update methods to do something useful
- if (fullscreen.supportsFullScreen) {
- // Yet again Microsoft awesomeness,
- // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes
- fullscreen.fullScreenEventName = fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange';
-
- fullscreen.isFullScreen = function(element) {
- if (_is.undefined(element)) {
- element = document.body;
- }
- switch (this.prefix) {
- case '':
- return document.fullscreenElement === element;
- case 'moz':
- return document.mozFullScreenElement === element;
- default:
- return document[this.prefix + 'FullscreenElement'] === element;
- }
- };
- fullscreen.requestFullScreen = function(element) {
- if (_is.undefined(element)) {
- element = document.body;
- }
- return this.prefix === ''
- ? element.requestFullScreen()
- : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
- };
- fullscreen.cancelFullScreen = function() {
- return this.prefix === ''
- ? document.cancelFullScreen()
- : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
- };
- fullscreen.element = function() {
- return this.prefix === '' ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
- };
+ this.pause();
}
+ }
- return fullscreen;
+ /**
+ * Stop playback
+ */
+ stop() {
+ this.restart();
+ this.pause();
}
- // Local storage
- var _storage = {
- supported: (function() {
- // Try to use it (it might be disabled, e.g. user is in private/porn mode)
- // see: https://github.com/sampotts/plyr/issues/131
- try {
- // Add test item
- window.localStorage.setItem('___test', 'OK');
+ /**
+ * Restart playback
+ */
+ restart() {
+ this.currentTime = 0;
+ }
- // Get the test item
- var result = window.localStorage.getItem('___test');
+ /**
+ * Rewind
+ * @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
+ */
+ rewind(seekTime) {
+ this.currentTime = this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
+ }
- // Clean up
- window.localStorage.removeItem('___test');
+ /**
+ * Fast forward
+ * @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
+ */
+ forward(seekTime) {
+ this.currentTime = this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
+ }
- // Check if value matches
- return result === 'OK';
- } catch (e) {
- return false;
- }
+ /**
+ * Seek to a time
+ * @param {number} input - where to seek to in seconds. Defaults to 0 (the start)
+ */
+ set currentTime(input) {
+ let targetTime = 0;
- return false;
- })(),
- };
-
- // Player instance
- function Plyr(media, config) {
- var plyr = this,
- timers = {},
- api;
-
- // Set media
- plyr.media = media;
- var original = media.cloneNode(true);
-
- // Trigger events, with plyr instance passed
- function _triggerEvent(element, type, bubbles, properties) {
- _event(
- element,
- type,
- bubbles,
- _extend({}, properties, {
- plyr: api,
- })
- );
+ if (utils.is.number(input)) {
+ targetTime = input;
}
- // Debugging
- function _console(type, args) {
- if (config.debug && window.console) {
- args = Array.prototype.slice.call(args);
-
- if (_is.string(config.logPrefix) && config.logPrefix.length) {
- args.unshift(config.logPrefix);
- }
-
- console[type].apply(console, args);
- }
- }
- var _log = function() {
- _console('log', arguments);
- },
- _warn = function() {
- _console('warn', arguments);
- };
-
- // Log config options
- _log('Config', config);
-
- // Get icon URL
- function _getIconUrl() {
- return {
- url: config.iconUrl,
- // If you're using svg4everybody you don't need absolute paths
- absolute: config.iconUrl.indexOf('http') === 0 || (plyr.browser.isIE && !window.svg4everybody),
- };
+ // Normalise targetTime
+ if (targetTime < 0) {
+ targetTime = 0;
+ } else if (targetTime > this.duration) {
+ targetTime = this.duration;
}
- // Build the default HTML
- function _buildControls() {
- // Create html array
- var html = [],
- iconUrl = _getIconUrl(),
- iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
-
- // Larger overlaid play button
- if (_inArray(config.controls, 'play-large')) {
- html.push(
- '<button type="button" data-plyr="play" class="plyr__play-large">',
- '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
- '</button>'
- );
- }
+ // Set
+ this.media.currentTime = targetTime.toFixed(4);
- html.push('<div class="plyr__controls">');
-
- // Restart button
- if (_inArray(config.controls, 'restart')) {
- html.push(
- '<button type="button" data-plyr="restart">',
- '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
- '</button>'
- );
- }
-
- // Rewind button
- if (_inArray(config.controls, 'rewind')) {
- html.push(
- '<button type="button" data-plyr="rewind">',
- '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
- '</button>'
- );
- }
-
- // Play Pause button
- // TODO: This should be a toggle button really?
- if (_inArray(config.controls, 'play')) {
- html.push(
- '<button type="button" data-plyr="play">',
- '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
- '</button>',
- '<button type="button" data-plyr="pause">',
- '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
- '</button>'
- );
- }
-
- // Fast forward button
- if (_inArray(config.controls, 'fast-forward')) {
- html.push(
- '<button type="button" data-plyr="fast-forward">',
- '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
- '</button>'
- );
- }
-
- // Progress
- if (_inArray(config.controls, 'progress')) {
- // Create progress
- html.push(
- '<span class="plyr__progress">',
- '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
- '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
- '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
- '<progress class="plyr__progress--buffer" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.buffered,
- '</progress>'
- );
-
- // Seek tooltip
- if (config.tooltips.seek) {
- html.push('<span class="plyr__tooltip">00:00</span>');
- }
-
- // Close
- html.push('</span>');
- }
-
- // Media current time display
- if (_inArray(config.controls, 'current-time')) {
- html.push(
- '<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
- '<span class="plyr__time--current">00:00</span>',
- '</span>'
- );
- }
+ // Logging
+ this.debug.log(`Seeking to ${this.currentTime} seconds`);
+ }
- // Media duration display
- if (_inArray(config.controls, 'duration')) {
- html.push(
- '<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
- '<span class="plyr__time--duration">00:00</span>',
- '</span>'
- );
- }
+ /**
+ * Get current time
+ */
+ get currentTime() {
+ return Number(this.media.currentTime);
+ }
- // Toggle mute button
- if (_inArray(config.controls, 'mute')) {
- html.push(
- '<button type="button" data-plyr="mute">',
- '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
- '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
- '</button>'
- );
- }
+ /**
+ * Get seeking status
+ */
+ get seeking() {
+ return this.media.seeking;
+ }
- // Volume range control
- if (_inArray(config.controls, 'volume')) {
- html.push(
- '<span class="plyr__volume">',
- '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
- '<input id="volume{id}" class="plyr__volume--input" type="range" min="' +
- config.volumeMin +
- '" max="' +
- config.volumeMax +
- '" value="' +
- config.volume +
- '" data-plyr="volume">',
- '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
- '</span>'
- );
- }
+ /**
+ * Get the duration of the current media
+ */
+ get duration() {
+ // Faux duration set via config
+ const fauxDuration = parseInt(this.config.duration, 10);
- // Toggle captions button
- if (_inArray(config.controls, 'captions')) {
- html.push(
- '<button type="button" data-plyr="captions">',
- '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
- '<svg><use xlink:href="' + iconPath + '-captions-off" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
- '</button>'
- );
- }
+ // True duration
+ const realDuration = Number(this.media.duration);
- // Toggle fullscreen button
- if (_inArray(config.controls, 'fullscreen')) {
- html.push(
- '<button type="button" data-plyr="fullscreen">',
- '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
- '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
- '</button>'
- );
- }
+ // If custom duration is funky, use regular duration
+ return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
+ }
- // Close everything
- html.push('</div>');
+ /**
+ * Set the player volume
+ * @param {number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
+ */
+ set volume(value) {
+ let volume = value;
+ const max = 1;
+ const min = 0;
- return html.join('');
+ if (utils.is.string(volume)) {
+ volume = Number(volume);
}
- // Setup fullscreen
- function _setupFullscreen() {
- if (!plyr.supported.full) {
- return;
- }
-
- if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
- // Check for native support
- var nativeSupport = fullscreen.supportsFullScreen;
-
- if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
- _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
-
- // Add styling hook
- if (!nativeSupport) {
- _toggleClass(plyr.container, config.classes.fullscreen.fallback, true);
- }
-
- // Add styling hook
- _toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
- } else {
- _log('Fullscreen not supported and fallback disabled');
- }
-
- // Toggle state
- if (plyr.buttons && plyr.buttons.fullscreen) {
- _toggleState(plyr.buttons.fullscreen, false);
- }
-
- // Setup focus trap
- _focusTrap();
- }
+ // Load volume from storage if no value specified
+ if (!utils.is.number(volume)) {
+ volume = this.storage.get('volume');
}
- // Setup captions
- function _setupCaptions() {
- // Bail if not HTML5 video
- if (plyr.type !== 'video') {
- return;
- }
-
- // Inject the container
- if (!_getElement(config.selectors.captions)) {
- plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>');
- }
-
- // Determine if HTML5 textTracks is supported
- plyr.usingTextTracks = false;
- if (plyr.media.textTracks) {
- plyr.usingTextTracks = true;
- }
-
- // Get URL of caption file if exists
- var captionSrc = '',
- kind,
- children = plyr.media.childNodes;
-
- for (var i = 0; i < children.length; i++) {
- if (children[i].nodeName.toLowerCase() === 'track') {
- kind = children[i].kind;
- if (kind === 'captions' || kind === 'subtitles') {
- captionSrc = children[i].getAttribute('src');
- }
- }
- }
-
- // Record if caption file exists or not
- plyr.captionExists = true;
- if (captionSrc === '') {
- plyr.captionExists = false;
- _log('No caption track found');
- } else {
- _log('Caption track found; URI: ' + captionSrc);
- }
-
- // If no caption file exists, hide container for caption text
- if (!plyr.captionExists) {
- _toggleClass(plyr.container, config.classes.captions.enabled);
- } else {
- // Turn off native caption rendering to avoid double captions
- // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
- var tracks = plyr.media.textTracks;
- for (var x = 0; x < tracks.length; x++) {
- tracks[x].mode = 'hidden';
- }
-
- // Enable UI
- _showCaptions(plyr);
-
- // Disable unsupported browsers than report false positive
- // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144
- if ((plyr.browser.isIE && plyr.browser.version >= 10) || (plyr.browser.isFirefox && plyr.browser.version >= 31)) {
- // Debugging
- _log('Detected browser with known TextTrack issues - using manual fallback');
-
- // Set to false so skips to 'manual' captioning
- plyr.usingTextTracks = false;
- }
-
- // Rendering caption tracks
- // Native support required - http://caniuse.com/webvtt
- if (plyr.usingTextTracks) {
- _log('TextTracks supported');
-
- for (var y = 0; y < tracks.length; y++) {
- var track = tracks[y];
-
- if (track.kind === 'captions' || track.kind === 'subtitles') {
- _on(track, 'cuechange', function() {
- // Display a cue, if there is one
- if (this.activeCues[0] && 'text' in this.activeCues[0]) {
- _setCaption(this.activeCues[0].getCueAsHTML());
- } else {
- _setCaption();
- }
- });
- }
- }
- } else {
- // Caption tracks not natively supported
- _log('TextTracks not supported so rendering captions manually');
-
- // Render captions from array at appropriate time
- plyr.currentCaption = '';
- plyr.captions = [];
-
- if (captionSrc !== '') {
- // Create XMLHttpRequest Object
- var xhr = new XMLHttpRequest();
-
- xhr.onreadystatechange = function() {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- var captions = [],
- caption,
- req = xhr.responseText;
-
- //According to webvtt spec, line terminator consists of one of the following
- // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
- var lineSeparator = '\r\n';
- if (req.indexOf(lineSeparator + lineSeparator) === -1) {
- if (req.indexOf('\r\r') !== -1) {
- lineSeparator = '\r';
- } else {
- lineSeparator = '\n';
- }
- }
-
- captions = req.split(lineSeparator + lineSeparator);
-
- for (var r = 0; r < captions.length; r++) {
- caption = captions[r];
- plyr.captions[r] = [];
-
- // Get the parts of the captions
- var parts = caption.split(lineSeparator),
- index = 0;
-
- // Incase caption numbers are added
- if (parts[index].indexOf(':') === -1) {
- index = 1;
- }
-
- plyr.captions[r] = [parts[index], parts[index + 1]];
- }
-
- // Remove first element ('VTT')
- plyr.captions.shift();
-
- _log('Successfully loaded the caption file via AJAX');
- } else {
- _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX');
- }
- }
- };
-
- xhr.open('get', captionSrc, true);
-
- xhr.send();
- }
- }
- }
+ // Use config if all else fails
+ if (!utils.is.number(volume)) {
+ ({ volume } = this.config);
}
- // Set the current caption
- function _setCaption(caption) {
- /* jshint unused:false */
- var container = _getElement(config.selectors.captions),
- content = document.createElement('span');
-
- // Empty the container
- container.innerHTML = '';
-
- // Default to empty
- if (_is.undefined(caption)) {
- caption = '';
- }
-
- // Set the span content
- if (_is.string(caption)) {
- content.innerHTML = caption.trim();
- } else {
- content.appendChild(caption);
- }
-
- // Set new caption text
- container.appendChild(content);
-
- // Force redraw (for Safari)
- var redraw = container.offsetHeight;
+ // Maximum is volumeMax
+ if (volume > max) {
+ volume = max;
}
-
- // Captions functions
- // Seek the manual caption time and update UI
- function _seekManualCaptions(time) {
- // Utilities for caption time codes
- function _timecodeCommon(tc, pos) {
- var tcpair = [];
- tcpair = tc.split(' --> ');
- for (var i = 0; i < tcpair.length; i++) {
- // WebVTT allows for extra meta data after the timestamp line
- // So get rid of this if it exists
- tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, '$1');
- }
- return _subTcSecs(tcpair[pos]);
- }
- function _timecodeMin(tc) {
- return _timecodeCommon(tc, 0);
- }
- function _timecodeMax(tc) {
- return _timecodeCommon(tc, 1);
- }
- function _subTcSecs(tc) {
- if (tc === null || tc === undefined) {
- return 0;
- } else {
- var tc1 = [],
- tc2 = [],
- seconds;
- tc1 = tc.split(',');
- tc2 = tc1[0].split(':');
- seconds = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]);
- return seconds;
- }
- }
-
- // If it's not video, or we're using textTracks, bail.
- if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) {
- return;
- }
-
- // Reset subcount
- plyr.subcount = 0;
-
- // Check time is a number, if not use currentTime
- // IE has a bug where currentTime doesn't go to 0
- // https://twitter.com/Sam_Potts/status/573715746506731521
- time = _is.number(time) ? time : plyr.media.currentTime;
-
- // If there's no subs available, bail
- if (!plyr.captions[plyr.subcount]) {
- return;
- }
-
- while (_timecodeMax(plyr.captions[plyr.subcount][0]) < time.toFixed(1)) {
- plyr.subcount++;
- if (plyr.subcount > plyr.captions.length - 1) {
- plyr.subcount = plyr.captions.length - 1;
- break;
- }
- }
-
- // Check if the next caption is in the current time range
- if (
- plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
- plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])
- ) {
- plyr.currentCaption = plyr.captions[plyr.subcount][1];
-
- // Render the caption
- _setCaption(plyr.currentCaption);
- } else {
- _setCaption();
- }
+ // Minimum is volumeMin
+ if (volume < min) {
+ volume = min;
}
- // Display captions container and button (for initialization)
- function _showCaptions() {
- // If there's no caption toggle, bail
- if (!plyr.buttons.captions) {
- return;
- }
-
- _toggleClass(plyr.container, config.classes.captions.enabled, true);
+ // Update config
+ this.config.volume = volume;
- // Try to load the value from storage
- var active = plyr.storage.captionsEnabled;
+ // Set the player volume
+ this.media.volume = volume;
- // Otherwise fall back to the default config
- if (!_is.boolean(active)) {
- active = config.captions.defaultActive;
- }
-
- if (active) {
- _toggleClass(plyr.container, config.classes.captions.active, true);
- _toggleState(plyr.buttons.captions, true);
- }
+ // If muted, and we're increasing volume, reset muted state
+ if (this.muted && volume > 0) {
+ this.muted = false;
}
+ }
- // Find all elements
- function _getElements(selector) {
- return plyr.container.querySelectorAll(selector);
- }
+ /**
+ * Get the current player volume
+ */
+ get volume() {
+ return this.media.volume;
+ }
- // Find a single element
- function _getElement(selector) {
- return _getElements(selector)[0];
- }
+ /**
+ * Increase volume
+ * @param {boolean} step - How much to decrease by (between 0 and 1)
+ */
+ increaseVolume(step) {
+ const volume = this.media.muted ? 0 : this.volume;
+ this.volume = volume + (utils.is.number(step) ? step : 1);
+ }
- // Determine if we're in an iframe
- function _inFrame() {
- try {
- return window.self !== window.top;
- } catch (e) {
- return true;
- }
- }
+ /**
+ * Decrease volume
+ * @param {boolean} step - How much to decrease by (between 0 and 1)
+ */
+ decreaseVolume(step) {
+ const volume = this.media.muted ? 0 : this.volume;
+ this.volume = volume - (utils.is.number(step) ? step : 1);
+ }
- // Trap focus inside container
- function _focusTrap() {
- var tabbables = _getElements('input:not([disabled]), button:not([disabled])'),
- first = tabbables[0],
- last = tabbables[tabbables.length - 1];
-
- function _checkFocus(event) {
- // If it is TAB
- if (event.which === 9 && plyr.isFullscreen) {
- if (event.target === last && !event.shiftKey) {
- // Move focus to first element that can be tabbed if Shift isn't used
- event.preventDefault();
- first.focus();
- } else if (event.target === first && event.shiftKey) {
- // Move focus to last element that can be tabbed if Shift is used
- event.preventDefault();
- last.focus();
- }
- }
- }
+ /**
+ * Set muted state
+ * @param {boolean} mute
+ */
+ set muted(mute) {
+ let toggle = mute;
- // Bind the handler
- _on(plyr.container, 'keydown', _checkFocus);
+ // Load muted state from storage
+ if (!utils.is.boolean(toggle)) {
+ toggle = this.storage.get('muted');
}
- // Add elements to HTML5 media (source, tracks, etc)
- function _insertChildElements(type, attributes) {
- if (_is.string(attributes)) {
- _insertElement(type, plyr.media, { src: attributes });
- } else if (attributes.constructor === Array) {
- for (var i = attributes.length - 1; i >= 0; i--) {
- _insertElement(type, plyr.media, attributes[i]);
- }
- }
+ // Use config if all else fails
+ if (!utils.is.boolean(toggle)) {
+ toggle = this.config.muted;
}
- // Insert controls
- function _injectControls() {
- // Sprite
- if (config.loadSprite) {
- var iconUrl = _getIconUrl();
-
- // Only load external sprite using AJAX
- if (iconUrl.absolute) {
- _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
- loadSprite(iconUrl.url, 'sprite-plyr');
- } else {
- _log('Sprite will be used as external resource directly');
- }
- }
-
- // Make a copy of the html
- var html = config.html;
-
- // Insert custom video controls
- _log('Injecting custom controls');
-
- // If no controls are specified, create default
- if (!html) {
- html = _buildControls();
- }
-
- // Replace seek time instances
- html = _replaceAll(html, '{seektime}', config.seekTime);
+ // Update config
+ this.config.muted = toggle;
- // Replace all id references with random numbers
- html = _replaceAll(html, '{id}', Math.floor(Math.random() * 10000));
-
- // Replace Title, if it exists
- if (config.title) {
- html = _replaceAll(html, '{title}', config.title);
- }
-
- // Controls container
- var target;
-
- // Inject to custom location
- if (_is.string(config.selectors.controls.container)) {
- target = document.querySelector(config.selectors.controls.container);
- }
-
- // Inject into the container by default
- if (!_is.htmlElement(target)) {
- target = plyr.container;
- }
-
- // Inject controls HTML
- target.insertAdjacentHTML('beforeend', html);
-
- // Setup tooltips
- if (config.tooltips.controls) {
- var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
+ // Set mute on the player
+ this.media.muted = toggle;
+ }
- for (var i = labels.length - 1; i >= 0; i--) {
- var label = labels[i];
+ /**
+ * Get current muted state
+ */
+ get muted() {
+ return this.media.muted;
+ }
- _toggleClass(label, config.classes.hidden, false);
- _toggleClass(label, config.classes.tooltip, true);
- }
- }
+ /**
+ * Check if the media has audio
+ */
+ get hasAudio() {
+ // Assume yes for all non HTML5 (as we can't tell...)
+ if (!this.isHTML5) {
+ return true;
}
- // Find the UI controls and store references
- function _findElements() {
- try {
- plyr.controls = _getElement(config.selectors.controls.wrapper);
-
- // Buttons
- plyr.buttons = {};
- plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
- plyr.buttons.play = _getElements(config.selectors.buttons.play);
- plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
- plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
- plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
- plyr.buttons.forward = _getElement(config.selectors.buttons.forward);
- plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
-
- // Inputs
- plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
- plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
-
- // Progress
- plyr.progress = {};
- plyr.progress.container = _getElement(config.selectors.progress.container);
-
- // Progress - Buffering
- plyr.progress.buffer = {};
- plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer);
- plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
-
- // Progress - Played
- plyr.progress.played = _getElement(config.selectors.progress.played);
-
- // Seek tooltip
- plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
-
- // Volume
- plyr.volume = {};
- plyr.volume.input = _getElement(config.selectors.volume.input);
- plyr.volume.display = _getElement(config.selectors.volume.display);
-
- // Timing
- plyr.duration = _getElement(config.selectors.duration);
- plyr.currentTime = _getElement(config.selectors.currentTime);
- plyr.seekTime = _getElements(config.selectors.seekTime);
-
- return true;
- } catch (e) {
- _warn('It looks like there is a problem with your controls HTML');
+ // Get audio tracks
+ return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
+ }
- // Restore native video controls
- _toggleNativeControls(true);
+ /**
+ * Set playback speed
+ * @param {decimal} speed - the speed of playback (0.5-2.0)
+ */
+ set speed(input) {
+ let speed = null;
- return false;
- }
+ if (utils.is.number(input)) {
+ speed = input;
}
- // Toggle style hook
- function _toggleStyleHook() {
- _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
+ if (!utils.is.number(speed)) {
+ speed = this.storage.get('speed');
}
- // Toggle native controls
- function _toggleNativeControls(toggle) {
- if (toggle && _inArray(config.types.html5, plyr.type)) {
- plyr.media.setAttribute('controls', '');
- } else {
- plyr.media.removeAttribute('controls');
- }
+ if (!utils.is.number(speed)) {
+ speed = this.config.speed.selected;
}
- // Setup aria attribute for play and iframe title
- function _setTitle(iframe) {
- // Find the current text
- var label = config.i18n.play;
-
- // If there's a media title set, use that for the label
- if (_is.string(config.title) && config.title.length) {
- label += ', ' + config.title;
-
- // Set container label
- plyr.container.setAttribute('aria-label', config.title);
- }
-
- // If there's a play button, set label
- if (plyr.supported.full && plyr.buttons.play) {
- for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
- plyr.buttons.play[i].setAttribute('aria-label', label);
- }
- }
-
- // Set iframe title
- // https://github.com/sampotts/plyr/issues/124
- if (_is.htmlElement(iframe)) {
- iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
- }
+ // Set min/max
+ if (speed < 0.1) {
+ speed = 0.1;
}
-
- // Setup localStorage
- function _setupStorage() {
- var value = null;
- plyr.storage = {};
-
- // Bail if we don't have localStorage support or it's disabled
- if (!_storage.supported || !config.storage.enabled) {
- return;
- }
-
- // Clean up old volume
- // https://github.com/sampotts/plyr/issues/171
- window.localStorage.removeItem('plyr-volume');
-
- // load value from the current key
- value = window.localStorage.getItem(config.storage.key);
-
- if (!value) {
- // Key wasn't set (or had been cleared), move along
- return;
- } else if (/^\d+(\.\d+)?$/.test(value)) {
- // If value is a number, it's probably volume from an older
- // version of plyr. See: https://github.com/sampotts/plyr/pull/313
- // Update the key to be JSON
- _updateStorage({ volume: parseFloat(value) });
- } else {
- // Assume it's JSON from this or a later version of plyr
- plyr.storage = JSON.parse(value);
- }
+ if (speed > 2.0) {
+ speed = 2.0;
}
- // Save a value back to local storage
- function _updateStorage(value) {
- // Bail if we don't have localStorage support or it's disabled
- if (!_storage.supported || !config.storage.enabled) {
- return;
- }
-
- // Update the working copy of the values
- _extend(plyr.storage, value);
-
- // Update storage
- window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage));
+ if (!this.config.speed.options.includes(speed)) {
+ this.debug.warn(`Unsupported speed (${speed})`);
+ return;
}
- // Setup media
- function _setupMedia() {
- // If there's no media, bail
- if (!plyr.media) {
- _warn('No media element found!');
- return;
- }
-
- if (plyr.supported.full) {
- // Add type class
- _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
-
- // Add video class for embeds
- // This will require changes if audio embeds are added
- if (_inArray(config.types.embed, plyr.type)) {
- _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
- }
-
- // If there's no autoplay attribute, assume the video is stopped and add state class
- _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
-
- // Add iOS class
- _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
-
- // Add touch class
- _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
+ // Update config
+ this.config.speed.selected = speed;
- // Inject the player wrapper
- if (plyr.type === 'video') {
- // Create the wrapper div
- var wrapper = document.createElement('div');
- wrapper.setAttribute('class', config.classes.videoWrapper);
+ // Set media speed
+ this.media.playbackRate = speed;
+ }
- // Wrap the video in a container
- _wrap(plyr.media, wrapper);
+ /**
+ * Get current playback speed
+ */
+ get speed() {
+ return this.media.playbackRate;
+ }
- // Cache the container
- plyr.videoContainer = wrapper;
- }
- }
+ /**
+ * Set playback quality
+ * Currently YouTube only
+ * @param {string} input - Quality level
+ */
+ set quality(input) {
+ let quality = null;
- // Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- _setupEmbed();
- }
+ if (utils.is.string(input)) {
+ quality = input;
}
- // Setup YouTube/Vimeo
- function _setupEmbed() {
- var container = document.createElement('div'),
- mediaId,
- mediaUrl,
- id = plyr.type + '-' + Math.floor(Math.random() * 10000);
-
- // Parse IDs from URLs if supplied
- switch (plyr.type) {
- case 'youtube':
- mediaId = _parseYouTubeId(plyr.embedId);
- break;
-
- case 'vimeo':
- mediaId = _parseVimeoId(plyr.embedId);
- break;
-
- default:
- mediaId = plyr.embedId;
- }
-
- // Remove old containers
- var containers = _getElements('[id^="' + plyr.type + '-"]');
- for (var i = containers.length - 1; i >= 0; i--) {
- _remove(containers[i]);
- }
-
- // Add embed class for responsive
- _toggleClass(plyr.media, config.classes.videoWrapper, true);
- _toggleClass(plyr.media, config.classes.embedWrapper, true);
-
- if (plyr.type === 'youtube') {
- // Create the YouTube container
- plyr.media.appendChild(container);
-
- // Set ID
- container.setAttribute('id', id);
-
- // Setup API
- if (_is.object(window.YT)) {
- _youTubeReady(mediaId, container);
- } else {
- // Load the API
- _injectScript(config.urls.youtube.api);
-
- // Setup callback for the API
- window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
-
- // Add to queue
- window.onYouTubeReadyCallbacks.push(function() {
- _youTubeReady(mediaId, container);
- });
-
- // Set callback to process queue
- window.onYouTubeIframeAPIReady = function() {
- window.onYouTubeReadyCallbacks.forEach(function(callback) {
- callback();
- });
- };
- }
- } else if (plyr.type === 'vimeo') {
- // Vimeo needs an extra div to hide controls on desktop (which has full support)
- if (plyr.supported.full) {
- plyr.media.appendChild(container);
- } else {
- container = plyr.media;
- }
-
- // Set ID
- container.setAttribute('id', id);
-
- // Load the API if not already
- if (!_is.object(window.Vimeo)) {
- _injectScript(config.urls.vimeo.api);
-
- // Wait for fragaloop load
- var vimeoTimer = window.setInterval(function() {
- if (_is.object(window.Vimeo)) {
- window.clearInterval(vimeoTimer);
- _vimeoReady(mediaId, container);
- }
- }, 50);
- } else {
- _vimeoReady(mediaId, container);
- }
- } else if (plyr.type === 'soundcloud') {
- // TODO: Currently unsupported and undocumented
- // Inject the iframe
- var soundCloud = document.createElement('iframe');
-
- // Watch for iframe load
- soundCloud.loaded = false;
- _on(soundCloud, 'load', function() {
- soundCloud.loaded = true;
- });
-
- _setAttributes(soundCloud, {
- src: 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
- id: id,
- });
-
- container.appendChild(soundCloud);
- plyr.media.appendChild(container);
-
- // Load the API if not already
- if (!window.SC) {
- _injectScript(config.urls.soundcloud.api);
- }
-
- // Wait for SC load
- var soundCloudTimer = window.setInterval(function() {
- if (window.SC && soundCloud.loaded) {
- window.clearInterval(soundCloudTimer);
- _soundcloudReady.call(soundCloud);
- }
- }, 50);
- }
+ if (!utils.is.string(quality)) {
+ quality = this.storage.get('quality');
}
- // When embeds are ready
- function _embedReady() {
- // Setup the UI and call ready if full support
- if (plyr.supported.full) {
- _setupInterface();
- _ready();
- }
-
- // Set title
- _setTitle(_getElement('iframe'));
+ if (!utils.is.string(quality)) {
+ quality = this.config.quality.selected;
}
- // Handle YouTube API ready
- function _youTubeReady(videoId, container) {
- // Setup instance
- // https://developers.google.com/youtube/iframe_api_reference
- plyr.embed = new window.YT.Player(container.id, {
- videoId: videoId,
- playerVars: {
- autoplay: config.autoplay ? 1 : 0,
- controls: plyr.supported.full ? 0 : 1,
- rel: 0,
- showinfo: 0,
- iv_load_policy: 3,
- cc_load_policy: config.captions.defaultActive ? 1 : 0,
- cc_lang_pref: 'en',
- wmode: 'transparent',
- modestbranding: 1,
- disablekb: 1,
- origin: '*', // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
- },
- events: {
- onError: function(event) {
- _triggerEvent(plyr.container, 'error', true, {
- code: event.data,
- embed: event.target,
- });
- },
- onReady: function(event) {
- // Get the instance
- var instance = event.target;
-
- // Create a faux HTML5 API using the YouTube API
- plyr.media.play = function() {
- instance.playVideo();
- plyr.media.paused = false;
- };
- plyr.media.pause = function() {
- instance.pauseVideo();
- plyr.media.paused = true;
- };
- plyr.media.stop = function() {
- instance.stopVideo();
- plyr.media.paused = true;
- };
- plyr.media.duration = instance.getDuration();
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
- plyr.media.muted = instance.isMuted();
-
- // Set title if possible
- if (typeof instance.getVideoData === 'function') {
- config.title = instance.getVideoData().title;
- }
-
- // Set the tabindex
- if (plyr.supported.full) {
- plyr.media.querySelector('iframe').setAttribute('tabindex', '-1');
- }
-
- // Update UI
- _embedReady();
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
-
- // Reset timer
- window.clearInterval(timers.buffering);
-
- // Setup buffering
- timers.buffering = window.setInterval(function() {
- // Get loaded % from YouTube
- plyr.media.buffered = instance.getVideoLoadedFraction();
-
- // Trigger progress only when we actually buffer something
- if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) {
- _triggerEvent(plyr.media, 'progress');
- }
-
- // Set last buffer point
- plyr.media.lastBuffered = plyr.media.buffered;
-
- // Bail if we're at 100%
- if (plyr.media.buffered === 1) {
- window.clearInterval(timers.buffering);
-
- // Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
- }
- }, 200);
- },
- onStateChange: function(event) {
- // Get the instance
- var instance = event.target;
-
- // Reset timer
- window.clearInterval(timers.playing);
-
- // Handle events
- // -1 Unstarted
- // 0 Ended
- // 1 Playing
- // 2 Paused
- // 3 Buffering
- // 5 Video cued
- switch (event.data) {
- case 0:
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
- break;
-
- case 1:
- plyr.media.paused = false;
-
- // If we were seeking, fire seeked event
- if (plyr.media.seeking) {
- _triggerEvent(plyr.media, 'seeked');
- }
-
- plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
-
- // Poll to get playback progress
- timers.playing = window.setInterval(function() {
- // Set the current time
- plyr.media.currentTime = instance.getCurrentTime();
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
- }, 100);
-
- // Check duration again due to YouTube bug
- // https://github.com/sampotts/plyr/issues/374
- // https://code.google.com/p/gdata-issues/issues/detail?id=8690
- if (plyr.media.duration !== instance.getDuration()) {
- plyr.media.duration = instance.getDuration();
- _triggerEvent(plyr.media, 'durationchange');
- }
-
- break;
-
- case 2:
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
- break;
- }
-
- _triggerEvent(plyr.container, 'statechange', false, {
- code: event.data,
- });
- },
- },
- });
+ if (!this.options.quality.includes(quality)) {
+ this.debug.warn(`Unsupported quality option (${quality})`);
+ return;
}
- // Vimeo ready
- function _vimeoReady(mediaId, container) {
- // Setup instance
- // https://github.com/vimeo/player.js
-
- var options = {
- loop: config.loop,
- autoplay: config.autoplay,
- byline: false,
- portrait: false,
- title: false,
- speed: true,
- transparent: 0,
- };
-
- // Convert options into URL params for iframe
- function buildUrlParameters(options) {
- return Object.keys(options)
- .map(function(key) {
- return encodeURIComponent(key) + '=' + encodeURIComponent(options[key]);
- })
- .join('&');
- }
+ // Update config
+ this.config.quality.selected = quality;
- // Get Vimeo params for the iframe
- var params = buildUrlParameters(options);
-
- // Build an iframe
- var iframe = document.createElement('iframe');
- var src = 'https://player.vimeo.com/video/' + mediaId + '?' + params;
- iframe.setAttribute('src', src);
- iframe.setAttribute('allowfullscreen', '');
- container.appendChild(iframe);
-
- plyr.embed = new window.Vimeo.Player(iframe);
-
- // Create a faux HTML5 API using the Vimeo API
- plyr.media.play = function() {
- plyr.embed.play();
- plyr.media.paused = false;
- };
- plyr.media.pause = function() {
- plyr.embed.pause();
- plyr.media.paused = true;
- };
- plyr.media.stop = function() {
- plyr.embed.stop();
- plyr.media.paused = true;
- };
-
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
-
- // Update UI
- _embedReady();
-
- plyr.embed.getCurrentTime().then(function(value) {
- plyr.media.currentTime = value;
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
- });
+ // Set quality
+ this.media.quality = quality;
+ }
- plyr.embed.getDuration().then(function(value) {
- plyr.media.duration = value;
+ /**
+ * Get current quality level
+ */
+ get quality() {
+ return this.media.quality;
+ }
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
- });
+ /**
+ * Toggle loop
+ * TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
+ * @param {boolean} input - Whether to loop or not
+ */
+ set loop(input) {
+ const toggle = utils.is.boolean(input) ? input : this.config.loop.active;
+ this.config.loop.active = toggle;
+ this.media.loop = toggle;
- // TODO: Captions
- /*if (config.captions.defaultActive) {
- plyr.embed.enableTextTrack('en');
- }*/
+ // Set default to be a true toggle
+ /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
- plyr.embed.on('loaded', function() {
- // Fix keyboard focus issues
- // https://github.com/sampotts/plyr/issues/317
- if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) {
- plyr.embed.element.setAttribute('tabindex', '-1');
+ switch (type) {
+ case 'start':
+ if (this.config.loop.end && this.config.loop.end <= this.currentTime) {
+ this.config.loop.end = null;
}
- });
-
- plyr.embed.on('play', function() {
- plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
- });
-
- plyr.embed.on('pause', function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
- });
-
- plyr.embed.on('timeupdate', function(data) {
- plyr.media.seeking = false;
- plyr.media.currentTime = data.seconds;
- _triggerEvent(plyr.media, 'timeupdate');
- });
-
- plyr.embed.on('progress', function(data) {
- plyr.media.buffered = data.percent;
- _triggerEvent(plyr.media, 'progress');
+ this.config.loop.start = this.currentTime;
+ // this.config.loop.indicator.start = this.elements.display.played.value;
+ break;
- if (parseInt(data.percent) === 1) {
- // Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ case 'end':
+ if (this.config.loop.start >= this.currentTime) {
+ return this;
}
- });
-
- plyr.embed.on('seeked', function() {
- plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'seeked');
- _triggerEvent(plyr.media, 'play');
- });
-
- plyr.embed.on('ended', function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
- });
- }
-
- // Soundcloud ready
- function _soundcloudReady() {
- /* jshint validthis: true */
- plyr.embed = window.SC.Widget(this);
-
- // Setup on ready
- plyr.embed.bind(window.SC.Widget.Events.READY, function() {
- // Create a faux HTML5 API using the Soundcloud API
- plyr.media.play = function() {
- plyr.embed.play();
- plyr.media.paused = false;
- };
- plyr.media.pause = function() {
- plyr.embed.pause();
- plyr.media.paused = true;
- };
- plyr.media.stop = function() {
- plyr.embed.seekTo(0);
- plyr.embed.pause();
- plyr.media.paused = true;
- };
-
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
-
- plyr.embed.getDuration(function(value) {
- plyr.media.duration = value / 1000;
-
- // Update UI
- _embedReady();
- });
-
- plyr.embed.getPosition(function(value) {
- plyr.media.currentTime = value;
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
- });
-
- plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
- plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
- });
-
- plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
- });
-
- plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
- plyr.media.seeking = false;
- plyr.media.currentTime = data.currentPosition / 1000;
- _triggerEvent(plyr.media, 'timeupdate');
- });
-
- plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
- plyr.media.buffered = data.loadProgress;
- _triggerEvent(plyr.media, 'progress');
-
- if (parseInt(data.loadProgress) === 1) {
- // Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
- }
- });
+ this.config.loop.end = this.currentTime;
+ // this.config.loop.indicator.end = this.elements.display.played.value;
+ break;
- plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
- });
- });
- }
+ case 'all':
+ this.config.loop.start = 0;
+ this.config.loop.end = this.duration - 2;
+ this.config.loop.indicator.start = 0;
+ this.config.loop.indicator.end = 100;
+ break;
- // Play media
- function _play() {
- if ('play' in plyr.media) {
- plyr.media.play();
- }
- }
+ case 'toggle':
+ if (this.config.loop.active) {
+ this.config.loop.start = 0;
+ this.config.loop.end = null;
+ } else {
+ this.config.loop.start = 0;
+ this.config.loop.end = this.duration - 2;
+ }
+ break;
- // Pause media
- function _pause() {
- if ('pause' in plyr.media) {
- plyr.media.pause();
- }
- }
+ default:
+ this.config.loop.start = 0;
+ this.config.loop.end = null;
+ break;
+ } */
+ }
- // Toggle playback
- function _togglePlay(toggle) {
- // True toggle
- if (!_is.boolean(toggle)) {
- toggle = plyr.media.paused;
- }
+ /**
+ * Get current loop state
+ */
+ get loop() {
+ return this.media.loop;
+ }
- if (toggle) {
- _play();
- } else {
- _pause();
- }
+ /**
+ * Set new media source
+ * @param {object} input - The new source object (see docs)
+ */
+ set source(input) {
+ source.change.call(this, input);
+ }
- return toggle;
- }
+ /**
+ * Get current source
+ */
+ get source() {
+ return this.media.currentSrc;
+ }
- // Rewind
- function _rewind(seekTime) {
- // Use default if needed
- if (!_is.number(seekTime)) {
- seekTime = config.seekTime;
- }
- _seek(plyr.media.currentTime - seekTime);
+ /**
+ * Set the poster image for a HTML5 video
+ * @param {input} - the URL for the new poster image
+ */
+ set poster(input) {
+ if (!this.isHTML5 || !this.isVideo) {
+ this.debug.warn('Poster can only be set on HTML5 video');
+ return;
}
- // Fast forward
- function _forward(seekTime) {
- // Use default if needed
- if (!_is.number(seekTime)) {
- seekTime = config.seekTime;
- }
- _seek(plyr.media.currentTime + seekTime);
+ if (utils.is.string(input)) {
+ this.media.setAttribute('poster', input);
}
+ }
- // Seek to time
- // The input parameter can be an event or a number
- function _seek(input) {
- var targetTime = 0,
- paused = plyr.media.paused,
- duration = _getDuration();
-
- if (_is.number(input)) {
- targetTime = input;
- } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
- // It's the seek slider
- // Seek to the selected time
- targetTime = input.target.value / input.target.max * duration;
- }
-
- // Normalise targetTime
- if (targetTime < 0) {
- targetTime = 0;
- } else if (targetTime > duration) {
- targetTime = duration;
- }
-
- // Update seek range and progress
- _updateSeekDisplay(targetTime);
-
- // Set the current time
- // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
- try {
- plyr.media.currentTime = targetTime.toFixed(4);
- } catch (e) {}
-
- // Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- switch (plyr.type) {
- case 'youtube':
- plyr.embed.seekTo(targetTime);
- break;
-
- case 'vimeo':
- // Round to nearest second for vimeo
- plyr.embed.setCurrentTime(targetTime.toFixed(0));
- break;
-
- case 'soundcloud':
- plyr.embed.seekTo(targetTime * 1000);
- break;
- }
-
- if (paused) {
- _pause();
- }
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
-
- // Set seeking flag
- plyr.media.seeking = true;
-
- // Trigger seeking
- _triggerEvent(plyr.media, 'seeking');
- }
-
- // Logging
- _log('Seeking to ' + plyr.media.currentTime + ' seconds');
-
- // Special handling for 'manual' captions
- _seekManualCaptions(targetTime);
+ /**
+ * Get the current poster image
+ */
+ get poster() {
+ if (!this.isHTML5 || !this.isVideo) {
+ return null;
}
- // Get the duration (or custom if set)
- function _getDuration() {
- // It should be a number, but parse it just incase
- var duration = parseInt(config.duration),
- // True duration
- mediaDuration = 0;
-
- // Only if duration available
- if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
- mediaDuration = plyr.media.duration;
- }
-
- // If custom duration is funky, use regular duration
- return isNaN(duration) ? mediaDuration : duration;
- }
+ return this.media.getAttribute('poster');
+ }
- // Check playing state
- function _checkPlaying() {
- _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
+ /**
+ * Set the autoplay state
+ * @param {boolean} input - Whether to autoplay or not
+ */
+ set autoplay(input) {
+ const toggle = utils.is.boolean(input) ? input : this.config.autoplay;
+ this.config.autoplay = toggle;
+ }
- _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
+ /**
+ * Get the current autoplay state
+ */
+ get autoplay() {
+ return this.config.autoplay;
+ }
- _toggleControls(plyr.media.paused);
+ /**
+ * Toggle captions
+ * @param {boolean} input - Whether to enable captions
+ */
+ toggleCaptions(input) {
+ // If there's no full support, or there's no caption toggle
+ if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+ return;
}
- // Save scroll position
- function _saveScrollPosition() {
- scroll = {
- x: window.pageXOffset || 0,
- y: window.pageYOffset || 0,
- };
- }
+ // If the method is called without parameter, toggle based on current value
+ const show = utils.is.boolean(input) ? input : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1;
- // Restore scroll position
- function _restoreScrollPosition() {
- window.scrollTo(scroll.x, scroll.y);
+ // Nothing to change...
+ if (this.captions.active === show) {
+ return;
}
- // Toggle fullscreen
- function _toggleFullscreen(event) {
- // We don't allow fullscreen on audio player
- if (plyr.type === 'audio') {
- return
- }
-
- // Check for native support
- var nativeSupport = fullscreen.supportsFullScreen;
-
- if (nativeSupport) {
- // If it's a fullscreen change event, update the UI
- if (event && event.type === fullscreen.fullScreenEventName) {
- plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
- } else {
- // Else it's a user request to enter or exit
- if (!fullscreen.isFullScreen(plyr.container)) {
- // Save scroll position
- _saveScrollPosition();
-
- // Request full screen
- fullscreen.requestFullScreen(plyr.container);
- } else {
- // Bail from fullscreen
- fullscreen.cancelFullScreen();
- }
-
- // Check if we're actually full screen (it could fail)
- plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
-
- return;
- }
- } else {
- // Otherwise, it's a simple toggle
- plyr.isFullscreen = !plyr.isFullscreen;
+ // Set global
+ this.captions.active = show;
- // Bind/unbind escape key
- document.body.style.overflow = plyr.isFullscreen ? 'hidden' : '';
- }
+ // Toggle state
+ utils.toggleState(this.elements.buttons.captions, this.captions.active);
- // Set class hook
- _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
-
- // Trap focus
- _focusTrap(plyr.isFullscreen);
-
- // Set button state
- if (plyr.buttons && plyr.buttons.fullscreen) {
- _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
- }
+ // Add class hook
+ utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.captions.active);
- // Trigger an event
- _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true);
+ // Trigger an event
+ utils.dispatchEvent.call(this, this.media, this.captions.active ? 'captionsenabled' : 'captionsdisabled');
+ }
- // Restore scroll position
- if (!plyr.isFullscreen && nativeSupport) {
- _restoreScrollPosition();
- }
+ /**
+ * Set the captions language
+ * @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
+ */
+ set language(input) {
+ // Nothing specified
+ if (!utils.is.string(input)) {
+ return;
}
- // Mute
- function _toggleMute(muted) {
- // If the method is called without parameter, toggle based on current value
- if (!_is.boolean(muted)) {
- muted = !plyr.media.muted;
- }
-
- // Set button state
- _toggleState(plyr.buttons.mute, muted);
-
- // Set mute on the player
- plyr.media.muted = muted;
-
- // If volume is 0 after unmuting, set to default
- if (plyr.media.volume === 0) {
- _setVolume(config.volume);
- }
-
- // Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- // YouTube
- switch (plyr.type) {
- case 'youtube':
- plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
- break;
-
- case 'vimeo':
- case 'soundcloud':
- plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
- break;
- }
+ // Toggle captions based on input
+ this.toggleCaptions(!utils.is.empty(input));
- // Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
- }
+ // If empty string is passed, assume disable captions
+ if (utils.is.empty(input)) {
+ return;
}
- // Set volume
- function _setVolume(volume) {
- var max = config.volumeMax,
- min = config.volumeMin;
-
- // Load volume from storage if no value specified
- if (_is.undefined(volume)) {
- volume = plyr.storage.volume;
- }
+ // Normalize
+ const language = input.toLowerCase();
- // Use config if all else fails
- if (volume === null || isNaN(volume)) {
- volume = config.volume;
- }
-
- // Maximum is volumeMax
- if (volume > max) {
- volume = max;
- }
- // Minimum is volumeMin
- if (volume < min) {
- volume = min;
- }
-
- // Set the player volume
- plyr.media.volume = parseFloat(volume / max);
-
- // Set the display
- if (plyr.volume.display) {
- plyr.volume.display.value = volume;
- }
-
- // Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- switch (plyr.type) {
- case 'youtube':
- plyr.embed.setVolume(plyr.media.volume * 100);
- break;
-
- case 'vimeo':
- case 'soundcloud':
- plyr.embed.setVolume(plyr.media.volume);
- break;
- }
-
- // Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
- }
-
- // Toggle muted state
- if (volume === 0) {
- plyr.media.muted = true;
- } else if (plyr.media.muted && volume > 0) {
- _toggleMute();
- }
+ // If nothing to change, bail
+ if (this.language === language) {
+ return;
}
- // Increase volume
- function _increaseVolume(step) {
- var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
+ // Update config
+ this.captions.language = language;
- if (!_is.number(step)) {
- step = config.volumeStep;
- }
+ // Clear caption
+ captions.setText.call(this, null);
- _setVolume(volume + step);
- }
+ // Update captions
+ captions.setLanguage.call(this);
- // Decrease volume
- function _decreaseVolume(step) {
- var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
+ // Trigger an event
+ utils.dispatchEvent.call(this, this.media, 'languagechange');
+ }
- if (!_is.number(step)) {
- step = config.volumeStep;
- }
+ /**
+ * Get the current captions language
+ */
+ get language() {
+ return this.captions.language;
+ }
- _setVolume(volume - step);
+ /**
+ * Toggle fullscreen playback
+ * Requires user input event
+ * @param {event} event
+ */
+ toggleFullscreen(event) {
+ // Video only
+ if (this.isAudio) {
+ return;
}
- // Update volume UI and storage
- function _updateVolume() {
- // Get the current volume
- var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
-
- // Update the <input type="range"> if present
- if (plyr.supported.full) {
- if (plyr.volume.input) {
- plyr.volume.input.value = volume;
- }
- if (plyr.volume.display) {
- plyr.volume.display.value = volume;
+ // Check for native support
+ if (fullscreen.enabled) {
+ if (utils.is.event(event) && event.type === fullscreen.eventType) {
+ // If it's a fullscreen change event, update the state
+ this.fullscreen.active = fullscreen.isFullScreen(this.elements.container);
+ } else {
+ // Else it's a user request to enter or exit
+ if (!this.fullscreen.active) {
+ fullscreen.requestFullScreen(this.elements.container);
+ } else {
+ fullscreen.cancelFullScreen();
}
- }
-
- // Update the volume in storage
- _updateStorage({ volume: volume });
-
- // Toggle class if muted
- _toggleClass(plyr.container, config.classes.muted, volume === 0);
-
- // Update checkbox for mute state
- if (plyr.supported.full && plyr.buttons.mute) {
- _toggleState(plyr.buttons.mute, volume === 0);
- }
- }
- // Toggle captions
- function _toggleCaptions(show) {
- // If there's no full support, or there's no caption toggle
- if (!plyr.supported.full || !plyr.buttons.captions) {
return;
}
-
- // If the method is called without parameter, toggle based on current value
- if (!_is.boolean(show)) {
- show = plyr.container.className.indexOf(config.classes.captions.active) === -1;
- }
-
- // Set global
- plyr.captionsEnabled = show;
-
- // Toggle state
- _toggleState(plyr.buttons.captions, plyr.captionsEnabled);
+ } else {
+ // Otherwise, it's a simple toggle
+ this.fullscreen.active = !this.fullscreen.active;
// Add class hook
- _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
-
- // Trigger an event
- _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true);
-
- // Save captions state to localStorage
- _updateStorage({ captionsEnabled: plyr.captionsEnabled });
- }
-
- // Check if media is loading
- function _checkLoading(event) {
- var loading = event.type === 'waiting';
-
- // Clear timer
- clearTimeout(timers.loading);
-
- // Timer to prevent flicker when seeking
- timers.loading = setTimeout(function() {
- // Toggle container class hook
- _toggleClass(plyr.container, config.classes.loading, loading);
-
- // Show controls if loading, hide if done
- _toggleControls(loading);
- }, loading ? 250 : 0);
- }
+ utils.toggleClass(this.elements.container, this.config.classNames.fullscreen.fallback, this.fullscreen.active);
- // Update <progress> elements
- function _updateProgress(event) {
- if (!plyr.supported.full) {
- return;
- }
-
- var progress = plyr.progress.played,
- value = 0,
- duration = _getDuration();
-
- if (event) {
- switch (event.type) {
- // Video playing
- case 'timeupdate':
- case 'seeking':
- if (plyr.controls.pressed) {
- return;
- }
-
- value = _getPercentage(plyr.media.currentTime, duration);
-
- // Set seek range value only if it's a 'natural' time event
- if (event.type === 'timeupdate' && plyr.buttons.seek) {
- plyr.buttons.seek.value = value;
- }
-
- break;
-
- // Check buffer status
- case 'playing':
- case 'progress':
- progress = plyr.progress.buffer;
- value = (function() {
- var buffered = plyr.media.buffered;
-
- if (buffered && buffered.length) {
- // HTML5
- return _getPercentage(buffered.end(0), duration);
- } else if (_is.number(buffered)) {
- // YouTube returns between 0 and 1
- return buffered * 100;
- }
-
- return 0;
- })();
-
- break;
- }
+ // Make sure we don't lose scroll position
+ if (this.fullscreen.active) {
+ scrollPosition = {
+ x: window.pageXOffset || 0,
+ y: window.pageYOffset || 0,
+ };
+ } else {
+ window.scrollTo(scrollPosition.x, scrollPosition.y);
}
- // Set values
- _setProgress(progress, value);
+ // Bind/unbind escape key
+ document.body.style.overflow = this.fullscreen.active ? 'hidden' : '';
}
- // Set <progress> value
- function _setProgress(progress, value) {
- if (!plyr.supported.full) {
- return;
- }
-
- // Default to 0
- if (_is.undefined(value)) {
- value = 0;
- }
- // Default to buffer or bail
- if (_is.undefined(progress)) {
- if (plyr.progress && plyr.progress.buffer) {
- progress = plyr.progress.buffer;
- } else {
- return;
- }
- }
-
- // One progress element passed
- if (_is.htmlElement(progress)) {
- progress.value = value;
- } else if (progress) {
- // Object of progress + text element
- if (progress.bar) {
- progress.bar.value = value;
- }
- if (progress.text) {
- progress.text.innerHTML = value;
- }
- }
+ // Set button state
+ if (utils.is.element(this.elements.buttons.fullscreen)) {
+ utils.toggleState(this.elements.buttons.fullscreen, this.fullscreen.active);
}
- // Update the displayed time
- function _updateTimeDisplay(time, element) {
- // Bail if there's no duration display
- if (!element) {
- return;
- }
-
- // Fallback to 0
- if (isNaN(time)) {
- time = 0;
- }
-
- plyr.secs = parseInt(time % 60);
- plyr.mins = parseInt((time / 60) % 60);
- plyr.hours = parseInt((time / 60 / 60) % 60);
-
- // Do we need to display hours?
- var displayHours = parseInt((_getDuration() / 60 / 60) % 60) > 0;
+ // Trigger an event
+ utils.dispatchEvent.call(this, this.media, this.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen');
+ }
- // Ensure it's two digits. For example, 03 rather than 3.
- plyr.secs = ('0' + plyr.secs).slice(-2);
- plyr.mins = ('0' + plyr.mins).slice(-2);
+ /**
+ * Toggle picture-in-picture playback on WebKit/MacOS
+ * TODO: update player with state, support, enabled
+ * TODO: detect outside changes
+ */
+ set pip(input) {
+ const states = {
+ pip: 'picture-in-picture',
+ inline: 'inline',
+ };
- // Render
- element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+ // Bail if no support
+ if (!support.pip) {
+ return;
}
- // Show the duration on metadataloaded
- function _displayDuration() {
- if (!plyr.supported.full) {
- return;
- }
+ // Toggle based on current state if not passed
+ const toggle = utils.is.boolean(input) ? input : this.pip === states.inline;
- // Determine duration
- var duration = _getDuration() || 0;
-
- // If there's only one time display, display duration there
- if (!plyr.duration && config.displayDuration && plyr.media.paused) {
- _updateTimeDisplay(duration, plyr.currentTime);
- }
-
- // If there's a duration element, update content
- if (plyr.duration) {
- _updateTimeDisplay(duration, plyr.duration);
- }
+ // Toggle based on current state
+ this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+ }
- // Update the tooltip (if visible)
- _updateSeekTooltip();
+ /**
+ * Get the current picture-in-picture state
+ */
+ get pip() {
+ if (!support.pip) {
+ return null;
}
- // Handle time change event
- function _timeUpdate(event) {
- // Duration
- _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
-
- // Ignore updates while seeking
- if (event && event.type === 'timeupdate' && plyr.media.seeking) {
- return;
- }
+ return this.media.webkitPresentationMode;
+ }
- // Playing progress
- _updateProgress(event);
+ /**
+ * Trigger the airplay dialog
+ * TODO: update player with state, support, enabled
+ */
+ airplay() {
+ // Show dialog if supported
+ if (support.airplay) {
+ this.media.webkitShowPlaybackTargetPicker();
}
+ }
- // Update seek range and progress
- function _updateSeekDisplay(time) {
- // Default to 0
- if (!_is.number(time)) {
- time = 0;
- }
-
- var duration = _getDuration(),
- value = _getPercentage(time, duration);
-
- // Update progress
- if (plyr.progress && plyr.progress.played) {
- plyr.progress.played.value = value;
- }
-
- // Update seek range input
- if (plyr.buttons && plyr.buttons.seek) {
- plyr.buttons.seek.value = value;
- }
+ /**
+ * Toggle the player controls
+ * @param {boolean} toggle - Whether to show the controls
+ */
+ toggleControls(toggle) {
+ // We need controls of course...
+ if (!utils.is.element(this.elements.controls)) {
+ return;
}
- // Update hover tooltip for seeking
- function _updateSeekTooltip(event) {
- var duration = _getDuration();
-
- // Bail if setting not true
- if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
- return;
- }
-
- // Calculate percentage
- var clientRect = plyr.progress.container.getBoundingClientRect(),
- percent = 0,
- visible = config.classes.tooltip + '--visible';
-
- // Determine percentage, if already visible
- if (!event) {
- if (_hasClass(plyr.progress.tooltip, visible)) {
- percent = plyr.progress.tooltip.style.left.replace('%', '');
- } else {
- return;
- }
- } else {
- percent = 100 / clientRect.width * (event.pageX - clientRect.left);
- }
-
- // Set bounds
- if (percent < 0) {
- percent = 0;
- } else if (percent > 100) {
- percent = 100;
- }
-
- // Display the time a click would seek to
- _updateTimeDisplay(duration / 100 * percent, plyr.progress.tooltip);
-
- // Set position
- plyr.progress.tooltip.style.left = percent + '%';
-
- // Show/hide the tooltip
- // If the event is a moues in/out and percentage is inside bounds
- if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
- _toggleClass(plyr.progress.tooltip, visible, event.type === 'mouseenter');
- }
+ // Don't hide if no UI support or it's audio
+ if (!this.supported.ui || this.isAudio) {
+ return;
}
- // Show the player controls in fullscreen mode
- function _toggleControls(toggle) {
- // Don't hide if config says not to, it's audio, or not ready or loading
- if (!config.hideControls || plyr.type === 'audio') {
- return;
- }
-
- var delay = 0,
- isEnterFullscreen = false,
- show = toggle,
- loading = _hasClass(plyr.container, config.classes.loading);
-
- // Default to false if no boolean
- if (!_is.boolean(toggle)) {
- if (toggle && toggle.type) {
- // Is the enter fullscreen event
- isEnterFullscreen = toggle.type === 'enterfullscreen';
-
- // Whether to show controls
- show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
-
- // Delay hiding on move events
- if (_inArray(['mousemove', 'touchmove'], toggle.type)) {
- delay = 2000;
- }
-
- // Delay a little more for keyboard users
- if (toggle.type === 'focus') {
- delay = 3000;
- }
- } else {
- show = _hasClass(plyr.container, config.classes.hideControls);
- }
- }
-
- // Clear timer every movement
- window.clearTimeout(timers.hover);
-
- // If the mouse is not over the controls, set a timeout to hide them
- if (show || plyr.media.paused || loading) {
- _toggleClass(plyr.container, config.classes.hideControls, false);
-
- // Always show controls when paused or if touch
- if (plyr.media.paused || loading) {
- return;
- }
-
- // Delay for hiding on touch
- if (plyr.browser.isTouch) {
+ let delay = 0;
+ let show = toggle;
+ let isEnterFullscreen = false;
+
+ // Get toggle state if not set
+ if (!utils.is.boolean(toggle)) {
+ if (utils.is.event(toggle)) {
+ // Is the enter fullscreen event
+ isEnterFullscreen = toggle.type === 'enterfullscreen';
+
+ // Whether to show controls
+ show = [
+ 'mouseenter',
+ 'mousemove',
+ 'touchstart',
+ 'touchmove',
+ 'focusin',
+ ].includes(toggle.type);
+
+ // Delay hiding on move events
+ if ([
+ 'mousemove',
+ 'touchmove',
+ 'touchend',
+ ].includes(toggle.type)) {
+ delay = 2000;
+ }
+
+ // Delay a little more for keyboard users
+ if (toggle.type === 'focusin') {
delay = 3000;
+ utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
}
- }
-
- // If toggle is false or if we're playing (regardless of toggle),
- // then set the timer to hide the controls
- if (!show || !plyr.media.paused) {
- timers.hover = window.setTimeout(function() {
- // If the mouse is over the controls (and not entering fullscreen), bail
- if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
- return;
- }
-
- _toggleClass(plyr.container, config.classes.hideControls, true);
- }, delay);
+ } else {
+ show = utils.hasClass(this.elements.container, this.config.classNames.hideControls);
}
}
- // Add common function to retrieve media source
- function _source(source) {
- // If not null or undefined, parse it
- if (!_is.undefined(source)) {
- _updateSource(source);
- return;
- }
+ // Clear timer on every call
+ window.clearTimeout(this.timers.controls);
- // Return the current source
- var url;
- switch (plyr.type) {
- case 'youtube':
- url = plyr.embed.getVideoUrl();
- break;
-
- case 'vimeo':
- plyr.embed.getVideoUrl.then(function(value) {
- url = value;
- });
- break;
-
- case 'soundcloud':
- plyr.embed.getCurrentSound(function(object) {
- url = object.permalink_url;
- });
- break;
-
- default:
- url = plyr.media.currentSrc;
- break;
- }
+ // If the mouse is not over the controls, set a timeout to hide them
+ if (show || this.paused || this.loading) {
+ // Check if controls toggled
+ const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false);
- return url || '';
- }
-
- // Update source
- // Sources are not checked for support so be careful
- function _updateSource(source) {
- if (!_is.object(source) || !('sources' in source) || !source.sources.length) {
- _warn('Invalid source format');
- return;
+ // Trigger event
+ if (toggled) {
+ utils.dispatchEvent.call(this, this.media, 'controlsshown');
}
- // Remove ready class hook
- _toggleClass(plyr.container, config.classes.ready, false);
-
- // Pause playback
- _pause();
-
- // Update seek range and progress
- _updateSeekDisplay();
-
- // Reset buffer progress
- _setProgress();
-
- // Cancel current network requests
- _cancelRequests();
-
- // Setup new source
- function setup() {
- // Remove embed object
- plyr.embed = null;
-
- // Remove the old media
- _remove(plyr.media);
-
- // Remove video container
- if (plyr.type === 'video' && plyr.videoContainer) {
- _remove(plyr.videoContainer);
- }
-
- // Reset class name
- if (plyr.container) {
- plyr.container.removeAttribute('class');
- }
-
- // Set the type
- if ('type' in source) {
- plyr.type = source.type;
-
- // Get child type for video (it might be an embed)
- if (plyr.type === 'video') {
- var firstSource = source.sources[0];
-
- if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
- plyr.type = firstSource.type;
- }
- }
- }
-
- // Check for support
- plyr.supported = supported(plyr.type);
-
- // Create new markup
- switch (plyr.type) {
- case 'video':
- plyr.media = document.createElement('video');
- break;
-
- case 'audio':
- plyr.media = document.createElement('audio');
- break;
-
- case 'youtube':
- case 'vimeo':
- case 'soundcloud':
- plyr.media = document.createElement('div');
- plyr.embedId = source.sources[0].src;
- break;
- }
-
- // Inject the new element
- _prependChild(plyr.container, plyr.media);
-
- // Autoplay the new source?
- if (_is.boolean(source.autoplay)) {
- config.autoplay = source.autoplay;
- }
-
- // Set attributes for audio and video
- if (_inArray(config.types.html5, plyr.type)) {
- if (config.crossorigin) {
- plyr.media.setAttribute('crossorigin', '');
- }
- if (config.autoplay) {
- plyr.media.setAttribute('autoplay', '');
- }
- if ('poster' in source) {
- plyr.media.setAttribute('poster', source.poster);
- }
- if (config.loop) {
- plyr.media.setAttribute('loop', '');
- }
- }
-
- // Restore class hooks
- _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
- _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
- _toggleStyleHook();
-
- // Set new sources for html5
- if (_inArray(config.types.html5, plyr.type)) {
- _insertChildElements('source', source.sources);
- }
-
- // Set up from scratch
- _setupMedia();
-
- // HTML5 stuff
- if (_inArray(config.types.html5, plyr.type)) {
- // Setup captions
- if ('tracks' in source) {
- _insertChildElements('track', source.tracks);
- }
-
- // Load HTML5 sources
- plyr.media.load();
- }
-
- // If HTML5 or embed but not fully supported, setupInterface and call ready now
- if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
- // Setup interface
- _setupInterface();
-
- // Call ready
- _ready();
- }
-
- // Set aria title and iframe title
- config.title = source.title;
- _setTitle();
+ // Always show controls when paused or if touch
+ if (this.paused || this.loading) {
+ return;
}
- // Destroy instance adn wait for callback
- // Vimeo throws a wobbly if you don't wait
- _destroy(setup, false);
- }
-
- // Update poster
- function _updatePoster(source) {
- if (plyr.type === 'video') {
- plyr.media.setAttribute('poster', source);
+ // Delay for hiding on touch
+ if (support.touch) {
+ delay = 3000;
}
}
- function onBodyClick() {
- _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
- }
-
- // Listen for control events
- function _controlListeners() {
- // IE doesn't support input event, so we fallback to change
- var inputEvent = plyr.browser.isIE ? 'change' : 'input';
-
- // Click play/pause helper
- function togglePlay() {
- var play = _togglePlay();
-
- // Determine which buttons
- var trigger = plyr.buttons[play ? 'play' : 'pause'],
- target = plyr.buttons[play ? 'pause' : 'play'];
-
- // Get the last play button to account for the large play button
- if (target) {
- if (target.length > 1) {
- target = target[target.length - 1];
- } else {
- target = target[0];
- }
- }
-
- // Setup focus and tab focus
- if (target) {
- var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
-
- setTimeout(function() {
- target.focus();
-
- if (hadTabFocus) {
- _toggleClass(trigger, config.classes.tabFocus, false);
- _toggleClass(target, config.classes.tabFocus, true);
- }
- }, 100);
- }
- }
-
- // Get the focused element
- function getFocusElement() {
- var focused = document.activeElement;
-
- if (!focused || focused === document.body) {
- focused = null;
- } else {
- focused = document.querySelector(':focus');
- }
-
- return focused;
- }
-
- // Get the key code for an event
- function getKeyCode(event) {
- return event.keyCode ? event.keyCode : event.which;
- }
-
- // Detect tab focus
- function checkTabFocus(focused) {
- for (var button in plyr.buttons) {
- var element = plyr.buttons[button];
-
- if (_is.nodeList(element)) {
- for (var i = 0; i < element.length; i++) {
- _toggleClass(element[i], config.classes.tabFocus, element[i] === focused);
- }
- } else {
- _toggleClass(element, config.classes.tabFocus, element === focused);
- }
- }
- }
-
- // Keyboard shortcuts
- if (config.keyboardShorcuts.focused) {
- var last = null;
-
- // Handle global presses
- if (config.keyboardShorcuts.global) {
- _on(window, 'keydown keyup', function(event) {
- var code = getKeyCode(event),
- focused = getFocusElement(),
- allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
- count = get().length;
-
- // Only handle global key press if there's only one player
- // and the key is in the allowed keys
- // and if the focused element is not editable (e.g. text input)
- // and any that accept key input http://webaim.org/techniques/keyboard/
- if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
- handleKey(event);
- }
- });
- }
+ // If toggle is false or if we're playing (regardless of toggle),
+ // then set the timer to hide the controls
+ if (!show || this.playing) {
+ this.timers.controls = window.setTimeout(() => {
+ /* this.debug.warn({
+ pressed: this.elements.controls.pressed,
+ hover: this.elements.controls.pressed,
+ playing: this.playing,
+ paused: this.paused,
+ loading: this.loading,
+ }); */
- // Handle presses on focused
- _on(plyr.container, 'keydown keyup', handleKey);
- }
-
- function handleKey(event) {
- var code = getKeyCode(event),
- pressed = event.type === 'keydown',
- held = pressed && code === last;
-
- // If the event is bubbled from the media element
- // Firefox doesn't get the keycode for whatever reason
- if (!_is.number(code)) {
+ // If the mouse is over the controls (and not entering fullscreen), bail
+ if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
return;
}
- // Seek by the number keys
- function seekByKey() {
- // Get current duration
- var duration = plyr.media.duration;
-
- // Bail if we have no duration set
- if (!_is.number(duration)) {
- return;
- }
-
- // Divide the max duration into 10th's and times by the number value
- _seek(duration / 10 * (code - 48));
+ // Restore transition behaviour
+ if (!utils.hasClass(this.elements.container, this.config.classNames.hideControls)) {
+ utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, false);
}
- // Handle the key on keydown
- // Reset on keyup
- if (pressed) {
- // Which keycodes should we prevent default
- var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
-
- // If the code is found prevent default (e.g. prevent scrolling for arrows)
- if (_inArray(preventDefault, code)) {
- event.preventDefault();
- event.stopPropagation();
- }
+ // Check if controls toggled
+ const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, true);
- switch (code) {
- // 0-9
- case 48:
- case 49:
- case 50:
- case 51:
- case 52:
- case 53:
- case 54:
- case 55:
- case 56:
- case 57:
- if (!held) {
- seekByKey();
- }
- break;
- // Space and K key
- case 32:
- case 75:
- if (!held) {
- _togglePlay();
- }
- break;
- // Arrow up
- case 38:
- _increaseVolume();
- break;
- // Arrow down
- case 40:
- _decreaseVolume();
- break;
- // M key
- case 77:
- if (!held) {
- _toggleMute();
- }
- break;
- // Arrow forward
- case 39:
- _forward();
- break;
- // Arrow back
- case 37:
- _rewind();
- break;
- // F key
- case 70:
- _toggleFullscreen();
- break;
- // C key
- case 67:
- if (!held) {
- _toggleCaptions();
- }
- break;
- }
+ // Trigger event and close menu
+ if (toggled) {
+ utils.dispatchEvent.call(this, this.media, 'controlshidden');
- // Escape is handle natively when in full screen
- // So we only need to worry about non native
- if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
- _toggleFullscreen();
+ if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) {
+ controls.toggleMenu.call(this, false);
}
-
- // Store last code for next cycle
- last = code;
- } else {
- last = null;
- }
- }
-
- // Focus/tab management
- _on(window, 'keyup', function(event) {
- var code = getKeyCode(event),
- focused = getFocusElement();
-
- if (code === 9) {
- checkTabFocus(focused);
}
- });
- _on(document.body, 'click', onBodyClick);
- for (var button in plyr.buttons) {
- var element = plyr.buttons[button];
-
- _on(element, 'blur', function() {
- _toggleClass(element, 'tab-focus', false);
- });
- }
-
- // Play
- _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay);
-
- // Pause
- _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay);
-
- // Restart
- _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek);
-
- // Rewind
- _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind);
-
- // Fast forward
- _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
-
- // Seek
- _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
-
- // Set volume
- _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
- _setVolume(plyr.volume.input.value);
- });
-
- // Mute
- _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute);
-
- // Fullscreen
- _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen);
-
- // Toggle fullscreen when user double clicks on video wrapper
- _proxyListener(plyr.container, 'dblclick', config.listeners.fullscreen, _toggleFullscreen);
-
- // Handle user exiting fullscreen by escaping etc
- if (fullscreen.supportsFullScreen) {
- _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
- }
-
- // Captions
- _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
-
- // Seek tooltip
- _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
-
- // Toggle controls visibility based on mouse movement
- if (config.hideControls) {
- // Toggle controls on mouse events and entering fullscreen
- _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
-
- // Watch for cursor over controls so they don't hide when trying to interact
- _on(plyr.controls, 'mouseenter mouseleave', function(event) {
- plyr.controls.hover = event.type === 'mouseenter';
- });
-
- // Watch for cursor over controls so they don't hide when trying to interact
- _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
- plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
- });
-
- // Focus in/out on controls
- _on(plyr.controls, 'focus blur', _toggleControls, true);
- }
-
- // Adjust volume on scroll
- _on(plyr.volume.input, 'wheel', function(event) {
- event.preventDefault();
-
- // Detect "natural" scroll - suppored on OS X Safari only
- // Other browsers on OS X will be inverted until support improves
- var inverted = event.webkitDirectionInvertedFromDevice,
- step = config.volumeStep / 5;
-
- // Scroll down (or up on natural) to decrease
- if (event.deltaY < 0 || event.deltaX > 0) {
- if (inverted) {
- _decreaseVolume(step);
- } else {
- _increaseVolume(step);
- }
- }
-
- // Scroll up (or down on natural) to increase
- if (event.deltaY > 0 || event.deltaX < 0) {
- if (inverted) {
- _increaseVolume(step);
- } else {
- _decreaseVolume(step);
- }
- }
- });
+ }, delay);
}
+ }
- // Listen for media events
- function _mediaListeners() {
- // Time change on media
- _on(plyr.media, 'timeupdate seeking', _timeUpdate);
-
- // Update manual captions
- _on(plyr.media, 'timeupdate', _seekManualCaptions);
-
- // Display duration
- _on(plyr.media, 'durationchange loadedmetadata', _displayDuration);
-
- // Handle the media finishing
- _on(plyr.media, 'ended', function() {
- // Show poster on end
- if (plyr.type === 'video' && config.showPosterOnEnd) {
- // Clear
- if (plyr.type === 'video') {
- _setCaption();
- }
-
- // Restart
- _seek();
-
- // Re-load media
- plyr.media.load();
- }
- });
-
- // Check for buffer progress
- _on(plyr.media, 'progress playing', _updateProgress);
-
- // Handle native mute
- _on(plyr.media, 'volumechange', _updateVolume);
-
- // Handle native play/pause
- _on(plyr.media, 'play pause ended', _checkPlaying);
-
- // Loading
- _on(plyr.media, 'waiting canplay seeked', _checkLoading);
-
- // Click video
- if (config.clickToPlay && plyr.type !== 'audio') {
- // Re-fetch the wrapper
- var wrapper = _getElement('.' + config.classes.videoWrapper);
+ /**
+ * Add event listeners
+ * @param {string} event - Event type
+ * @param {function} callback - Callback for when event occurs
+ */
+ on(event, callback) {
+ utils.on(this.elements.container, event, callback);
+ }
- // Bail if there's no wrapper (this should never happen)
- if (!wrapper) {
- return;
- }
+ /**
+ * Remove event listeners
+ * @param {string} event - Event type
+ * @param {function} callback - Callback for when event occurs
+ */
+ off(event, callback) {
+ utils.off(this.elements.container, event, callback);
+ }
- // Set cursor
- wrapper.style.cursor = 'pointer';
- // On click play, pause ore restart
- _on(wrapper, 'click', function() {
- // Touch devices will just show controls (if we're hiding controls)
- if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
- return;
- }
- if (plyr.media.paused) {
- _play();
- } else if (plyr.media.ended) {
- _seek();
- _play();
- } else {
- _pause();
+ /**
+ * Destroy an instance
+ * Event listeners are removed when elements are removed
+ * http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
+ * @param {function} callback - Callback for when destroy is complete
+ * @param {boolean} soft - Whether it's a soft destroy (for source changes etc)
+ */
+ destroy(callback, soft = false) {
+ const done = () => {
+ // Reset overflow (incase destroyed while in fullscreen)
+ document.body.style.overflow = '';
+
+ // GC for embed
+ this.embed = null;
+ this.embedId = null;
+
+ // If it's a soft destroy, make minimal changes
+ if (soft) {
+ if (Object.keys(this.elements).length) {
+ // Remove buttons
+ if (this.elements.buttons && this.elements.buttons.play) {
+ Array.from(this.elements.buttons.play).forEach(button => utils.removeElement(button));
}
- });
- }
-
- // Disable right click
- if (config.disableContextMenu) {
- _on(plyr.media, 'contextmenu', function(event) {
- event.preventDefault();
- });
- }
-
- // Proxy events to container
- // Bubble up key events for Edge
- _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
- _triggerEvent(plyr.container, event.type, true);
- });
- }
-
- // Cancel current network requests
- // See https://github.com/sampotts/plyr/issues/174
- function _cancelRequests() {
- if (!_inArray(config.types.html5, plyr.type)) {
- return;
- }
-
- // Remove child sources
- var sources = plyr.media.querySelectorAll('source');
- for (var i = 0; i < sources.length; i++) {
- _remove(sources[i]);
- }
-
- // Set blank video src attribute
- // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
- // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
- plyr.media.setAttribute('src', config.blankUrl);
-
- // Load the new empty source
- // This will cancel existing requests
- // See https://github.com/sampotts/plyr/issues/174
- plyr.media.load();
-
- // Debugging
- _log('Cancelled network requests');
- }
-
- // Destroy an instance
- // Event listeners are removed when elements are removed
- // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
- function _destroy(callback, restore) {
- // Bail if the element is not initialized
- if (!plyr.init) {
- return null;
- }
-
- // Type specific stuff
- switch (plyr.type) {
- case 'youtube':
- // Clear timers
- window.clearInterval(timers.buffering);
- window.clearInterval(timers.playing);
-
- // Destroy YouTube API
- plyr.embed.destroy();
-
- // Clean up
- cleanUp();
-
- break;
- case 'vimeo':
- // Destroy Vimeo API
- // then clean up (wait, to prevent postmessage errors)
- plyr.embed.unload().then(cleanUp);
+ // Remove others
+ utils.removeElement(this.elements.captions);
+ utils.removeElement(this.elements.controls);
+ utils.removeElement(this.elements.wrapper);
- // Vimeo does not always return
- timers.cleanUp = window.setTimeout(cleanUp, 200);
-
- break;
-
- case 'video':
- case 'audio':
- // Restore native video controls
- _toggleNativeControls(true);
-
- // Clean up
- cleanUp();
-
- break;
- }
-
- function cleanUp() {
- clearTimeout(timers.cleanUp);
-
- // Default to restore original element
- if (!_is.boolean(restore)) {
- restore = true;
+ // Clear for GC
+ this.elements.buttons.play = null;
+ this.elements.captions = null;
+ this.elements.controls = null;
+ this.elements.wrapper = null;
}
// Callback
- if (_is.function(callback)) {
- callback.call(original);
+ if (utils.is.function(callback)) {
+ callback();
}
-
- // Bail if we don't need to restore the original element
- if (!restore) {
- return;
- }
-
- // Remove init flag
- plyr.init = false;
-
+ } else {
// Replace the container with the original element provided
- plyr.container.parentNode.replaceChild(original, plyr.container);
-
- // Free container in order for GC to remove it and prevent memory leaks due to added events
- plyr.container = null;
-
- // Allow overflow (set on fullscreen)
- document.body.style.overflow = '';
+ const parent = this.elements.container.parentNode;
- //remove events
- _off(document.body, 'click', onBodyClick);
+ if (utils.is.element(parent)) {
+ parent.replaceChild(this.elements.original, this.elements.container);
+ }
// Event
- _triggerEvent(original, 'destroyed', true);
- }
- }
-
- // Setup a player
- function _init() {
- // Bail if the element is initialized
- if (plyr.init) {
- return null;
- }
-
- // Setup the fullscreen api
- fullscreen = _fullscreen();
-
- // Sniff out the browser
- plyr.browser = _browserSniff();
+ utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true);
- // Bail if nothing to setup
- if (!_is.htmlElement(plyr.media)) {
- return;
- }
-
- // Load saved settings from localStorage
- _setupStorage();
-
- // Set media type based on tag or data attribute
- // Supported: video, audio, vimeo, youtube
- var tagName = media.tagName.toLowerCase();
- if (tagName === 'div') {
- plyr.type = media.getAttribute('data-type');
- plyr.embedId = media.getAttribute('data-video-id');
-
- // Clean up
- media.removeAttribute('data-type');
- media.removeAttribute('data-video-id');
- } else {
- plyr.type = tagName;
- config.crossorigin = media.getAttribute('crossorigin') !== null;
- config.autoplay = config.autoplay || media.getAttribute('autoplay') !== null;
- config.loop = config.loop || media.getAttribute('loop') !== null;
- }
-
- // Check for support
- plyr.supported = supported(plyr.type);
-
- // If no native support, bail
- if (!plyr.supported.basic) {
- return;
- }
-
- // Wrap media
- plyr.container = _wrap(media, document.createElement('div'));
-
- // Allow focus to be captured
- plyr.container.setAttribute('tabindex', 0);
-
- // Add style hook
- _toggleStyleHook();
-
- // Debug info
- _log('' + plyr.browser.name + ' ' + plyr.browser.version);
-
- // Setup media
- _setupMedia();
-
- // Setup interface
- // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now
- if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
- // Setup UI
- _setupInterface();
-
- // Call ready
- _ready();
-
- // Set title on button and frame
- _setTitle();
- }
-
- // Successful setup
- plyr.init = true;
- }
-
- // Setup the UI
- function _setupInterface() {
- // Don't setup interface if no support
- if (!plyr.supported.full) {
- _warn('Basic support only', plyr.type);
-
- // Remove controls
- _remove(_getElement(config.selectors.controls.wrapper));
-
- // Remove large play
- _remove(_getElement(config.selectors.buttons.play));
-
- // Restore native controls
- _toggleNativeControls(true);
-
- // Bail
- return;
- }
-
- // Inject custom controls if not present
- var controlsMissing = !_getElements(config.selectors.controls.wrapper).length;
- if (controlsMissing) {
- // Inject custom controls
- _injectControls();
- }
-
- // Find the elements
- if (!_findElements()) {
- return;
- }
+ // Callback
+ if (utils.is.function(callback)) {
+ callback.call(this.elements.original);
+ }
- // If the controls are injected, re-bind listeners for controls
- if (controlsMissing) {
- _controlListeners();
+ // Clear for GC
+ this.elements = null;
}
-
- // Media element listeners
- _mediaListeners();
-
- // Remove native controls
- _toggleNativeControls();
-
- // Setup fullscreen
- _setupFullscreen();
-
- // Captions
- _setupCaptions();
-
- // Set volume
- _setVolume();
- _updateVolume();
-
- // Reset time display
- _timeUpdate();
-
- // Update the UI
- _checkPlaying();
-
- // Display duration
- _displayDuration();
- }
-
- api = {
- getOriginal: function() {
- return original;
- },
- getContainer: function() {
- return plyr.container;
- },
- getEmbed: function() {
- return plyr.embed;
- },
- getMedia: function() {
- return plyr.media;
- },
- getType: function() {
- return plyr.type;
- },
- getDuration: _getDuration,
- getCurrentTime: function() {
- return plyr.media.currentTime;
- },
- getVolume: function() {
- return plyr.media.volume;
- },
- isMuted: function() {
- return plyr.media.muted;
- },
- isReady: function() {
- return _hasClass(plyr.container, config.classes.ready);
- },
- isLoading: function() {
- return _hasClass(plyr.container, config.classes.loading);
- },
- isPaused: function() {
- return plyr.media.paused;
- },
- on: function(event, callback) {
- _on(plyr.container, event, callback);
- return this;
- },
- play: _play,
- pause: _pause,
- stop: function() {
- _pause();
- _seek();
- },
- restart: _seek,
- rewind: _rewind,
- forward: _forward,
- seek: _seek,
- source: _source,
- poster: _updatePoster,
- setVolume: _setVolume,
- togglePlay: _togglePlay,
- toggleMute: _toggleMute,
- toggleCaptions: _toggleCaptions,
- toggleFullscreen: _toggleFullscreen,
- toggleControls: _toggleControls,
- isFullscreen: function() {
- return plyr.isFullscreen || false;
- },
- support: function(mimeType) {
- return _supportMime(plyr, mimeType);
- },
- destroy: _destroy,
};
- // Everything done
- function _ready() {
- // Ready event at end of execution stack
- window.setTimeout(function() {
- _triggerEvent(plyr.media, 'ready');
- }, 0);
-
- // Set class hook on media element
- _toggleClass(plyr.media, defaults.classes.setup, true);
-
- // Set container class for ready
- _toggleClass(plyr.container, config.classes.ready, true);
-
- // Store a refernce to instance
- plyr.media.plyr = api;
-
- // Autoplay
- if (config.autoplay) {
- _play();
- }
- }
-
- // Initialize instance
- _init();
-
- // If init failed, return null
- if (!plyr.init) {
- return null;
- }
-
- return api;
- }
-
- // Load a sprite
- function loadSprite(url, id) {
- var x = new XMLHttpRequest();
-
- // If the id is set and sprite exists, bail
- if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) {
- return;
- }
-
- // Create placeholder (to prevent loading twice)
- var container = document.createElement('div');
- container.setAttribute('hidden', '');
- if (_is.string(id)) {
- container.setAttribute('id', id);
- }
- document.body.insertBefore(container, document.body.childNodes[0]);
-
- // Check for CORS support
- if ('withCredentials' in x) {
- x.open('GET', url, true);
- } else {
- return;
- }
+ // Type specific stuff
+ switch (`${this.provider}:${this.type}`) {
+ case 'html5:video':
+ case 'html5:audio':
+ // Restore native video controls
+ ui.toggleNativeControls.call(this, true);
- // Inject hidden div with sprite on load
- x.onload = function() {
- container.innerHTML = x.responseText;
- };
+ // Clean up
+ done();
- x.send();
- }
+ break;
- // Check for support
- function supported(type) {
- var browser = _browserSniff(),
- isOldIE = browser.isIE && browser.version <= 9,
- isIos = browser.isIos,
- isIphone = browser.isIphone,
- audioSupport = !!document.createElement('audio').canPlayType,
- videoSupport = !!document.createElement('video').canPlayType,
- basic = false,
- full = false;
+ case 'youtube:video':
+ // Clear timers
+ window.clearInterval(this.timers.buffering);
+ window.clearInterval(this.timers.playing);
- switch (type) {
- case 'video':
- basic = videoSupport;
- full = basic && (!isOldIE && !isIphone);
- break;
+ // Destroy YouTube API
+ this.embed.destroy();
- case 'audio':
- basic = audioSupport;
- full = basic && !isOldIE;
- break;
+ // Clean up
+ done();
- // Vimeo does not seem to be supported on iOS via API
- // Issue raised https://github.com/vimeo/player.js/issues/87
- case 'vimeo':
- basic = true;
- full = !isOldIE && !isIos;
break;
- case 'youtube':
- basic = true;
- full = !isOldIE && !isIos;
-
- // YouTube seems to work on iOS 10+ on iPad
- if (isIos && !isIphone && browser.version >= 10) {
- full = true;
- }
+ case 'vimeo:video':
+ // Destroy Vimeo API
+ // then clean up (wait, to prevent postmessage errors)
+ this.embed.unload().then(done);
- break;
+ // Vimeo does not always return
+ window.setTimeout(done, 200);
- case 'soundcloud':
- basic = true;
- full = !isOldIE && !isIphone;
break;
default:
- basic = audioSupport && videoSupport;
- full = basic && !isOldIE;
+ break;
}
-
- return {
- basic: basic,
- full: full,
- };
}
- // Setup function
- function setup(targets, options) {
- // Get the players
- var players = [],
- instances = [],
- selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
-
- // Select the elements
- if (_is.string(targets)) {
- // String selector passed
- targets = document.querySelectorAll(targets);
- } else if (_is.htmlElement(targets)) {
- // Single HTMLElement passed
- targets = [targets];
- } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
- // No selector passed, possibly options as first argument
- // If options are the first argument
- if (_is.undefined(options) && _is.object(targets)) {
- options = targets;
- }
-
- // Use default selector
- targets = document.querySelectorAll(selector);
- }
-
- // Convert NodeList to array
- if (_is.nodeList(targets)) {
- targets = Array.prototype.slice.call(targets);
- }
-
- // Bail if disabled or no basic support
- // You may want to disable certain UAs etc
- if (!supported().basic || !targets.length) {
- return false;
- }
-
- // Add to container list
- function add(target, media) {
- if (!_hasClass(media, defaults.classes.hook)) {
- players.push({
- // Always wrap in a <div> for styling
- //container: _wrap(media, document.createElement('div')),
- // Could be a container or the media itself
- target: target,
- // This should be the <video>, <audio> or <div> (YouTube/Vimeo)
- media: media,
- });
- }
- }
-
- // Check if the targets have multiple media elements
- for (var i = 0; i < targets.length; i++) {
- var target = targets[i];
-
- // Get children
- var children = target.querySelectorAll(selector);
-
- // If there's more than one media element child, wrap them
- if (children.length) {
- for (var x = 0; x < children.length; x++) {
- add(target, children[x]);
- }
- } else if (_matches(target, selector)) {
- // Target is media element
- add(target, target);
- }
- }
-
- // Create a player instance for each element
- players.forEach(function(player) {
- var element = player.target,
- media = player.media,
- match = false;
-
- // The target element can also be the media element
- if (media === element) {
- match = true;
- }
-
- // Setup a player instance and add to the element
- // Create instance-specific config
- var data = {};
-
- // Try parsing data attribute config
- try {
- data = JSON.parse(element.getAttribute('data-plyr'));
- } catch (e) {}
-
- var config = _extend({}, defaults, options, data);
-
- // Bail if not enabled
- if (!config.enabled) {
- return null;
- }
-
- // Create new instance
- var instance = new Plyr(media, config);
-
- // Go to next if setup failed
- if (!_is.object(instance)) {
- return;
- }
-
- // Listen for events if debugging
- if (config.debug) {
- var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
-
- _on(instance.getContainer(), events.join(' '), function(event) {
- console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
- });
- }
-
- // Callback
- _event(instance.getContainer(), 'setup', true, {
- plyr: instance,
- });
-
- // Add to return array even if it's already setup
- instances.push(instance);
- });
-
- return instances;
- }
-
- // Get all instances within a provided container
- function get(container) {
- if (_is.string(container)) {
- // Get selector if string passed
- container = document.querySelector(container);
- } else if (_is.undefined(container)) {
- // Use body by default to get all on page
- container = document.body;
- }
-
- // If we have a HTML element
- if (_is.htmlElement(container)) {
- var elements = container.querySelectorAll('.' + defaults.classes.setup),
- instances = [];
-
- Array.prototype.slice.call(elements).forEach(function(element) {
- if (_is.object(element.plyr)) {
- instances.push(element.plyr);
- }
- });
-
- return instances;
- }
-
- return [];
+ /**
+ * Check for support for a mime type (HTML5 only)
+ * @param {string} type - Mime type
+ */
+ supports(type) {
+ return support.mime.call(this, type);
}
- return {
- setup: setup,
- supported: supported,
- loadSprite: loadSprite,
- get: get,
- };
-});
-
-// Custom event polyfill
-// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-(function() {
- if (typeof window.CustomEvent === 'function') {
- return;
+ /**
+ * Check for support
+ * @param {string} type - Player type (audio/video)
+ * @param {string} provider - Provider (html5/youtube/vimeo)
+ * @param {bool} inline - Where player has `playsinline` sttribute
+ */
+ static supported(type, provider, inline) {
+ return support.check(type, provider, inline);
}
- function CustomEvent(event, params) {
- params = params || { bubbles: false, cancelable: false, detail: undefined };
- var evt = document.createEvent('CustomEvent');
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
- return evt;
+ /**
+ * Load an SVG sprite into the page
+ * @param {string} url - URL for the SVG sprite
+ * @param {string} [id] - Unique ID
+ */
+ static loadSprite(url, id) {
+ return utils.loadSprite(url, id);
}
+}
- CustomEvent.prototype = window.Event.prototype;
-
- window.CustomEvent = CustomEvent;
-})();
+export default Plyr;