aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/plyr.js5341
1 files changed, 3210 insertions, 2131 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 352e0114..c41d564b 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,656 +1,1022 @@
// ==========================================================================
// Plyr
-// plyr.js v2.0.13
-// https://github.com/sampotts/plyr
+// plyr.js v3.0.0
+// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
-// Credits: http://paypal.github.io/accessible-html5-video-player/
-// ==========================================================================
-;(function(root, factory) {
+(function(root, factory) {
'use strict';
- /*global define,module*/
+ /* 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); });
+ define([], function() {
+ return factory(root, document);
+ });
} else {
// Browser globals (root is window)
- root.plyr = factory(root, document);
+ root.Plyr = factory(root, document);
}
}(typeof window !== 'undefined' ? window : this, function(window, document) {
'use strict';
+ /* global jQuery */
// Globals
- var fullscreen,
- scroll = { x: 0, y: 0 },
+ var 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.13/plyr.svg',
- blankUrl: 'https://cdn.selz.com/plyr/blank.mp4',
- clickToPlay: true,
- hideControls: true,
- showPosterOnEnd: false,
- disableContextMenu: true,
- keyboardShorcuts: {
- focused: true,
- global: false
+ var defaults = {
+ enabled: true,
+ title: '',
+ debug: false,
+ autoplay: false,
+ seekTime: 10,
+ volume: 10,
+ duration: null,
+ displayDuration: true,
+ loadSprite: true,
+ iconPrefix: 'plyr',
+ iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
+ clickToPlay: true,
+ hideControls: true,
+ showPosterOnEnd: false,
+ disableContextMenu: true,
+
+ // Quality settings
+ quality: {
+ default: 'auto',
+ selected: 'auto'
},
+
+ // Set loops
+ loop: {
+ active: false,
+ start: 0,
+ end: null,
+ indicator: {
+ start: 0,
+ end: 0
+ }
+ },
+
+ // Speed up/down
+ speed: {
+ selected: 1.0,
+ options: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
+ },
+
+ // Keyboard shortcut settings
+ keyboardShortcuts: {
+ focused: true,
+ global: false
+ },
+
+ // Display tooltips
tooltips: {
- controls: false,
- seek: true
+ controls: false,
+ seek: true
},
+
+ // Selectors
+ // Change these to match your template if using custom HTML
selectors: {
- html5: 'video, audio',
- embed: '[data-type]',
- editable: 'input, textarea, select, [contenteditable]',
- container: '.plyr',
+ editable: 'input, textarea, select, [contenteditable]',
+ container: '.plyr',
controls: {
- container: null,
- wrapper: '.plyr__controls'
+ container: null,
+ wrapper: '.plyr__controls'
},
- labels: '[data-plyr]',
+ 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"]'
+ 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"]',
+ pip: '[data-plyr="pip"]',
+ airplay: '[data-plyr="airplay"]',
+ settings: '[data-plyr="settings"]',
+ loop: '[data-plyr="loop"]'
},
- volume: {
- input: '[data-plyr="volume"]',
- display: '.plyr__volume--display'
+ inputs: {
+ seek: '[data-plyr="seek"]',
+ volume: '[data-plyr="volume"]',
+ speed: '[data-plyr="speed"]',
+ language: '[data-plyr="language"]',
+ quality: '[data-plyr="quality"]'
},
- progress: {
- container: '.plyr__progress',
- buffer: '.plyr__progress--buffer',
- played: '.plyr__progress--played'
+ display: {
+ currentTime: '.plyr__time--current',
+ duration: '.plyr__time--duration',
+ buffer: '.plyr__progress--buffer',
+ played: '.plyr__progress--played',
+ loop: '.plyr__progress--loop',
+ volume: '.plyr__volume--display',
},
- captions: '.plyr__captions',
- currentTime: '.plyr__time--current',
- duration: '.plyr__time--duration'
+ progress: '.plyr__progress',
+ captions: '.plyr__captions',
+ menu: {
+ quality: '.js-plyr__menu__list--quality'
+ }
},
+
+ // Class hooks added to the player in different states
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',
+ setup: 'plyr--setup',
+ ready: 'plyr--ready',
+ videoWrapper: 'plyr__video-wrapper',
+ embedWrapper: 'plyr__video-embed',
+ control: 'plyr__control',
+ 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',
+ menu: {
+ value: 'plyr__menu__value',
+ badge: 'plyr__badge'
+ },
captions: {
- enabled: 'plyr--captions-enabled',
- active: 'plyr--captions-active'
+ enabled: 'plyr--captions-enabled',
+ active: 'plyr--captions-active'
},
fullscreen: {
- enabled: 'plyr--fullscreen-enabled',
- active: 'plyr--fullscreen-active'
+ enabled: 'plyr--fullscreen-enabled',
+ active: 'plyr--fullscreen-active'
+ },
+ pip: {
+ enabled: 'plyr--pip-enabled',
+ active: 'plyr--pip-active'
+ },
+ airplay: {
+ enabled: 'plyr--airplay-enabled',
+ active: 'plyr--airplay-active'
},
- tabFocus: 'tab-focus'
+ tabFocus: 'tab-focus'
},
+
+ // Captions settings
captions: {
- defaultActive: false
+ active: false,
+ language: window.navigator.language.split("-")[0]
},
+
+ // Fullscreen settings
fullscreen: {
- enabled: true,
- fallback: true,
- allowAudio: false
+ enabled: true,
+ fallback: true,
+ allowAudio: false
},
+
+ // Local storage
storage: {
- enabled: true,
- key: 'plyr'
+ enabled: true,
+ key: 'plyr'
},
- controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
+
+ // Default controls
+ controls: [
+ 'play-large',
+ 'play',
+ 'progress',
+ 'current-time',
+ 'mute',
+ 'volume',
+ 'captions',
+ 'settings',
+ 'pip',
+ 'airplay',
+ 'fullscreen'
+ ],
+
+ // Localisation
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']
+ restart: 'Restart',
+ rewind: 'Rewind {seektime} secs',
+ play: 'Play',
+ pause: 'Pause',
+ forward: 'Forward {seektime} secs',
+ seek: 'Seek',
+ played: 'Played',
+ buffered: 'Buffered',
+ currentTime: 'Current time',
+ duration: 'Duration',
+ volume: 'Volume',
+ toggleMute: 'Toggle Mute',
+ toggleCaptions: 'Toggle Captions',
+ toggleFullscreen: 'Toggle Fullscreen',
+ frameTitle: 'Player for {title}',
+ captions: 'Captions',
+ settings: 'Settings',
+ speed: 'Speed',
+ quality: 'Quality',
+ loop: 'Loop',
+ start: 'Start',
+ end: 'End',
+ all: 'All',
+ reset: 'Reset',
+ none: 'None'
},
+
// URLs
urls: {
vimeo: {
- api: 'https://player.vimeo.com/api/player.js',
+ api: 'https://player.vimeo.com/api/player.js',
},
youtube: {
- api: 'https://www.youtube.com/iframe_api'
+ api: 'https://www.youtube.com/iframe_api'
},
soundcloud: {
- api: 'https://w.soundcloud.com/player/api.js'
+ 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
+ seek: null,
+ play: null,
+ pause: null,
+ restart: null,
+ rewind: null,
+ forward: null,
+ mute: null,
+ volume: null,
+ captions: null,
+ fullscreen: null,
+ pip: null,
+ airplay: null,
+ speed: null,
+ quality: null,
+ loop: null,
+ language: null
},
- // 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'],
+
+ // Events to watch on HTML5 media elements and bubble
+ // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
+ events: [
+ 'ended',
+ 'progress',
+ 'stalled',
+ 'playing',
+ 'waiting',
+ 'canplay',
+ 'canplaythrough',
+ 'loadstart',
+ 'loadeddata',
+ 'loadedmetadata',
+ 'timeupdate',
+ 'volumechange',
+ 'play',
+ 'pause',
+ 'error',
+ 'seeking',
+ 'seeked',
+ 'emptied'
+ ],
+
// Logging
- logPrefix: '[Plyr]'
+ logPrefix: ''
+ };
+
+ // Types
+ var types = {
+ embed: ['youtube', 'vimeo', 'soundcloud'],
+ html5: ['video', 'audio']
};
- // 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) {
+ // Utilities outside of Plyr scope
+ var utils = {
+ // Check variable types
+ is: {
+ object: function(input) {
+ return input !== null && typeof(input) === 'object' && input.constructor === Object;
+ },
+ array: function(input) {
+ return input !== null && Array.isArray(input);
+ },
+ 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';
+ },
+ event: function(input) {
+ return input !== null && input instanceof Event;
+ },
+ cue: function(input) {
+ return input !== null && (input instanceof window.TextTrackCue || input instanceof window.VTTCue);
+ },
+ track: function(input) {
+ return input !== null && input instanceof window.TextTrack;
+ },
+ undefined: function(input) {
+ return input !== null && typeof input === 'undefined';
+ },
+ empty: function(input) {
+ return input === null || this.undefined(input) || ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) || (this.object(input) && Object.keys(input).length === 0);
+ }
+ },
+
+ // Credits: http://paypal.github.io/accessible-html5-video-player/
+ // Unfortunately, due to mixed support, UA sniffing is required
+ getBrowser: function() {
+ var ua = navigator.userAgent;
+ var name = navigator.appName;
+ var fullVersion = '' + parseFloat(navigator.appVersion);
+ var majorVersion = parseInt(navigator.appVersion, 10);
+ var nameOffset;
+ var verOffset;
+ var ix;
+ var isIE = false;
+ var isFirefox = false;
+ var isChrome = false;
+ var 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;
+ }
}
- } 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);
}
- }
- // 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);
- }
+ // Get major version
+ majorVersion = parseInt('' + fullVersion, 10);
+ if (isNaN(majorVersion)) {
+ fullVersion = '' + parseFloat(navigator.appVersion);
+ majorVersion = parseInt(navigator.appVersion, 10);
+ }
- // Get major version
- majorVersion = parseInt('' + fullVersion, 10);
- if (isNaN(majorVersion)) {
- fullVersion = '' + parseFloat(navigator.appVersion);
- majorVersion = parseInt(navigator.appVersion, 10);
- }
+ // Return data
+ return {
+ name: name,
+ version: majorVersion,
+ isIE: isIE,
+ isOldIE: (isIE && majorVersion <= 9),
+ isFirefox: isFirefox,
+ isChrome: isChrome,
+ isSafari: isSafari,
+ isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
+ isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
+ };
+ },
- // 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
- };
- }
+ // Check for support
+ // Basic functionality vs full UI
+ checkSupport: function(type, inline) {
+ var basic = false;
+ var full = false;
+ var browser = utils.getBrowser();
+ var playsInline = (browser.isIPhone && inline && support.inline);
+
+ switch (type) {
+ case 'video':
+ basic = support.video;
+ full = basic && !browser.isOldIE && (!browser.isIPhone || playsInline);
+ break;
+
+ case 'audio':
+ basic = support.audio;
+ full = basic && !browser.isOldIE;
+ break;
+
+ case 'youtube':
+ basic = support.video;
+ full = basic && !browser.isOldIE && (!browser.isIPhone || playsInline);
+ break;
- // 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;
+ case 'vimeo':
+ case 'soundcloud':
+ basic = true;
+ full = (!browser.isOldIE && !browser.isIos);
+ break;
- 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/, ''));
+ default:
+ basic = (support.audio && support.video);
+ full = (basic && !browser.isOldIE);
}
- } 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/, ''));
+
+ return {
+ basic: basic,
+ full: full
+ };
+ },
+
+ // Inject a script
+ injectScript: function(url) {
+ // Check script is not already referenced
+ if (document.querySelectorAll('script[src="' + url + '"]').length) {
+ return;
}
- }
- // If we got this far, we're stuffed
- return false;
- }
+ var tag = document.createElement('script');
+ tag.src = url;
- // Inject a script
- function _injectScript(source) {
- if (document.querySelectorAll('script[src="' + source + '"]').length) {
- return;
- }
+ var firstScriptTag = document.getElementsByTagName('script')[0];
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+ },
- var tag = document.createElement('script');
- tag.src = source;
- var firstScriptTag = document.getElementsByTagName('script')[0];
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- }
+ // Determine if we're in an iframe
+ inFrame: function() {
+ try {
+ return window.self !== window.top;
+ } catch (e) {
+ return true;
+ }
+ },
- // Element exists in an array
- function _inArray(haystack, needle) {
- return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1);
- }
+ // Element exists in an array
+ inArray: function(haystack, needle) {
+ return utils.is.array(haystack) && haystack.indexOf(needle) !== -1;
+ },
- // Replace all
- function _replaceAll(string, find, replace) {
- return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
- }
+ // Replace all
+ replaceAll: function(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];
- }
+ // Wrap an element
+ wrap: function(elements, wrapper) {
+ // Convert `elements` to an array, if necessary.
+ if (!elements.length) {
+ elements = [elements];
+ }
- // 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];
+ // 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;
+ // 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);
+ // 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);
+ // 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;
}
+ },
- return child;
- }
- }
+ // Remove an element
+ removeElement: function(element) {
+ if (!utils.is.htmlElement(element) ||
+ !utils.is.htmlElement(element.parentNode)) {
+ 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;
+ element.parentNode.removeChild(element);
+ },
- // Move all children out of the element
- while (wrapper.firstChild) {
- parent.insertBefore(wrapper.firstChild, wrapper);
- }
+ // Prepend child
+ prependChild: function(parent, element) {
+ parent.insertBefore(element, parent.firstChild);
+ },
- // Remove the empty element
- parent.removeChild(wrapper);
- }*/
+ // Inaert an element after another
+ insertAfter: function(element, target) {
+ target.parentNode.insertBefore(element, target.nextSibling);
+ },
- // Remove an element
- function _remove(element) {
- if (!element) {
- return;
- }
- element.parentNode.removeChild(element);
- }
+ // Create a DocumentFragment
+ createElement: function(type, attributes, text) {
+ // Create a new <element>
+ var element = document.createElement(type);
- // Prepend child
- function _prependChild(parent, element) {
- parent.insertBefore(element, parent.firstChild);
- }
+ // Set all passed attributes
+ if (utils.is.object(attributes)) {
+ utils.setAttributes(element, attributes);
+ }
- // Set attributes
- function _setAttributes(element, attributes) {
- for (var key in attributes) {
- element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]);
- }
- }
+ // Add text node
+ if (utils.is.string(text)) {
+ element.textContent = text;
+ }
- // Insert a HTML element
- function _insertElement(type, parent, attributes) {
- // Create a new <element>
- var element = document.createElement(type);
+ // Return built element
+ return element;
+ },
- // Set all passed attributes
- _setAttributes(element, attributes);
+ // Insert a DocumentFragment
+ insertElement: function(type, parent, attributes, text) {
+ // Create a new <element>
+ var element = utils.createElement(type, attributes, text);
- // Inject the new element
- _prependChild(parent, element);
- }
+ // Inject the new element
+ utils.prependChild(parent, element);
+ },
- // Get a classname from selector
- function _getClassname(selector) {
- return selector.replace('.', '');
- }
+ // Remove all child elements
+ emptyElement: function(element) {
+ var length = element.childNodes.length;
+ while (length--) {
+ element.removeChild(element.lastChild);
+ }
+ },
- // 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 : '');
+ // Set attributes
+ setAttributes: function(element, attributes) {
+ for (var key in attributes) {
+ element.setAttribute(key, attributes[key]);
}
- }
- }
+ },
- // 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);
+ // Get an attribute object from a string selector
+ getAttributesFromSelector: function(selector, existingAttributes) {
+ // For example:
+ // '.test' to { class: 'test' }
+ // '#test' to { id: 'test' }
+ // '[data-test="test"]' to { 'data-test': 'test' }
+
+ if (!utils.is.string(selector) || utils.is.empty(selector)) {
+ return {};
}
- }
- return false;
- }
- // Element matches selector
- function _matches(element, selector) {
- var p = Element.prototype;
+ var attributes = {};
- var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
- return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
- };
+ selector.split(',').forEach(function(selector) {
+ // Remove whitespace
+ selector = selector.trim();
- return f.call(element, selector);
- }
+ // Get the first character
+ var start = selector.charAt(0);
- // Bind along with custom handler
- function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
- _on(element, eventName, function(event) {
- if (userListener) {
- userListener.apply(element, [event]);
- }
- defaultListener.apply(element, [event]);
- }, useCapture);
- }
+ switch (start) {
+ case '.':
+ // Classname selector
+ var className = selector.replace('.', '');
- // Toggle event listener
- function _toggleListener(element, events, callback, toggle, useCapture) {
- var eventList = events.split(' ');
+ // Add to existing classname
+ if (utils.is.object(existingAttributes) && utils.is.string(existingAttributes.class)) {
+ existingAttributes.class += ' ' + className;
+ }
- // Whether the listener is a capturing listener or not
- // Default to false
- if (!_is.boolean(useCapture)) {
- useCapture = false;
- }
+ attributes.class = className;
+ break;
+
+ case '#':
+ // ID selector
+ attributes.id = selector.replace('#', '');
+ break;
+
+ case '[':
+ // Strip the []
+ selector = selector.replace(/[\[\]]/g, '');
+
+ // Get the parts if
+ var parts = selector.split('=');
+ var key = parts[0];
+
+ // Get the value if provided
+ var value = parts.length > 1 ? parts[1].replace(/[\"\']/g, '') : '';
+
+ // Attribute selector
+ attributes[key] = value;
- // 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]);
+ break;
}
- }
- 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);
- }
- }
+ return attributes;
+ },
- // Bind event
- function _on(element, events, callback, useCapture) {
- if (element) {
- _toggleListener(element, events, callback, true, useCapture);
- }
- }
+ // Toggle class on an element
+ toggleClass: function(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 : '');
+ }
+ }
+ },
- // Unbind event
- /*function _off(element, events, callback, useCapture) {
- if (element) {
- _toggleListener(element, events, callback, false, useCapture);
- }
- }*/
+ // Has class name
+ hasClass: function(element, className) {
+ if (element) {
+ if (element.classList) {
+ return element.classList.contains(className);
+ } else {
+ return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
+ }
+ }
+ return false;
+ },
- // Trigger event
- function _event(element, type, bubbles, properties) {
- // Bail if no element
- if (!element || !type) {
- return;
- }
+ // Element matches selector
+ matches: function(element, selector) {
+ var prototype = Element.prototype;
- // Default bubbles to false
- if (!_is.boolean(bubbles)) {
- bubbles = false;
- }
+ var matches = prototype.matches ||
+ prototype.webkitMatchesSelector ||
+ prototype.mozMatchesSelector ||
+ prototype.msMatchesSelector ||
+ function(selector) {
+ return [].indexOf.call(document.querySelectorAll(selector), this) !== -1;
+ };
- // Create and dispatch the event
- var event = new CustomEvent(type, {
- bubbles: bubbles,
- detail: properties
- });
+ return matches.call(element, selector);
+ },
- // Dispatch the event
- element.dispatchEvent(event);
- }
+ // Get the focused element
+ getFocusElement: function() {
+ var focused = document.activeElement;
- // 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;
- }
+ if (!focused || focused === document.body) {
+ focused = null;
+ } else {
+ focused = document.querySelector(':focus');
+ }
- // Get state
- state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
+ return focused;
+ },
- // Set the attribute on target
- target.setAttribute('aria-pressed', state);
+ // Bind along with custom handler
+ proxy: function(element, eventName, customListener, defaultListener, passive, capture) {
+ utils.on(element, eventName, function(event) {
+ if (customListener) {
+ customListener.apply(element, [event]);
+ }
+ defaultListener.apply(element, [event]);
+ }, passive, capture);
+ },
- return state;
- }
+ // Toggle event listener
+ toggleListener: function(elements, events, callback, toggle, passive, capture) {
+ events = events.split(' ');
- // Get percentage
- function _getPercentage(current, max) {
- if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
- return 0;
- }
- return ((current / max) * 100).toFixed(2);
- }
+ // Whether the listener is a capturing listener or not
+ // Default to false
+ if (!utils.is.boolean(capture)) {
+ capture = false;
+ }
- // 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;
+ // Whether the listener can be passive (i.e. default never prevented)
+ // Default to true
+ if (!utils.is.boolean(passive)) {
+ passive = true;
+ }
- // Bail if nothing to merge
- if (!objects.length) {
- return;
- }
+ // If a nodelist is passed, call itself on each node
+ if (elements instanceof NodeList) {
+ // Convert arguments to Array
+ // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments
+ var args = arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments);
- // Return first if specified but nothing to merge
- if (objects.length === 1) {
- return objects[0];
- }
+ // Remove the first argument (elements) as we replace it
+ args.shift();
- // First object is the destination
- var destination = Array.prototype.shift.call(objects),
- length = objects.length;
+ // Create listener for each node
+ [].forEach.call(elements, function(element) {
+ if (element instanceof Node) {
+ utils.toggleListener.apply(null, [element].concat(args));
+ }
+ });
- // Loop through all objects to merge
- for (var i = 0; i < length; i++) {
- var source = objects[i];
+ return;
+ }
- 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];
- }
+ // Build options
+ // Default to just capture boolean
+ var options = capture;
+
+ // If passive events listeners are supported
+ if (support.passiveListeners) {
+ options = {
+ passive: passive,
+ capture: capture
+ };
}
- }
- return destination;
- }
+ // If a single node is passed, bind the event listener
+ events.forEach(function(event) {
+ elements[toggle ? 'addEventListener' : 'removeEventListener'](event, callback, options);
+ });
+ },
- // Check variable types
- var _is = {
- object: function(input) {
- return input !== null && typeof(input) === 'object';
+ // Bind event handler
+ on: function(element, events, callback, passive, capture) {
+ if (!utils.is.undefined(element)) {
+ utils.toggleListener(element, events, callback, true, passive, capture);
+ }
},
- array: function(input) {
- return input !== null && (typeof(input) === 'object' && input.constructor === Array);
+
+ // Unbind event handler
+ off: function(element, events, callback, passive, capture) {
+ if (!utils.is.undefined(element)) {
+ utils.toggleListener(element, events, callback, false, passive, capture);
+ }
},
- number: function(input) {
- return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
+
+ // Trigger event
+ event: function(element, type, bubbles, properties) {
+ // Bail if no element
+ if (!element || !type) {
+ return;
+ }
+
+ // Default bubbles to false
+ if (!utils.is.boolean(bubbles)) {
+ bubbles = false;
+ }
+
+ // Create CustomEvent constructor
+ var CustomEvent;
+ if (utils.is.function(window.CustomEvent)) {
+ CustomEvent = window.CustomEvent;
+ } else {
+ // Polyfill CustomEvent
+ // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+ CustomEvent = function(event, params) {
+ params = params || {
+ bubbles: false,
+ cancelable: false,
+ detail: undefined
+ };
+ var custom = document.createEvent('CustomEvent');
+ custom.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return custom;
+ };
+ CustomEvent.prototype = window.Event.prototype;
+ }
+
+ // Create and dispatch the event
+ var event = new CustomEvent(type, {
+ bubbles: bubbles,
+ detail: properties
+ });
+
+ // Dispatch the event
+ element.dispatchEvent(event);
},
- string: function(input) {
- return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
+
+ // Toggle aria-pressed state on a toggle button
+ // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
+ toggleState: function(target, state) {
+ // Bail if no target
+ if (!target) {
+ return;
+ }
+
+ // Get state
+ state = (utils.is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
+
+ // Set the attribute on target
+ target.setAttribute('aria-pressed', state);
+
+ return state;
},
- boolean: function(input) {
- return input !== null && typeof input === 'boolean';
+
+ // Get percentage
+ getPercentage: function(current, max) {
+ if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
+ return 0;
+ }
+ return ((current / max) * 100).toFixed(2);
},
- nodeList: function(input) {
- return input !== null && input instanceof NodeList;
+
+ // 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)
+ extend: function() {
+ // Get arguments
+ var objects = arguments;
+
+ // Bail if nothing to merge
+ if (!objects.length) {
+ 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);
+ if (!utils.is.object(destination)) {
+ destination = {};
+ }
+
+ var length = objects.length;
+
+ // Loop through all objects to merge
+ for (var i = 0; i < length; i++) {
+ var source = objects[i];
+
+ if (!utils.is.object(source)) {
+ source = {};
+ }
+
+ for (var property in source) {
+ if (source[property] && source[property].constructor && source[property].constructor === Object) {
+ destination[property] = destination[property] || {};
+ utils.extend(destination[property], source[property]);
+ } else {
+ destination[property] = source[property];
+ }
+ }
+ }
+
+ return destination;
},
- htmlElement: function(input) {
- return input !== null && input instanceof HTMLElement;
+
+ // Parse YouTube ID from url
+ parseYouTubeId: function(url) {
+ var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+ return url.match(regex) ? RegExp.$2 : url;
},
- function: function(input) {
- return input !== null && typeof input === 'function';
+
+ // Remove HTML from a string
+ stripHTML: function(source) {
+ var fragment = document.createDocumentFragment();
+ var element = document.createElement('div');
+ fragment.appendChild(element);
+ element.innerHTML = source;
+ return fragment.firstChild.innerText;
},
- 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;
- }
+ // Load an SVG sprite
+ loadSprite: function(url, id) {
+ if (typeof url !== 'string') {
+ return;
+ }
- // Parse Vimeo ID from url
- function _parseVimeoId(url) {
- var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
- return (url.match(regex)) ? RegExp.$2 : url;
- }
+ var prefix = 'cache-';
+ var hasId = typeof id === 'string';
+ var isCached = false;
- // 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(' ');
-
- // Check for native support
- if (!_is.undefined(document.cancelFullScreen)) {
- fullscreen.supportsFullScreen = true;
- } 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;
+ function updateSprite(container, data) {
+ // Inject content
+ container.innerHTML = data;
+
+ // Inject the SVG to the body
+ document.body.insertBefore(container, document.body.childNodes[0]);
+ }
+
+ // Only load once
+ if (!hasId || !document.querySelectorAll('#' + id).length) {
+ // Create container
+ var container = document.createElement('div');
+ container.setAttribute('hidden', '');
+
+ if (hasId) {
+ container.setAttribute('id', id);
+ }
+
+ // Check in cache
+ if (support.storage) {
+ var cached = window.localStorage.getItem(prefix + id);
+ isCached = cached !== null;
+
+ if (isCached) {
+ var data = JSON.parse(cached);
+ updateSprite(container, data.content);
+ }
+ }
+
+ // ReSharper disable once InconsistentNaming
+ var xhr = new XMLHttpRequest();
+
+ // XHR for Chrome/Firefox/Opera/Safari
+ if ('withCredentials' in xhr) {
+ xhr.open('GET', url, true);
+ } else {
+ return;
}
+
+ // Once loaded, inject to container and body
+ xhr.onload = function() {
+ if (support.storage) {
+ window.localStorage.setItem(prefix + id, JSON.stringify({
+ content: xhr.responseText
+ }));
+ }
+
+ updateSprite(container, xhr.responseText);
+ };
+
+ xhr.send();
}
}
+ };
- // Update methods to do something useful
- if (fullscreen.supportsFullScreen) {
+ // Fullscreen API
+ var fullscreen = (function() {
+ // Determine the prefix
+ var prefix = (function() {
+ var value = false;
+
+ if (utils.is.function(document.cancelFullScreen)) {
+ value = '';
+ } else {
+ // Check for fullscreen support by vendor prefix
+ ['webkit', 'o', 'moz', 'ms', 'khtml'].some(function(prefix) {
+ if (utils.is.function(document[prefix + 'CancelFullScreen'])) {
+ value = prefix;
+ return true;
+ } else if (utils.is.function(document.msExitFullscreen) && document.msFullscreenEnabled) {
+ // Special case for MS (when isn't it?)
+ value = 'ms';
+ return true;
+ }
+ });
+ }
+
+ return value;
+ })();
+
+ return {
+ prefix: prefix,
// 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');
+ eventType: (prefix === 'ms' ? 'MSFullscreenChange' : prefix + 'fullscreenchange'),
- fullscreen.isFullScreen = function(element) {
- if (_is.undefined(element)) {
+ // Is an element fullscreen
+ isFullScreen: function(element) {
+ if (!support.fullscreen) {
+ return false;
+ }
+ if (utils.is.undefined(element)) {
element = document.body;
}
switch (this.prefix) {
@@ -659,783 +1025,1374 @@
case 'moz':
return document.mozFullScreenElement === element;
default:
- return document[this.prefix + 'FullscreenElement'] === element;
+ return document[prefix + 'FullscreenElement'] === element;
}
- };
- fullscreen.requestFullScreen = function(element) {
- if (_is.undefined(element)) {
+ },
+ requestFullScreen: function(element) {
+ if (!support.fullscreen) {
+ return false;
+ }
+ if (!utils.is.htmlElement(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'];
- };
- }
+ return (prefix === '') ? element.requestFullScreen() : element[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+ },
+ cancelFullScreen: function() {
+ if (!support.fullscreen) {
+ return false;
+ }
+ return (prefix === '') ? document.cancelFullScreen() : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+ },
+ element: function() {
+ if (!support.fullscreen) {
+ return null;
+ }
+ return (prefix === '') ? document.fullscreenElement : document[prefix + 'FullscreenElement'];
+ }
+ };
+ })();
- return fullscreen;
- }
+ // Check for feature support
+ var support = {
+ // Basic support
+ audio: 'canPlayType' in document.createElement('audio'),
+ video: 'canPlayType' in document.createElement('video'),
+
+ // Fullscreen support and set prefix
+ fullscreen: fullscreen.prefix !== false,
- // Local storage
- var _storage = {
- supported: (function() {
+ // Local storage
+ // We can't assume if local storage is present that we can use it
+ storage: (function() {
if (!('localStorage' in window)) {
return false;
}
// Try to use it (it might be disabled, e.g. user is in private/porn mode)
- // see: https://github.com/sampotts/plyr/issues/131
+ // see: https://github.com/Selz/plyr/issues/131
+ var test = '___test';
try {
- // Add test item
- window.localStorage.setItem('___test', 'OK');
+ window.localStorage.setItem(test, test);
+ window.localStorage.removeItem(test);
+ return true;
+ } catch (e) {
+ return false;
+ }
+
+ return false;
+ })(),
- // Get the test item
- var result = window.localStorage.getItem('___test');
+ // Picture-in-picture support
+ // Safari only currently
+ pip: (function() {
+ var browser = utils.getBrowser();
+ return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode);
+ })(),
- // Clean up
- window.localStorage.removeItem('___test');
+ // Airplay support
+ // Safari only currently
+ airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent),
- // Check if value matches
- return (result === 'OK');
- }
- catch (e) {
+ // Inline playback support
+ // https://webkit.org/blog/6784/new-video-policies-for-ios/
+ inline: 'playsInline' in document.createElement('video'),
+
+ // Check for mime type support against a player instance
+ // Credits: http://diveintohtml5.info/everything.html
+ // Related: http://www.leanbackplayer.com/test/h5mt.html
+ mime: function(player, type) {
+ var media = player.media;
+
+ try {
+ // Bail if no checking function
+ if (!utils.is.function(media.canPlayType)) {
+ return false;
+ }
+
+ // Type specific checks
+ if (player.type === 'video') {
+ switch (type) {
+ case 'video/webm':
+ return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '');
+ case 'video/mp4':
+ return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '');
+ case 'video/ogg':
+ return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '');
+ }
+ } else if (player.type === 'audio') {
+ switch (type) {
+ case 'audio/mpeg':
+ return media.canPlayType('audio/mpeg;').replace(/no/, '');
+ case 'audio/ogg':
+ return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '');
+ case 'audio/wav':
+ return media.canPlayType('audio/wav; codecs="1"').replace(/no/, '');
+ }
+ }
+ } catch (e) {
return false;
}
+ // If we got this far, we're stuffed
return false;
- })()
+ },
+
+ // Check for textTracks support
+ textTracks: 'textTracks' in document.createElement('video'),
+
+ // Check for passive event listener support
+ // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ // https://www.youtube.com/watch?v=NPM6172J22g
+ passiveListeners: (function() {
+ // Test via a getter in the options object to see if the passive property is accessed
+ var supported = false;
+ try {
+ var options = Object.defineProperty({}, 'passive', {
+ get: function() {
+ supported = true;
+ }
+ });
+ window.addEventListener("test", null, options);
+ } catch (e) {}
+
+ return supported;
+ })(),
+
+ // Touch
+ // Remember a device can be moust + touch enabled
+ touch: 'ontouchstart' in document.documentElement
};
// Player instance
- function Plyr(media, config) {
- var plyr = this,
- timers = {},
- api;
+ function Player(element, options) {
+ var player = this;
+ var timers = {};
+ var api = {};
+
+ // String selector passed
+ if (utils.is.string(element)) {
+ element = document.querySelectorAll(element);
+ }
- // Set media
- plyr.media = media;
- var original = media.cloneNode(true);
+ // jQuery, NodeList or Array passed, use first element
+ if ((window.jQuery && element instanceof jQuery) || utils.is.nodeList(element) || utils.is.array(element)) {
+ element = element[0];
+ }
+
+ // Config
+ var config = utils.extend({}, defaults, options, (function() {
+ try {
+ return JSON.parse(element.getAttribute('data-plyr'));
+ } catch (e) {}
+ })());
+
+ // Elements cache
+ player.elements = {
+ container: null,
+ buttons: {},
+ display: {},
+ progress: {},
+ inputs: {},
+ settings: {
+ menu: null,
+ panes: {},
+ tabs: {}
+ },
+ media: element,
+ captions: null
+ };
+
+ // Captions
+ player.captions = {
+ enabled: false,
+ captions: [],
+ tracks: [],
+ currentTrack: null
+ };
+
+ // Fullscreen
+ player.fullscreen = {
+ active: false
+ };
+
+ // Debugging
+ var log = function() {};
+ var warn = function() {};
+ var error = function() {};
+ if (config.debug && 'console' in window) {
+ log = window.console.log;
+ warn = window.console.warn;
+ error = window.console.error;
+ }
+
+ // Log config options and support
+ log('Config', config);
+ log('Support', support);
// Trigger events, with plyr instance passed
- function _triggerEvent(element, type, bubbles, properties) {
- _event(element, type, bubbles, _extend({}, properties, {
+ function trigger(element, type, bubbles, properties) {
+ utils.event(element, type, bubbles, utils.extend({}, properties, {
plyr: api
}));
}
- // Debugging
- function _console(type, args) {
- if (config.debug && window.console) {
- args = Array.prototype.slice.call(args);
+ // Find all elements
+ function getElements(selector) {
+ return player.elements.container.querySelectorAll(selector);
+ }
- if (_is.string(config.logPrefix) && config.logPrefix.length) {
- args.unshift(config.logPrefix);
- }
+ // Find a single element
+ function getElement(selector) {
+ return getElements(selector)[0];
+ }
+
+ function removeElement(element) {
+ // Remove reference from player.elements cache
+ if (utils.is.string(element)) {
+ utils.removeElement(player.elements[element]);
+ player.elements[element] = null;
- console[type].apply(console, args);
+ } else {
+ utils.removeElement(element);
}
}
- var _log = function() { _console('log', arguments) },
- _warn = function() { _console('warn', arguments) };
- // Log config options
- _log('Config', config);
+ // Trap focus inside container
+ function focusTrap() {
+ var tabbables = getElements('input:not([disabled]), button:not([disabled])');
+ var first = tabbables[0];
+ var last = tabbables[tabbables.length - 1];
+
+ function checkFocus(event) {
+ // If it is TAB
+ if (event.which === 9 && player.fullscreen.active) {
+ 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();
+ }
+ }
+ }
+
+ // Bind the handler
+ utils.on(player.elements.container, 'keydown', checkFocus, false);
+ }
+
+ // Add elements to HTML5 media (source, tracks, etc)
+ function insertElements(type, attributes) {
+ if (utils.is.string(attributes)) {
+ utils.insertElement(type, player.elements.media, {
+ src: attributes
+ });
+ } else if (utils.is.array(attributes)) {
+ attributes.forEach(function(attribute) {
+ utils.insertElement(type, player.elements.media, attribute);
+ });
+ }
+ }
// Get icon URL
- function _getIconUrl() {
+ function getIconUrl() {
return {
- url: config.iconUrl,
- absolute: (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE
+ url: config.iconUrl,
+ absolute: (config.iconUrl.indexOf("http") === 0) || player.browser.isIE
};
}
- // Build the default HTML
- function _buildControls() {
- // Create html array
- var html = [],
- iconUrl = _getIconUrl(),
- iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
+ // Create <svg> icon
+ function createIcon(type, attributes) {
+ var namespace = 'http://www.w3.org/2000/svg';
+ var iconUrl = getIconUrl();
+ var 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>'
- );
+ // Create <svg>
+ var icon = document.createElementNS(namespace, 'svg');
+ utils.setAttributes(icon, utils.extend(attributes, {
+ role: 'presentation'
+ }));
+
+ // Create the <use> to reference sprite
+ var use = document.createElementNS(namespace, 'use');
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconPath + '-' + type);
+
+ // Add <use> to <svg>
+ icon.appendChild(use);
+
+ return icon;
+ }
+
+ // Create hidden text label
+ function createLabel(type) {
+ var text = config.i18n[type];
+
+ switch (type) {
+ case 'pip':
+ text = 'PIP';
+ break;
+
+ case 'airplay':
+ text = 'AirPlay';
+ break;
+ }
+
+ return utils.createElement('span', {
+ class: config.classes.hidden
+ }, text);
+ }
+
+ // Create a badge
+ function createBadge(text) {
+ var badge = utils.createElement('span', {
+ class: config.classes.menu.value
+ });
+
+ badge.appendChild(utils.createElement('span', {
+ class: config.classes.menu.badge
+ }, text));
+
+ return badge;
+ }
+
+ // Create a <button>
+ function createButton(type, attributes) {
+ var button = utils.createElement('button');
+ var iconDefault;
+ var iconToggled;
+ var labelKey;
+
+ if (!utils.is.object(attributes)) {
+ attributes = {};
+ }
+
+ if ('class' in attributes) {
+ if (attributes.class.indexOf(config.classes.control) === -1) {
+ attributes.class += ' ' + config.classes.control;
+ }
+ } else {
+ attributes.class = config.classes.control;
+ }
+
+ // Large play button
+ switch (type) {
+ case 'mute':
+ labelKey = 'toggleMute';
+ iconDefault = 'volume';
+ iconToggled = 'muted';
+ break;
+
+ case 'captions':
+ labelKey = 'toggleCaptions';
+ iconDefault = 'captions-off';
+ iconToggled = 'captions-on';
+ break;
+
+ case 'fullscreen':
+ labelKey = 'toggleFullscreen';
+ iconDefault = 'enter-fullscreen';
+ iconToggled = 'exit-fullscreen';
+ break;
+
+ case 'play-large':
+ attributes.class = 'plyr__play-large';
+ type = 'play';
+ labelKey = 'play';
+ iconDefault = 'play';
+ break;
+
+ default:
+ labelKey = type;
+ iconDefault = type;
+ }
+
+ // Merge attributes
+ utils.extend(attributes, utils.getAttributesFromSelector(config.selectors.buttons[type], attributes));
+
+ // Add toggle icon if needed
+ if (utils.is.string(iconToggled)) {
+ button.appendChild(createIcon(iconToggled, {
+ class: 'icon--' + iconToggled
+ }));
}
- html.push('<div class="plyr__controls">');
+ // Add the icon
+ button.appendChild(createIcon(iconDefault));
+
+ // Add the label
+ button.appendChild(createLabel(labelKey));
+
+ // Set element attributes
+ utils.setAttributes(button, attributes);
+
+ player.elements.buttons[type] = button;
+
+ return button;
+ }
+
+ // Create an <input type='range'>
+ function createRange(type, attributes) {
+ // Seek label
+ var label = utils.createElement('label', {
+ for: attributes.id,
+ class: config.classes.hidden
+ }, config.i18n[type]);
+
+ // Seek input
+ var input = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs[type]), {
+ type: 'range',
+ min: 0,
+ max: 100,
+ step: 0.1,
+ value: 0,
+ autocomplete: 'off'
+ }, attributes));
+
+ player.elements.inputs[type] = input;
+
+ return {
+ label: label,
+ input: input
+ }
+ }
+
+ // Create a <progress>
+ function createProgress(type, attributes) {
+ var progress = utils.createElement('progress', utils.extend(utils.getAttributesFromSelector(config.selectors.display[type]), {
+ min: 0,
+ max: 100,
+ value: 0
+ }, attributes));
+
+ // Create the label inside
+ if (type !== 'volume') {
+ progress.appendChild(utils.createElement('span', null, '0'));
+
+ var suffix = '';
+ switch (type) {
+ case 'played':
+ suffix = config.i18n.played;
+ break;
+
+ case 'buffer':
+ suffix = config.i18n.buffered;
+ break;
+ }
+
+ progress.textContent = '% ' + suffix.toLowerCase();
+ }
+
+ player.elements.display[type] = progress;
+
+ return progress;
+ }
+
+ // Create time display
+ function createTime(type) {
+ var container = utils.createElement('span', {
+ class: 'plyr__time'
+ });
+
+ container.appendChild(utils.createElement('span', {
+ class: config.classes.hidden
+ }, config.i18n[type]));
+
+ container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(config.selectors.display[type]), '00:00'));
+
+ player.elements.display[type] = container;
+
+ return container;
+ }
+
+ // Build the default HTML
+ function createControls(data) {
+ // Create the container
+ var controls = utils.createElement('div', utils.getAttributesFromSelector(config.selectors.controls.wrapper));
// 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>'
- );
+ if (utils.inArray(config.controls, 'restart')) {
+ controls.appendChild(createButton('restart'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'rewind')) {
+ controls.appendChild(createButton('rewind'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'play')) {
+ controls.appendChild(createButton('play'));
+ controls.appendChild(createButton('pause'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'fast-forward')) {
+ controls.appendChild(createButton('fast-forward'));
}
// 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>');
+ if (utils.inArray(config.controls, 'progress')) {
+ var container = utils.createElement('span', utils.getAttributesFromSelector(config.selectors.progress));
+
+ // Seek range slider
+ var seek = createRange('seek', {
+ id: 'plyr-seek-' + data.id
+ });
+ container.appendChild(seek.label);
+ container.appendChild(seek.input);
+
+ // TODO: Add loop display indicator
+
+ // Played progress
+ container.appendChild(createProgress('played'));
+
+ // Buffer progress
+ container.appendChild(createProgress('buffer'));
// Seek tooltip
if (config.tooltips.seek) {
- html.push('<span class="plyr__tooltip">00:00</span>');
+ var tooltip = utils.createElement('span', {
+ role: 'tooltip',
+ class: config.classes.tooltip
+ }, '00:00');
+
+ container.appendChild(tooltip);
+ player.elements.display.seekTooltip = tooltip;
}
- // Close
- html.push('</span>');
+ player.elements.progress = container;
+ controls.appendChild(player.elements.progress);
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'current-time')) {
+ controls.appendChild(createTime('currentTime'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'duration')) {
+ controls.appendChild(createTime('duration'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'mute')) {
+ controls.appendChild(createButton('mute'));
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'volume')) {
+ var volume = utils.createElement('span', {
+ class: 'plyr__volume'
+ });
+
+ // Set the attributes
+ var attributes = {
+ max: 10,
+ value: config.volume
+ };
+
+ // Create the volume range slider
+ var range = createRange('volume', utils.extend(attributes, {
+ id: 'plyr-volume-' + data.id
+ }));
+ volume.appendChild(range.label);
+ volume.appendChild(range.input);
+
+ // Create the display progress
+ var progress = createProgress('volume', attributes);
+ volume.appendChild(progress);
+
+ controls.appendChild(volume);
}
// 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>'
- );
+ if (utils.inArray(config.controls, 'captions')) {
+ controls.appendChild(createButton('captions'));
+ }
+
+ // Settings button / menu
+ if (utils.inArray(config.controls, 'settings')) {
+ var menu = utils.createElement('span', utils.extend(utils.getAttributesFromSelector(config.selectors.buttons.settings), {
+ class: 'plyr__menu'
+ }));
+
+ menu.appendChild(createButton('settings', {
+ id: 'plyr-settings-toggle-' + data.id,
+ 'aria-haspopup': true,
+ 'aria-controls': 'plyr-settings-' + data.id,
+ 'aria-expanded': false
+ }));
+
+ var form = utils.createElement('form', {
+ class: 'plyr__menu__container',
+ id: 'plyr-settings-' + data.id,
+ 'aria-hidden': true,
+ 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
+ role: 'tablist',
+ tabindex: -1
+ });
+
+ var inner = utils.createElement('div');
+
+ var home = utils.createElement('div', {
+ id: 'plyr-settings-' + data.id + '-home',
+ 'aria-hidden': false,
+ 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
+ role: 'tabpanel'
+ });
+
+ var tabs = utils.createElement('ul', {
+ role: 'tablist'
+ });
+
+ ['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
+ var tab = utils.createElement('li', {
+ role: 'tab'
+ });
+
+ var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(config.selectors.buttons.settings), {
+ type: 'button',
+ class: config.classes.control + ' ' + config.classes.control + '--forward',
+ id: 'plyr-settings-' + data.id + '-' + type + '-tab',
+ 'aria-haspopup': true,
+ 'aria-controls': 'plyr-settings-' + data.id + '-' + type,
+ 'aria-expanded': false
+ }), config.i18n[type]);
+
+ var value = utils.createElement('span', {
+ class: config.classes.menu.value
+ });
+
+ // Speed contains HTML entities
+ value.innerHTML = data[type];
+
+ button.appendChild(value);
+
+ tab.appendChild(button);
+
+ tabs.appendChild(tab);
+
+ player.elements.settings.tabs[type] = tab;
+ });
+
+ home.appendChild(tabs);
+
+ inner.appendChild(home);
+
+ ['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
+ var pane = utils.createElement('div', {
+ id: 'plyr-settings-' + data.id + '-' + type,
+ 'aria-hidden': true,
+ 'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab',
+ role: 'tabpanel',
+ tabindex: -1
+ });
+
+ var back = utils.createElement('button', {
+ type: 'button',
+ class: config.classes.control + ' ' + config.classes.control + '--back',
+ 'aria-haspopup': true,
+ 'aria-controls': 'plyr-settings-' + data.id + '-home',
+ 'aria-expanded': false
+ }, config.i18n[type]);
+
+ pane.appendChild(back);
+
+ var options = utils.createElement('ul');
+
+ pane.appendChild(options);
+
+ inner.appendChild(pane);
+
+ player.elements.settings.panes[type] = pane;
+ });
+
+ form.appendChild(inner);
+
+ menu.appendChild(form);
+
+ controls.appendChild(menu);
+
+ player.elements.settings.menu = menu;
+ }
+
+ // Picture in picture button
+ if (utils.inArray(config.controls, 'pip') && support.pip) {
+ controls.appendChild(createButton('pip'));
+ }
+
+ // Airplay button
+ if (utils.inArray(config.controls, 'airplay') && support.airplay) {
+ controls.appendChild(createButton('airplay'));
}
// 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 (utils.inArray(config.controls, 'fullscreen')) {
+ controls.appendChild(createButton('fullscreen'));
+ }
+
+ player.elements.controls = controls;
+
+ setLoopMenu();
+ setSpeedMenu();
+
+ return controls;
+ }
+
+ // Set the YouTube quality menu
+ // TODO: Support for HTML5
+ // YouTube: "hd2160", "hd1440", "hd1080", "hd720", "large", "medium", "small", "tiny", "auto"
+ function setQualityMenu(options, current) {
+ var list = player.elements.settings.panes.quality.querySelector('ul');
+
+ // Empty the menu
+ utils.emptyElement(list);
+
+ // Get the badge HTML for HD, 4K etc
+ function getBadge(quality) {
+ var label = "";
+
+ switch (quality) {
+ case 'hd2160':
+ label = '4K';
+ break;
+ case 'hd1440':
+ label = 'WQHD';
+ break;
+ case 'hd1080':
+ label = 'HD';
+ break;
+ case 'hd720':
+ label = 'HD';
+ break;
+ }
+
+ if (!label.length) {
+ return null;
+ }
+
+ return createBadge(label);
+ }
+
+ // Translate the quality key into a nice label
+ function getLabel(quality) {
+ switch (quality) {
+ case 'hd2160':
+ return '2160P';
+ case 'hd1440':
+ return '1440P';
+ case 'hd1080':
+ return '1080P';
+ case 'hd720':
+ return '720P';
+ case 'large':
+ return '480P';
+ case 'medium':
+ return '360P';
+ case 'small':
+ return '240P';
+ default:
+ return 'Auto';
+ }
+ }
+
+ if (utils.is.array(options) && !utils.is.empty(options)) {
+ options.filter(function(quality) {
+ // Remove any unwanted quality levels
+ return !utils.inArray(['tiny', 'small'], quality);
+ }).forEach(function(quality) {
+ var item = utils.createElement('li');
+
+ var label = utils.createElement('label', {
+ class: config.classes.control,
+ for: 'plyr-quality-' + quality
+ });
+
+ var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.quality), {
+ type: 'radio',
+ id: 'plyr-quality-' + quality,
+ name: 'plyr-quality',
+ value: quality,
+ }));
+
+ if (quality === config.quality.selected) {
+ radio.setAttribute('checked', '');
+ }
+
+ label.appendChild(radio);
+ label.appendChild(document.createTextNode(getLabel(quality)));
+
+ var badge = getBadge(quality);
+ if (utils.is.htmlElement(badge)) {
+ label.appendChild(badge);
+ }
+
+ item.appendChild(label);
+
+ list.appendChild(item);
+ });
+ }
+ }
+
+ // Set the looping options
+ function setLoopMenu() {
+ var options = ['start', 'end', 'all', 'reset'];
+ var list = player.elements.settings.panes.loop.querySelector('ul');
+
+ // Empty the menu
+ utils.emptyElement(list);
+
+ options.forEach(function(option) {
+ var item = utils.createElement('li');
+
+ var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(config.selectors.buttons.loop), {
+ type: 'button',
+ class: config.classes.control,
+ 'data-plyr-loop-action': option
+ }), config.i18n[option]);
+
+ if (utils.inArray(['start', 'end'], option)) {
+ var badge = createBadge('0:00');
+ button.appendChild(badge);
+ }
+
+ item.appendChild(button);
+
+ list.appendChild(item);
+ });
+ }
+
+ // Set a list of available captions languages
+ function setCaptionsMenu() {
+ var list = player.elements.settings.panes.captions.querySelector('ul');
+
+ // Empty the menu
+ utils.emptyElement(list);
+
+ // If there's no captions, bail
+ if (utils.is.empty(player.captions.tracks)) {
+ return;
+ }
+
+ // Re-map the tracks into just the data we need
+ var tracks = [].map.call(player.captions.tracks, function(track) {
+ return {
+ language: track.language,
+ badge: true,
+ label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase()
+ }
+ });
+
+ // Add the "None" option to turn off captions
+ tracks.unshift({
+ language: 'off',
+ label: config.i18n.none
+ });
+
+ // Generate options
+ tracks.forEach(function(track) {
+ var item = utils.createElement('li');
+
+ var label = utils.createElement('label', {
+ class: config.classes.control,
+ for: 'plyr-language-' + track.language
+ });
+
+ var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.language), {
+ type: 'radio',
+ id: 'plyr-language-' + track.language,
+ name: 'plyr-language',
+ value: track.language,
+ }));
+
+ if (track.language === config.captions.language.toLowerCase()) {
+ radio.setAttribute('checked', '');
+ }
+
+ label.appendChild(radio);
+ label.appendChild(document.createTextNode(track.label || track.language));
+
+ if (track.badge) {
+ label.appendChild(createBadge(track.language.toUpperCase()));
+ }
+
+ item.appendChild(label);
+
+ list.appendChild(item);
+ });
+ }
+
+ // Set a list of available captions languages
+ function setSpeedMenu(options) {
+ var list = player.elements.settings.panes.speed.querySelector('ul');
+
+ // Empty the menu
+ utils.emptyElement(list);
+
+ // If there's no captions, bail
+ if (!utils.is.array(options)) {
+ options = config.speed.options;
}
- // Close everything
- html.push('</div>');
+ options.forEach(function(speed) {
+ var item = utils.createElement('li');
+
+ var label = utils.createElement('label', {
+ class: config.classes.control,
+ for: 'plyr-speed-' + speed.toString().replace('.', '-')
+ });
- return html.join('');
+ var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.speed), {
+ type: 'radio',
+ id: 'plyr-speed-' + speed.toString().replace('.', '-'),
+ name: 'plyr-speed',
+ value: speed,
+ }));
+
+ if (speed === config.speed.selected) {
+ radio.setAttribute('checked', '');
+ }
+
+ label.appendChild(radio);
+ label.insertAdjacentHTML('beforeend', '&times;' + speed);
+
+ item.appendChild(label);
+
+ list.appendChild(item);
+ });
}
// Setup fullscreen
- function _setupFullscreen() {
- if (!plyr.supported.full) {
+ function setupFullscreen() {
+ if (!player.supported.full) {
return;
}
- if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
+ if ((player.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
- var nativeSupport = fullscreen.supportsFullScreen;
+ var nativeSupport = support.fullscreen;
- if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
- _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
+ if (nativeSupport || (config.fullscreen.fallback && !utils.inFrame())) {
+ log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
// Add styling hook
- _toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
+ utils.toggleClass(player.elements.container, config.classes.fullscreen.enabled, true);
} else {
- _log('Fullscreen not supported and fallback disabled');
+ log('Fullscreen not supported and fallback disabled');
}
// Toggle state
- if (plyr.buttons && plyr.buttons.fullscreen) {
- _toggleState(plyr.buttons.fullscreen, false);
+ if (player.elements.buttons && player.elements.buttons.fullscreen) {
+ utils.toggleState(player.elements.buttons.fullscreen, false);
}
// Setup focus trap
- _focusTrap();
+ focusTrap();
}
}
// Setup captions
- function _setupCaptions() {
- // Bail if not HTML5 video
- if (plyr.type !== 'video') {
+ function setupCaptions(tracks) {
+ // Only Vimeo and HTML5 video supported at this point
+ if (!utils.inArray(['video', 'vimeo'], player.type) || (player.type === 'video' && !support.textTracks)) {
return;
}
// Inject the container
- if (!_getElement(config.selectors.captions)) {
- plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>');
+ if (!utils.is.htmlElement(player.elements.captions)) {
+ player.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(config.selectors.captions));
+ utils.insertAfter(player.elements.captions, player.elements.wrapper);
}
- // Determine if HTML5 textTracks is supported
- plyr.usingTextTracks = false;
- if (plyr.media.textTracks) {
- plyr.usingTextTracks = true;
- }
+ // Get tracks
+ player.captions.tracks = utils.is.array(tracks) ? tracks : player.elements.media.textTracks;
- // Get URL of caption file if exists
- var captionSrc = '',
- kind,
- children = plyr.media.childNodes;
+ // Set the class hook
+ utils.toggleClass(player.elements.container, config.classes.captions.enabled, !utils.is.empty(player.captions.tracks));
- 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');
- }
- }
+ // If no caption file exists, hide container for caption text
+ if (utils.is.empty(player.captions.tracks)) {
+ return;
}
- // 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);
- }
+ // Enable UI
+ showCaptions();
- // 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';
- }
+ if (player.type === 'video') {
+ var language = config.captions.language.toLowerCase();
- // Enable UI
- _showCaptions(plyr);
+ // Turn off native caption rendering to avoid double captions
+ [].forEach.call(player.captions.tracks, function(track) {
+ // Remove previous bindings (if we've changed source or language)
+ utils.off(track, 'cuechange', setActiveCue);
- // 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)) {
+ // Hide captions
+ track.mode = 'hidden';
- // Debugging
- _log('Detected browser with known TextTrack issues - using manual fallback');
+ // If language matches, it's the selected track
+ if (track.language === language) {
+ player.captions.currentTrack = track;
+ }
+ });
- // Set to false so skips to 'manual' captioning
- plyr.usingTextTracks = false;
+ // If we couldn't get the requested language, we get the first
+ if (!utils.is.track(player.captions.currentTrack)) {
+ warn('No language found to match ' + language + ' in tracks');
+ player.captions.currentTrack = player.captions.tracks[0];
}
- // 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 it's a caption or subtitle, render it
+ var track = player.captions.currentTrack;
+ if (utils.is.track(track) && utils.inArray(['captions', 'subtitles'], track.kind)) {
+ utils.on(track, 'cuechange', setActiveCue);
- 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();
+ // If we change the active track while a cue is already displayed we need to update it
+ if (track.activeCues && track.activeCues.length > 0) {
+ setActiveCue(track);
}
}
}
- }
-
- // 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 = '';
+ // Set available languages in list
+ setCaptionsMenu();
+ }
- // Default to empty
- if (_is.undefined(caption)) {
- caption = '';
+ // Get current selected caption language
+ function getLanguage() {
+ if (!support.textTracks || utils.is.empty(player.captions.tracks)) {
+ return 'No Subs';
}
- // Set the span content
- if (_is.string(caption)) {
- content.innerHTML = caption.trim();
+ if (player.captions.enabled) {
+ return player.captions.currentTrack.label;
} else {
- content.appendChild(caption);
+ return 'Disabled';
}
-
- // Set new caption text
- container.appendChild(content);
-
- // Force redraw (for Safari)
- var redraw = container.offsetHeight;
}
- // 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]);
+ // Display active caption if it contains text
+ function setActiveCue(track) {
+ // Get the track from the event if needed
+ if (utils.is.event(track)) {
+ track = track.target;
}
- 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;
- }
+
+ var active = track.activeCues[0];
+
+ // Display a cue, if there is one
+ if (utils.is.cue(active)) {
+ setCaption(active.getCueAsHTML());
+ } else {
+ setCaption();
}
+ }
- // If it's not video, or we're using textTracks, bail.
- if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) {
- return;
+ // Select active caption
+ function setLanguage(language) {
+ // Save config
+ if (utils.is.string(language)) {
+ config.captions.language = language.toLowerCase();
+ } else if (utils.is.event(language)) {
+ config.captions.language = language.target.value.toLowerCase();
}
- // Reset subcount
- plyr.subcount = 0;
+ // Clear caption
+ setCaption();
- // 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;
+ // Re-run setup
+ setupCaptions();
+ }
- // If there's no subs available, bail
- if (!plyr.captions[plyr.subcount]) {
- return;
- }
+ // Set the current caption
+ function setCaption(caption) {
+ if (utils.is.htmlElement(player.elements.captions)) {
+ var content = utils.createElement('span');
- 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;
+ // Empty the container
+ utils.emptyElement(player.elements.captions);
+
+ // Default to empty
+ if (utils.is.undefined(caption)) {
+ caption = '';
}
- }
- // 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];
+ // Set the span content
+ if (utils.is.string(caption)) {
+ content.textContent = caption.trim();
+ } else {
+ content.appendChild(caption);
+ }
+
+ // Set new caption text
+ player.elements.captions.appendChild(content);
- // Render the caption
- _setCaption(plyr.currentCaption);
+ // Force redraw (for Safari)
+ // var redraw = captions.offsetHeight;
} else {
- _setCaption();
+ warn('No captions element to render to');
}
}
// Display captions container and button (for initialization)
- function _showCaptions() {
+ function showCaptions() {
// If there's no caption toggle, bail
- if (!plyr.buttons.captions) {
+ if (!player.elements.buttons.captions) {
return;
}
- _toggleClass(plyr.container, config.classes.captions.enabled, true);
-
// Try to load the value from storage
- var active = plyr.storage.captionsEnabled;
+ var active = player.storage.captions;
// Otherwise fall back to the default config
- if (!_is.boolean(active)) {
- active = config.captions.defaultActive;
+ if (!utils.is.boolean(active)) {
+ active = config.captions.active;
+ } else {
+ config.captions.active = active;
}
if (active) {
- _toggleClass(plyr.container, config.classes.captions.active, true);
- _toggleState(plyr.buttons.captions, true);
+ utils.toggleClass(player.elements.container, config.classes.captions.active, true);
+ utils.toggleState(player.elements.buttons.captions, true);
}
}
- // Find all elements
- function _getElements(selector) {
- return plyr.container.querySelectorAll(selector);
- }
-
- // Find a single element
- function _getElement(selector) {
- return _getElements(selector)[0];
- }
-
- // Determine if we're in an iframe
- function _inFrame() {
- try {
- return window.self !== window.top;
+ // Toggle captions
+ function toggleCaptions(show) {
+ // If there's no full support, or there's no caption toggle
+ if (!player.supported.full || !player.elements.buttons.captions) {
+ return;
}
- catch (e) {
- return true;
+
+ // If the method is called without parameter, toggle based on current value
+ if (!utils.is.boolean(show)) {
+ show = (player.elements.container.className.indexOf(config.classes.captions.active) === -1);
}
- }
- // Trap focus inside container
- function _focusTrap() {
- var tabbables = _getElements('input:not([disabled]), button:not([disabled])'),
- first = tabbables[0],
- last = tabbables[tabbables.length - 1];
+ // Set global
+ player.captions.enabled = show;
- 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();
- }
- }
- }
+ // Toggle state
+ utils.toggleState(player.elements.buttons.captions, player.captions.enabled);
- // Bind the handler
- _on(plyr.container, 'keydown', _checkFocus);
- }
+ // Add class hook
+ utils.toggleClass(player.elements.container, config.classes.captions.active, player.captions.enabled);
- // 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]);
- }
- }
+ // Trigger an event
+ trigger(player.elements.container, player.captions.enabled ? 'captionsenabled' : 'captionsdisabled', true);
+
+ // Save captions state to localStorage
+ updateStorage({
+ captions: player.captions.enabled
+ });
}
// Insert controls
- function _injectControls() {
+ function injectControls() {
// Sprite
if (config.loadSprite) {
- var iconUrl = _getIconUrl();
+ 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");
+ log('AJAX loading absolute SVG sprite' + (player.browser.isIE ? ' (due to IE)' : ''));
+ utils.loadSprite(iconUrl.url, "sprite-plyr");
} else {
- _log('Sprite will be used as external resource directly');
+ 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();
+ // Larger overlaid play button
+ if (utils.inArray(config.controls, 'play-large')) {
+ player.elements.buttons.playLarge = createButton('play-large');
+ player.elements.container.appendChild(player.elements.buttons.playLarge);
}
- // Replace seek time instances
- html = _replaceAll(html, '{seektime}', config.seekTime);
+ // Create a unique ID
+ player.id = Math.floor(Math.random() * 10000);
+
+ // Null by default
+ var controls = null;
- // Replace all id references with random numbers
- html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
+ // HTML passed as the option
+ if (utils.is.string(config.controls)) {
+ controls = config.controls;
+ }
+ // A custom function to build controls
+ // The function can return a HTMLElement or String
+ else if (utils.is.function(config.controls)) {
+ controls = config.controls({
+ id: player.id,
+ seektime: config.seekTime
+ });
+ }
+ // Create controls
+ else {
+ controls = createControls({
+ id: player.id,
+ seektime: config.seekTime,
+ speed: getSpeed(),
+ // TODO: Get current quality
+ quality: 'HD',
+ captions: getLanguage(),
+ // TODO: Get loop
+ loop: 'None'
+ });
+ }
// Controls container
var target;
// Inject to custom location
- if (_is.string(config.selectors.controls.container)) {
+ if (utils.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
+ if (!utils.is.htmlElement(target)) {
+ target = player.elements.container
}
// Inject controls HTML
- target.insertAdjacentHTML('beforeend', html);
+ if (utils.is.htmlElement(controls)) {
+ target.appendChild(controls);
+ } else {
+ target.insertAdjacentHTML('beforeend', controls);
+ }
+
+ // Find the elements if need be
+ if (utils.is.htmlElement(player.elements.controls)) {
+ findElements();
+ }
// Setup tooltips
if (config.tooltips.controls) {
- var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
+ var labels = getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
for (var i = labels.length - 1; i >= 0; i--) {
var label = labels[i];
- _toggleClass(label, config.classes.hidden, false);
- _toggleClass(label, config.classes.tooltip, true);
+ utils.toggleClass(label, config.classes.hidden, false);
+ utils.toggleClass(label, config.classes.tooltip, true);
}
}
}
- // Find the UI controls and store references
- function _findElements() {
+ // Find the UI controls and store references in custom controls
+ // TODO: Allow settings menus with custom controls (coming soon!)
+ function findElements() {
try {
- plyr.controls = _getElement(config.selectors.controls.wrapper);
+ player.elements.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);
+ player.elements.buttons = {
+ play: getElements(config.selectors.buttons.play),
+ pause: getElement(config.selectors.buttons.pause),
+ restart: getElement(config.selectors.buttons.restart),
+ rewind: getElement(config.selectors.buttons.rewind),
+ forward: getElement(config.selectors.buttons.forward),
+ mute: getElement(config.selectors.buttons.mute),
+ pip: getElement(config.selectors.buttons.pip),
+ airplay: getElement(config.selectors.buttons.airplay),
+ settings: getElement(config.selectors.buttons.settings),
+ captions: getElement(config.selectors.buttons.captions),
+ fullscreen: getElement(config.selectors.buttons.fullscreen)
+ };
// Progress
- plyr.progress = {};
- plyr.progress.container = _getElement(config.selectors.progress.container);
+ player.elements.progress = getElement(config.selectors.progress);
- // 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];
+ // Inputs
+ player.elements.inputs = {
+ seek: getElement(config.selectors.inputs.seek),
+ volume: getElement(config.selectors.inputs.volume),
+ };
- // Progress - Played
- plyr.progress.played = _getElement(config.selectors.progress.played);
+ // Display
+ player.elements.display = {
+ buffer: getElement(config.selectors.display.buffer),
+ played: getElement(config.selectors.display.played),
+ volume: getElement(config.selectors.display.volume),
+ duration: getElement(config.selectors.display.duration),
+ currentTime: getElement(config.selectors.display.currentTime),
+ };
// 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);
+ if (utils.is.htmlElement(player.elements.progress)) {
+ player.elements.display.seekTooltip = player.elements.progress.querySelector('.' + config.classes.tooltip);
+ }
return true;
- }
- catch(e) {
- _warn('It looks like there is a problem with your controls HTML');
+ } catch (error) {
+ // Log it
+ warn('It looks like there is a problem with your custom controls HTML', error);
// Restore native video controls
- _toggleNativeControls(true);
+ toggleNativeControls(true);
return false;
}
}
// Toggle style hook
- function _toggleStyleHook() {
- _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
+ function toggleStyleHook() {
+ utils.toggleClass(player.elements.container, config.selectors.container.replace('.', ''), player.supported.full);
}
// Toggle native controls
- function _toggleNativeControls(toggle) {
- if (toggle && _inArray(config.types.html5, plyr.type)) {
- plyr.media.setAttribute('controls', '');
+ function toggleNativeControls(toggle) {
+ if (toggle && utils.inArray(types.html5, player.type)) {
+ player.elements.media.setAttribute('controls', '');
} else {
- plyr.media.removeAttribute('controls');
+ player.elements.media.removeAttribute('controls');
}
}
// Setup aria attribute for play and iframe title
- function _setTitle(iframe) {
+ 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) {
+ if (utils.is.string(config.title) && !utils.is.empty(config.title)) {
label += ', ' + config.title;
// Set container label
- plyr.container.setAttribute('aria-label', config.title);
+ player.elements.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);
+ if (player.supported.full) {
+ if (utils.is.htmlElement(player.elements.buttons.play)) {
+ player.elements.buttons.play.setAttribute('aria-label', label);
+ }
+ if (utils.is.htmlElement(player.elements.buttons.playLarge)) {
+ player.elements.buttons.playLarge.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));
+ // https://github.com/Selz/plyr/issues/124
+ if (utils.is.htmlElement(iframe)) {
+ var title = utils.is.string(config.title) && !utils.is.empty(config.title) ? config.title : 'video';
+ iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', title));
}
}
// Setup localStorage
- function _setupStorage() {
+ function setupStorage() {
var value = null;
- plyr.storage = {};
+ player.storage = {};
// Bail if we don't have localStorage support or it's disabled
- if (!_storage.supported || !config.storage.enabled) {
+ if (!support.storage || !config.storage.enabled) {
return;
}
// Clean up old volume
- // https://github.com/sampotts/plyr/issues/171
+ // https://github.com/Selz/plyr/issues/171
window.localStorage.removeItem('plyr-volume');
// load value from the current key
@@ -1446,264 +2403,277 @@
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
+ // version of player. See: https://github.com/Selz/plyr/pull/313
// Update the key to be JSON
- _updateStorage({volume: parseFloat(value)});
+ updateStorage({
+ volume: parseFloat(value)
+ });
} else {
// Assume it's JSON from this or a later version of plyr
- plyr.storage = JSON.parse(value);
+ player.storage = JSON.parse(value);
}
}
// Save a value back to local storage
- function _updateStorage(value) {
+ function updateStorage(value) {
// Bail if we don't have localStorage support or it's disabled
- if (!_storage.supported || !config.storage.enabled) {
+ if (!support.storage || !config.storage.enabled) {
return;
}
// Update the working copy of the values
- _extend(plyr.storage, value);
+ utils.extend(player.storage, value);
// Update storage
- window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage));
+ window.localStorage.setItem(config.storage.key, JSON.stringify(player.storage));
}
// Setup media
- function _setupMedia() {
+ function setupMedia() {
// If there's no media, bail
- if (!plyr.media) {
- _warn('No media element found!');
+ if (!player.elements.media) {
+ warn('No media element found!');
return;
}
- if (plyr.supported.full) {
+ if (player.supported.full) {
// Add type class
- _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
+ utils.toggleClass(player.elements.container, config.classes.type.replace('{0}', player.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 (utils.inArray(types.embed, player.type)) {
+ utils.toggleClass(player.elements.container, config.classes.type.replace('{0}', 'video'), true);
}
+ // Check for picture-in-picture support
+ utils.toggleClass(player.elements.container, config.classes.pip.enabled, support.pip && player.type === 'video');
+
+ // Check for airplay support
+ utils.toggleClass(player.elements.container, config.classes.airplay.enabled, support.airplay && utils.inArray(types.html5, player.type));
+
// If there's no autoplay attribute, assume the video is stopped and add state class
- _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
+ utils.toggleClass(player.elements.container, config.classes.stopped, config.autoplay);
// Add iOS class
- _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
+ utils.toggleClass(player.elements.container, config.classes.isIos, player.browser.isIos);
// Add touch class
- _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
-
- // Inject the player wrapper
- if (plyr.type === 'video') {
- // Create the wrapper div
- var wrapper = document.createElement('div');
- wrapper.setAttribute('class', config.classes.videoWrapper);
+ utils.toggleClass(player.elements.container, config.classes.isTouch, support.touch);
+ }
- // Wrap the video in a container
- _wrap(plyr.media, wrapper);
+ // Inject the player wrapper
+ if (utils.inArray(['video', 'youtube', 'vimeo'], player.type)) {
+ // Create the wrapper div
+ player.elements.wrapper = utils.createElement('div', {
+ class: config.classes.videoWrapper
+ });
- // Cache the container
- plyr.videoContainer = wrapper;
- }
+ // Wrap the video in a container
+ utils.wrap(player.elements.media, player.elements.wrapper);
}
// Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- _setupEmbed();
+ if (utils.inArray(types.embed, player.type)) {
+ setupEmbed();
}
}
// Setup YouTube/Vimeo
- function _setupEmbed() {
- var container = document.createElement('div'),
- mediaId,
- id = plyr.type + '-' + Math.floor(Math.random() * (10000));
+ function setupEmbed() {
+ //var container = utils.createElement('div');
+ var mediaId;
+ var id = player.type + '-' + Math.floor(Math.random() * (10000));
// Parse IDs from URLs if supplied
- switch (plyr.type) {
+ switch (player.type) {
case 'youtube':
- mediaId = _parseYouTubeId(plyr.embedId);
- break;
-
- case 'vimeo':
- mediaId = _parseVimeoId(plyr.embedId);
+ mediaId = utils.parseYouTubeId(player.embedId);
break;
default:
- mediaId = plyr.embedId;
+ mediaId = player.embedId;
}
// Remove old containers
- var containers = _getElements('[id^="' + plyr.type + '-"]');
+ var containers = getElements('[id^="' + player.type + '-"]');
for (var i = containers.length - 1; i >= 0; i--) {
- _remove(containers[i]);
+ utils.removeElement(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);
+ utils.toggleClass(player.elements.wrapper, config.classes.embedWrapper, true);
+ if (player.type === 'youtube') {
// Set ID
- container.setAttribute('id', id);
+ player.elements.media.setAttribute('id', id);
// Setup API
- if (_is.object(window.YT)) {
- _youTubeReady(mediaId, container);
+ if (utils.is.object(window.YT)) {
+ youTubeReady(mediaId);
} else {
// Load the API
- _injectScript(config.urls.youtube.api);
+ utils.injectScript(config.urls.youtube.api);
// Setup callback for the API
window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
// Add to queue
- window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); });
+ window.onYouTubeReadyCallbacks.push(function() {
+ youTubeReady(mediaId);
+ });
// Set callback to process queue
- window.onYouTubeIframeAPIReady = function () {
- window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
+ 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;
- }
-
+ } else if (player.type === 'vimeo') {
// Set ID
- container.setAttribute('id', id);
+ player.elements.media.setAttribute('id', id);
// Load the API if not already
- if (!_is.object(window.Vimeo)) {
- _injectScript(config.urls.vimeo.api);
+ if (!utils.is.object(window.Vimeo)) {
+ utils.injectScript(config.urls.vimeo.api);
// Wait for fragaloop load
var vimeoTimer = window.setInterval(function() {
- if (_is.object(window.Vimeo)) {
+ if (utils.is.object(window.Vimeo)) {
window.clearInterval(vimeoTimer);
- _vimeoReady(mediaId, container);
+ vimeoReady(mediaId);
}
}, 50);
} else {
- _vimeoReady(mediaId, container);
+ vimeoReady(mediaId);
}
- } else if (plyr.type === 'soundcloud') {
+ } else if (player.type === 'soundcloud') {
// TODO: Currently unsupported and undocumented
// Inject the iframe
- var soundCloud = document.createElement('iframe');
+ var soundCloud = utils.createElement('iframe');
// Watch for iframe load
soundCloud.loaded = false;
- _on(soundCloud, 'load', function() { soundCloud.loaded = true; });
+ utils.on(soundCloud, 'load', function() {
+ soundCloud.loaded = true;
+ });
- _setAttributes(soundCloud, {
- 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
- 'id': id
+ utils.setAttributes(soundCloud, {
+ 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
+ 'id': id
});
- container.appendChild(soundCloud);
- plyr.media.appendChild(container);
+ player.elements.media.appendChild(soundCloud);
// Load the API if not already
if (!window.SC) {
- _injectScript(config.urls.soundcloud.api);
+ utils.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);
+ soundcloudReady.call(soundCloud);
}
}, 50);
}
}
// When embeds are ready
- function _embedReady() {
+ function embedReady() {
// Setup the UI and call ready if full support
- if (plyr.supported.full) {
- _setupInterface();
- _ready();
+ if (player.supported.full) {
+ setupInterface();
+ ready();
}
// Set title
- _setTitle(_getElement('iframe'));
+ setTitle(getElement('iframe'));
}
// Handle YouTube API ready
- function _youTubeReady(videoId, container) {
+ function youTubeReady(videoId) {
// Setup instance
// https://developers.google.com/youtube/iframe_api_reference
- plyr.embed = new window.YT.Player(container.id, {
+ player.embed = new window.YT.Player(player.elements.media.id, {
videoId: videoId,
playerVars: {
- autoplay: (config.autoplay ? 1 : 0),
- controls: (plyr.supported.full ? 0 : 1),
- rel: 0,
- showinfo: 0,
+ autoplay: (config.autoplay ? 1 : 0),
+ controls: (player.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',
+ cc_load_policy: (config.captions.active ? 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
+ disablekb: 1,
+ playsinline: 1,
+ origin: window.location.href
},
events: {
'onError': function(event) {
- _triggerEvent(plyr.container, 'error', true, {
- code: event.data,
- embed: event.target
+ trigger(player.elements.container, 'error', true, {
+ code: event.data,
+ embed: event.target
});
},
+ 'onPlaybackQualityChange': function(event) {
+ // Get the instance
+ var instance = event.target;
+
+ // Get current quality
+ var quality = instance.getPlaybackQuality();
+
+ // var set = player.setPlaybackQuality();
+ console.warn(quality);
+ },
'onReady': function(event) {
// Get the instance
var instance = event.target;
// Create a faux HTML5 API using the YouTube API
- plyr.media.play = function() {
+ player.elements.media.play = function() {
instance.playVideo();
- plyr.media.paused = false;
+ player.elements.media.paused = false;
};
- plyr.media.pause = function() {
+ player.elements.media.pause = function() {
instance.pauseVideo();
- plyr.media.paused = true;
+ player.elements.media.paused = true;
};
- plyr.media.stop = function() {
+ player.elements.media.stop = function() {
instance.stopVideo();
- plyr.media.paused = true;
+ player.elements.media.paused = true;
};
- plyr.media.duration = instance.getDuration();
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
- plyr.media.muted = instance.isMuted();
+ player.elements.media.duration = instance.getDuration();
+ player.elements.media.paused = true;
+ player.elements.media.currentTime = 0;
+ player.elements.media.muted = instance.isMuted();
+
+ // Get available speeds
+ var speed = instance.getPlaybackRate();
+ var speedOptions = instance.getAvailablePlaybackRates();
+ //var set = instance.setPlaybackRate();
+ console.warn(speed, speedOptions);
// Set title
config.title = instance.getVideoData().title;
// Set the tabindex
- if (plyr.supported.full) {
- plyr.media.querySelector('iframe').setAttribute('tabindex', '-1');
+ if (player.supported.full) {
+ player.elements.media.setAttribute('tabindex', -1);
}
// Update UI
- _embedReady();
+ embedReady();
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ trigger(player.elements.media, 'timeupdate');
// Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
+ trigger(player.elements.media, 'durationchange');
// Reset timer
window.clearInterval(timers.buffering);
@@ -1711,22 +2681,22 @@
// Setup buffering
timers.buffering = window.setInterval(function() {
// Get loaded % from YouTube
- plyr.media.buffered = instance.getVideoLoadedFraction();
+ player.elements.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');
+ if (player.elements.media.lastBuffered === null || player.elements.media.lastBuffered < player.elements.media.buffered) {
+ trigger(player.elements.media, 'progress');
}
// Set last buffer point
- plyr.media.lastBuffered = plyr.media.buffered;
+ player.elements.media.lastBuffered = player.elements.media.buffered;
// Bail if we're at 100%
- if (plyr.media.buffered === 1) {
+ if (player.elements.media.buffered === 1) {
window.clearInterval(timers.buffering);
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ trigger(player.elements.media, 'canplaythrough');
}
}, 200);
},
@@ -1746,48 +2716,60 @@
// 5 Video cued
switch (event.data) {
case 0:
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ // YouTube doesn't support loop for a single video, so mimick it.
+ if (config.loop.active) {
+ // YouTube needs a call to `stopVideo` before playing again
+ instance.stopVideo();
+ instance.playVideo();
+ break;
+ }
+ player.elements.media.paused = true;
+ trigger(player.elements.media, 'ended');
break;
case 1:
- plyr.media.paused = false;
+ player.elements.media.paused = false;
// If we were seeking, fire seeked event
- if (plyr.media.seeking) {
- _triggerEvent(plyr.media, 'seeked');
+ if (player.elements.media.seeking) {
+ trigger(player.elements.media, 'seeked');
}
- plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ player.elements.media.seeking = false;
+ trigger(player.elements.media, 'play');
+ trigger(player.elements.media, 'playing');
// Poll to get playback progress
timers.playing = window.setInterval(function() {
// Set the current time
- plyr.media.currentTime = instance.getCurrentTime();
+ player.elements.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ trigger(player.elements.media, 'timeupdate');
}, 100);
// Check duration again due to YouTube bug
- // https://github.com/sampotts/plyr/issues/374
+ // https://github.com/Selz/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');
+ if (player.elements.media.duration !== instance.getDuration()) {
+ player.elements.media.duration = instance.getDuration();
+ trigger(player.elements.media, 'durationchange');
}
+ // Get quality
+ var qualityOptions = instance.getAvailableQualityLevels();
+ var quality = instance.getPlaybackQuality();
+ setQualityMenu(qualityOptions, quality);
+
break;
case 2:
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ player.elements.media.paused = true;
+ trigger(player.elements.media, 'pause');
break;
}
- _triggerEvent(plyr.container, 'statechange', false, {
+ trigger(player.elements.container, 'statechange', false, {
code: event.data
});
}
@@ -1796,235 +2778,370 @@
}
// Vimeo ready
- function _vimeoReady(mediaId, container) {
+ function vimeoReady(mediaId) {
// Setup instance
// https://github.com/vimeo/player.js
- plyr.embed = new window.Vimeo.Player(container, {
- id: parseInt(mediaId),
- loop: config.loop,
- autoplay: config.autoplay,
- byline: false,
- portrait: false,
- title: false
+ player.embed = new window.Vimeo.Player(player.elements.media, {
+ id: mediaId,
+ loop: config.loop.active,
+ autoplay: config.autoplay,
+ byline: false,
+ portrait: false,
+ title: false
});
// Create a faux HTML5 API using the Vimeo API
- plyr.media.play = function() {
- plyr.embed.play();
- plyr.media.paused = false;
+ player.elements.media.play = function() {
+ player.embed.play();
+ player.elements.media.paused = false;
};
- plyr.media.pause = function() {
- plyr.embed.pause();
- plyr.media.paused = true;
+ player.elements.media.pause = function() {
+ player.embed.pause();
+ player.elements.media.paused = true;
};
- plyr.media.stop = function() {
- plyr.embed.stop();
- plyr.media.paused = true;
+ player.elements.media.stop = function() {
+ player.embed.stop();
+ player.elements.media.paused = true;
};
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
+ player.elements.media.paused = true;
+ player.elements.media.currentTime = 0;
// Update UI
- _embedReady();
+ embedReady();
- plyr.embed.getCurrentTime().then(function(value) {
- plyr.media.currentTime = value;
+ player.embed.getCurrentTime().then(function(value) {
+ player.elements.media.currentTime = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ trigger(player.elements.media, 'timeupdate');
});
- plyr.embed.getDuration().then(function(value) {
- plyr.media.duration = value;
+ player.embed.getDuration().then(function(value) {
+ player.elements.media.duration = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
+ trigger(player.elements.media, 'durationchange');
});
- // TODO: Captions
- /*if (config.captions.defaultActive) {
- plyr.embed.enableTextTrack('en');
- }*/
+ // Get captions
+ player.embed.getTextTracks().then(function(tracks) {
+ // tracks = an array of track objects
+ setupCaptions(tracks);
- plyr.embed.on('loaded', function() {
+ // TODO: Captions
+ if (config.captions.active) {
+ player.embed.enableTextTrack(config.captions.language.toLowerCase());
+ }
+ });
+
+ player.embed.on('cuechange', function(data) {
+ var cue = null;
+
+ if (data.cues.length) {
+ cue = utils.stripHTML(data.cues[0].text);
+ }
+
+ setCaption(cue);
+ });
+
+ player.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');
+ // https://github.com/Selz/plyr/issues/317
+ if (utils.is.htmlElement(player.embed.element) && player.supported.full) {
+ player.embed.element.setAttribute('tabindex', -1);
}
});
- plyr.embed.on('play', function() {
- plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ player.embed.on('play', function() {
+ player.elements.media.paused = false;
+ trigger(player.elements.media, 'play');
+ trigger(player.elements.media, 'playing');
});
- plyr.embed.on('pause', function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ player.embed.on('pause', function() {
+ player.elements.media.paused = true;
+ trigger(player.elements.media, 'pause');
});
- plyr.embed.on('timeupdate', function(data) {
- plyr.media.seeking = false;
- plyr.media.currentTime = data.seconds;
- _triggerEvent(plyr.media, 'timeupdate');
+ player.embed.on('timeupdate', function(data) {
+ player.elements.media.seeking = false;
+ player.elements.media.currentTime = data.seconds;
+ trigger(player.elements.media, 'timeupdate');
});
- plyr.embed.on('progress', function(data) {
- plyr.media.buffered = data.percent;
- _triggerEvent(plyr.media, 'progress');
+ player.embed.on('progress', function(data) {
+ player.elements.media.buffered = data.percent;
+ trigger(player.elements.media, 'progress');
if (parseInt(data.percent) === 1) {
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ trigger(player.elements.media, 'canplaythrough');
}
});
- plyr.embed.on('seeked', function() {
- plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'seeked');
- _triggerEvent(plyr.media, 'play');
+ player.embed.on('seeked', function() {
+ player.elements.media.seeking = false;
+ trigger(player.elements.media, 'seeked');
+ trigger(player.elements.media, 'play');
});
- plyr.embed.on('ended', function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ player.embed.on('ended', function() {
+ player.elements.media.paused = true;
+ trigger(player.elements.media, 'ended');
});
}
// Soundcloud ready
- function _soundcloudReady() {
+ function soundcloudReady() {
/* jshint validthis: true */
- plyr.embed = window.SC.Widget(this);
+ player.embed = window.SC.Widget(this);
// Setup on ready
- plyr.embed.bind(window.SC.Widget.Events.READY, function() {
+ player.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;
+ player.elements.media.play = function() {
+ player.embed.play();
+ player.elements.media.paused = false;
};
- plyr.media.pause = function() {
- plyr.embed.pause();
- plyr.media.paused = true;
+ player.elements.media.pause = function() {
+ player.embed.pause();
+ player.elements.media.paused = true;
};
- plyr.media.stop = function() {
- plyr.embed.seekTo(0);
- plyr.embed.pause();
- plyr.media.paused = true;
+ player.elements.media.stop = function() {
+ player.embed.seekTo(0);
+ player.embed.pause();
+ player.elements.media.paused = true;
};
- plyr.media.paused = true;
- plyr.media.currentTime = 0;
+ player.elements.media.paused = true;
+ player.elements.media.currentTime = 0;
- plyr.embed.getDuration(function(value) {
- plyr.media.duration = value/1000;
+ player.embed.getDuration(function(value) {
+ player.elements.media.duration = value / 1000;
// Update UI
- _embedReady();
+ embedReady();
});
- plyr.embed.getPosition(function(value) {
- plyr.media.currentTime = value;
+ player.embed.getPosition(function(value) {
+ player.elements.media.currentTime = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ trigger(player.elements.media, 'timeupdate');
});
- plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
- plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ player.embed.bind(window.SC.Widget.Events.PLAY, function() {
+ player.elements.media.paused = false;
+ trigger(player.elements.media, 'play');
+ trigger(player.elements.media, 'playing');
});
- plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ player.embed.bind(window.SC.Widget.Events.PAUSE, function() {
+ player.elements.media.paused = true;
+ trigger(player.elements.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');
+ player.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
+ player.elements.media.seeking = false;
+ player.elements.media.currentTime = data.currentPosition / 1000;
+ trigger(player.elements.media, 'timeupdate');
});
- plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
- plyr.media.buffered = data.loadProgress;
- _triggerEvent(plyr.media, 'progress');
+ player.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
+ player.elements.media.buffered = data.loadProgress;
+ trigger(player.elements.media, 'progress');
if (parseInt(data.loadProgress) === 1) {
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ trigger(player.elements.media, 'canplaythrough');
}
});
- plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
- plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ player.embed.bind(window.SC.Widget.Events.FINISH, function() {
+ player.elements.media.paused = true;
+ trigger(player.elements.media, 'ended');
});
});
}
// Play media
- function _play() {
- if ('play' in plyr.media) {
- plyr.media.play();
+ function play() {
+ if ('play' in player.elements.media) {
+ player.elements.media.play();
}
}
// Pause media
- function _pause() {
- if ('pause' in plyr.media) {
- plyr.media.pause();
+ function pause() {
+ if ('pause' in player.elements.media) {
+ player.elements.media.pause();
}
}
// Toggle playback
- function _togglePlay(toggle) {
+ function togglePlay(toggle) {
// True toggle
- if (!_is.boolean(toggle)) {
- toggle = plyr.media.paused;
+ if (!utils.is.boolean(toggle)) {
+ toggle = player.elements.media.paused;
}
if (toggle) {
- _play();
+ play();
} else {
- _pause();
+ pause();
}
return toggle;
}
+ // Toggle loop
+ // TODO: Set the indicator on load as user may pass loop as config
+ function toggleLoop(type) {
+ // Set default to be a true toggle
+ if (!utils.inArray(['start', 'end', 'all', 'none', 'toggle'], type)) {
+ type = 'toggle';
+ }
+
+ var currentTime = Number(player.elements.media.currentTime);
+
+ switch (type) {
+ case 'start':
+ if (config.loop.end && config.loop.end <= currentTime) {
+ config.loop.end = null;
+ }
+ config.loop.start = currentTime;
+ config.loop.indicator.start = player.elements.display.played.value;
+ break;
+
+ case 'end':
+ if (config.loop.start >= currentTime) {
+ return;
+ }
+ config.loop.end = currentTime;
+ config.loop.indicator.end = player.elements.display.played.value;
+ break;
+
+ case 'all':
+ config.loop.start = 0;
+ config.loop.end = player.elements.media.duration - 2;
+ config.loop.indicator.start = 0;
+ config.loop.indicator.end = 100;
+ break;
+
+ case 'toggle':
+ if (config.loop.active) {
+ config.loop.start = 0;
+ config.loop.end = null;
+ } else {
+ config.loop.start = 0;
+ config.loop.end = player.elements.media.duration - 2;
+ }
+ break;
+
+ default:
+ config.loop.start = 0;
+ config.loop.end = null;
+ break;
+ }
+
+ // Check if can loop
+ config.loop.active = utils.is.number(config.loop.start) && utils.is.number(config.loop.end);
+ var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
+ var end = null;
+
+ if (utils.is.number(config.loop.end)) {
+ // Find the <span> inside button
+ end = updateTimeDisplay(config.loop.end, document.querySelector('[data-loop__value="loopout"]'));
+ } else {
+ // Find the <span> inside button
+ //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
+ }
+
+ if (config.loop.active) {
+ // TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be
+ //getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
+ //getElement(config.selectors.progress.looped).style.position = 'absolute';
+ //getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%';
+ //getElement(config.selectors.progress.looped).style.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
+ //getElement(config.selectors.progress.looped).style.background = '#ffbb00';
+ //getElement(config.selectors.progress.looped).style.height = '3px';
+ //getElement(config.selectors.progress.looped).style.top = '3px';
+ //getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
+ } else {
+ //getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
+ //getElement(config.selectors.progress.looped).style.width = '0px';
+ }
+ }
+
+ // Set playback speed
+ function setSpeed(speed) {
+ // Load speed from storage or default value
+ if (utils.is.event(speed)) {
+ speed = parseFloat(speed.target.value);
+ } else if (!utils.is.number(speed)) {
+ speed = parseFloat(player.storage.speed || config.speed.selected);
+ }
+
+ // Set min/max
+ if (speed < 0.1) {
+ speed = 0.1;
+ }
+ if (speed > 2.0) {
+ speed = 2.0;
+ }
+
+ if (!utils.is.array(config.speed.options)) {
+ warn('Invalid speeds format');
+ return;
+ }
+
+ // Store current speed
+ config.speed.selected = speed;
+
+ // Set HTML5 speed
+ // TODO: set YouTube
+ player.elements.media.playbackRate = speed;
+
+ // Save speed to localStorage
+ updateStorage({
+ speed: speed
+ });
+ }
+
+ // Get the current speed value
+ function getSpeed() {
+ return config.speed.selected.toFixed(1).toString().replace('.0', '') + '&times;'
+ }
+
// Rewind
- function _rewind(seekTime) {
+ function rewind(seekTime) {
// Use default if needed
- if (!_is.number(seekTime)) {
+ if (!utils.is.number(seekTime)) {
seekTime = config.seekTime;
}
- _seek(plyr.media.currentTime - seekTime);
+ seek(player.elements.media.currentTime - seekTime);
}
// Fast forward
- function _forward(seekTime) {
+ function forward(seekTime) {
// Use default if needed
- if (!_is.number(seekTime)) {
+ if (!utils.is.number(seekTime)) {
seekTime = config.seekTime;
}
- _seek(plyr.media.currentTime + seekTime);
+ seek(player.elements.media.currentTime + seekTime);
}
// 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();
+ function seek(input) {
+ var targetTime = 0;
+ var paused = player.elements.media.paused;
+ var duration = getDuration();
- if (_is.number(input)) {
+ if (utils.is.number(input)) {
targetTime = input;
- } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
+ } else if (utils.is.event(input) && utils.inArray(['input', 'change'], input.type)) {
// It's the seek slider
// Seek to the selected time
targetTime = ((input.target.value / input.target.max) * duration);
@@ -2038,64 +3155,60 @@
}
// Update seek range and progress
- _updateSeekDisplay(targetTime);
+ 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) {}
+ player.elements.media.currentTime = targetTime.toFixed(4);
+ } catch (e) {}
// Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- switch(plyr.type) {
+ if (utils.inArray(types.embed, player.type)) {
+ switch (player.type) {
case 'youtube':
- plyr.embed.seekTo(targetTime);
+ player.embed.seekTo(targetTime);
break;
case 'vimeo':
// Round to nearest second for vimeo
- plyr.embed.setCurrentTime(targetTime.toFixed(0));
+ player.embed.setCurrentTime(targetTime.toFixed(0));
break;
case 'soundcloud':
- plyr.embed.seekTo(targetTime * 1000);
+ player.embed.seekTo(targetTime * 1000);
break;
}
if (paused) {
- _pause();
+ pause();
}
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ trigger(player.elements.media, 'timeupdate');
// Set seeking flag
- plyr.media.seeking = true;
+ player.elements.media.seeking = true;
// Trigger seeking
- _triggerEvent(plyr.media, 'seeking');
+ trigger(player.elements.media, 'seeking');
}
// Logging
- _log('Seeking to ' + plyr.media.currentTime + ' seconds');
-
- // Special handling for 'manual' captions
- _seekManualCaptions(targetTime);
+ log('Seeking to ' + player.elements.media.currentTime + ' seconds');
}
// Get the duration (or custom if set)
- function _getDuration() {
+ function getDuration() {
// It should be a number, but parse it just incase
- var duration = parseInt(config.duration),
+ var duration = parseInt(config.duration);
// True duration
- mediaDuration = 0;
+ var mediaDuration = 0;
// Only if duration available
- if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
- mediaDuration = plyr.media.duration;
+ if (player.elements.media.duration !== null && !isNaN(player.elements.media.duration)) {
+ mediaDuration = player.elements.media.duration;
}
// If custom duration is funky, use regular duration
@@ -2103,16 +3216,16 @@
}
// Check playing state
- function _checkPlaying() {
- _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
+ function checkPlaying() {
+ utils.toggleClass(player.elements.container, config.classes.playing, !player.elements.media.paused);
- _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
+ utils.toggleClass(player.elements.container, config.classes.stopped, player.elements.media.paused);
- _toggleControls(plyr.media.paused);
+ toggleControls(player.elements.media.paused);
}
// Save scroll position
- function _saveScrollPosition() {
+ function saveScrollPosition() {
scroll = {
x: window.pageXOffset || 0,
y: window.pageYOffset || 0
@@ -2120,110 +3233,175 @@
}
// Restore scroll position
- function _restoreScrollPosition() {
+ function restoreScrollPosition() {
window.scrollTo(scroll.x, scroll.y);
}
// Toggle fullscreen
- function _toggleFullscreen(event) {
+ function toggleFullscreen(event) {
// Check for native support
- var nativeSupport = fullscreen.supportsFullScreen;
+ var nativeSupport = support.fullscreen;
if (nativeSupport) {
// If it's a fullscreen change event, update the UI
- if (event && event.type === fullscreen.fullScreenEventName) {
- plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
+ if (event && event.type === fullscreen.eventType) {
+ player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
} else {
// Else it's a user request to enter or exit
- if (!fullscreen.isFullScreen(plyr.container)) {
+ if (!fullscreen.isFullScreen(player.elements.container)) {
// Save scroll position
- _saveScrollPosition();
+ saveScrollPosition();
// Request full screen
- fullscreen.requestFullScreen(plyr.container);
+ fullscreen.requestFullScreen(player.elements.container);
} else {
// Bail from fullscreen
fullscreen.cancelFullScreen();
}
// Check if we're actually full screen (it could fail)
- plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
+ player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
return;
}
} else {
// Otherwise, it's a simple toggle
- plyr.isFullscreen = !plyr.isFullscreen;
+ player.fullscreen.active = !player.fullscreen.active;
// Bind/unbind escape key
- document.body.style.overflow = plyr.isFullscreen ? 'hidden' : '';
+ document.body.style.overflow = player.fullscreen.active ? 'hidden' : '';
}
// Set class hook
- _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
+ utils.toggleClass(player.elements.container, config.classes.fullscreen.active, player.fullscreen.active);
// Trap focus
- _focusTrap(plyr.isFullscreen);
+ focusTrap(player.fullscreen.active);
// Set button state
- if (plyr.buttons && plyr.buttons.fullscreen) {
- _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
+ if (player.elements.buttons && player.elements.buttons.fullscreen) {
+ utils.toggleState(player.elements.buttons.fullscreen, player.fullscreen.active);
}
// Trigger an event
- _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true);
+ trigger(player.elements.container, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen', true);
// Restore scroll position
- if (!plyr.isFullscreen && nativeSupport) {
- _restoreScrollPosition();
+ if (!player.fullscreen.active && nativeSupport) {
+ restoreScrollPosition();
+ }
+ }
+
+ // Toggle Menu
+ function toggleMenu(event) {
+ var menu = player.elements.settings.menu.parentNode;
+ var toggle = event.target;
+ var target = document.getElementById(toggle.getAttribute('aria-controls'));
+ var show = (toggle.getAttribute('aria-expanded') === 'false');
+
+ // Nothing to show, bail
+ if (!utils.is.htmlElement(target)) {
+ return;
+ }
+
+ // Are we targetting a tab?
+ var isTab = target.getAttribute('role') === 'tabpanel';
+ var targetWidth;
+ var targetHeight;
+ var container;
+
+ // Hide all other tabs
+ if (isTab) {
+ // Get other tabs
+ var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+ container = current.parentNode;
+
+ [].forEach.call(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]'), function(toggle) {
+ toggle.setAttribute('aria-expanded', false);
+ });
+
+ container.style.width = current.scrollWidth + 'px';
+ container.style.height = current.scrollHeight + 'px';
+
+ current.setAttribute('aria-hidden', true);
+ current.setAttribute('tabindex', -1);
+
+ // Get the natural element size
+ var clone = target.cloneNode(true);
+ clone.style.position = "absolute";
+ clone.style.opacity = 0;
+ clone.setAttribute('aria-hidden', false);
+ container.appendChild(clone);
+ targetWidth = clone.scrollWidth;
+ targetHeight = clone.scrollHeight;
+ utils.removeElement(clone);
+ }
+
+ target.setAttribute('aria-hidden', !show);
+ toggle.setAttribute('aria-expanded', show);
+ target.removeAttribute('tabindex');
+
+ if (isTab) {
+ container.style.width = targetWidth + 'px';
+ container.style.height = targetHeight + 'px';
+
+ window.setTimeout(function() {
+ container.style.width = '';
+ container.style.height = '';
+ }, 300);
}
}
// Mute
- function _toggleMute(muted) {
+ function toggleMute(muted) {
// If the method is called without parameter, toggle based on current value
- if (!_is.boolean(muted)) {
- muted = !plyr.media.muted;
+ if (!utils.is.boolean(muted)) {
+ muted = !player.elements.media.muted;
}
// Set button state
- _toggleState(plyr.buttons.mute, muted);
+ utils.toggleState(player.elements.buttons.mute, muted);
// Set mute on the player
- plyr.media.muted = muted;
+ player.elements.media.muted = muted;
// If volume is 0 after unmuting, set to default
- if (plyr.media.volume === 0) {
- _setVolume(config.volume);
+ if (player.elements.media.volume === 0) {
+ setVolume(config.volume);
}
// Embeds
- if (_inArray(config.types.embed, plyr.type)) {
+ if (utils.inArray(types.embed, player.type)) {
// YouTube
- switch(plyr.type) {
+ switch (player.type) {
case 'youtube':
- plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+ player.embed[player.elements.media.muted ? 'mute' : 'unMute']();
break;
case 'vimeo':
case 'soundcloud':
- plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
+ player.embed.setVolume(player.elements.media.muted ? 0 : parseFloat(config.volume / 10));
break;
}
// Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
+ trigger(player.elements.media, 'volumechange');
}
}
// Set volume
- function _setVolume(volume) {
- var max = config.volumeMax,
- min = config.volumeMin;
+ function setVolume(volume) {
+ var max = 10;
+ var min = 0;
+
+ // If volume is event, get from input
+ if (utils.is.event(volume)) {
+ volume = volume.target.value;
+ }
// Load volume from storage if no value specified
- if (_is.undefined(volume)) {
- volume = plyr.storage.volume;
+ if (utils.is.undefined(volume)) {
+ volume = player.storage.volume;
}
// Use config if all else fails
@@ -2241,117 +3419,91 @@
}
// Set the player volume
- plyr.media.volume = parseFloat(volume / max);
+ player.elements.media.volume = parseFloat(volume / max);
// Set the display
- if (plyr.volume.display) {
- plyr.volume.display.value = volume;
+ if (player.elements.display.volume) {
+ player.elements.display.volume.value = volume;
}
// Embeds
- if (_inArray(config.types.embed, plyr.type)) {
- switch(plyr.type) {
+ if (utils.inArray(types.embed, player.type)) {
+ switch (player.type) {
case 'youtube':
- plyr.embed.setVolume(plyr.media.volume * 100);
+ player.embed.setVolume(player.elements.media.volume * 100);
break;
case 'vimeo':
case 'soundcloud':
- plyr.embed.setVolume(plyr.media.volume);
+ player.embed.setVolume(player.elements.media.volume);
break;
}
// Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
+ trigger(player.elements.media, 'volumechange');
}
// Toggle muted state
if (volume === 0) {
- plyr.media.muted = true;
- } else if (plyr.media.muted && volume > 0) {
- _toggleMute();
+ player.elements.media.muted = true;
+ } else if (player.elements.media.muted && volume > 0) {
+ toggleMute();
}
}
// Increase volume
- function _increaseVolume(step) {
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ function increaseVolume(step) {
+ var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
- if (!_is.number(step)) {
- step = config.volumeStep;
+ if (!utils.is.number(step)) {
+ step = 1;
}
- _setVolume(volume + step);
+ setVolume(volume + step);
}
// Decrease volume
- function _decreaseVolume(step) {
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ function decreaseVolume(step) {
+ var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
- if (!_is.number(step)) {
- step = config.volumeStep;
+ if (!utils.is.number(step)) {
+ step = 1;
}
- _setVolume(volume - step);
+ setVolume(volume - step);
}
// Update volume UI and storage
- function _updateVolume() {
+ function updateVolume() {
// Get the current volume
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
// Update the <input type="range"> if present
- if (plyr.supported.full) {
- if (plyr.volume.input) {
- plyr.volume.input.value = volume;
+ if (player.supported.full) {
+ if (player.elements.inputs.volume) {
+ player.elements.inputs.volume.value = volume;
}
- if (plyr.volume.display) {
- plyr.volume.display.value = volume;
+ if (player.elements.display.volume) {
+ player.elements.display.volume.value = volume;
}
}
// Update the volume in storage
- _updateStorage({volume: volume});
+ updateStorage({
+ volume: volume
+ });
// Toggle class if muted
- _toggleClass(plyr.container, config.classes.muted, (volume === 0));
+ utils.toggleClass(player.elements.container, config.classes.muted, (volume === 0));
// Update checkbox for mute state
- if (plyr.supported.full && plyr.buttons.mute) {
- _toggleState(plyr.buttons.mute, (volume === 0));
+ if (player.supported.full && player.elements.buttons.mute) {
+ utils.toggleState(player.elements.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);
-
- // 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) {
+ function checkLoading(event) {
var loading = (event.type === 'waiting');
// Clear timer
@@ -2360,52 +3512,52 @@
// Timer to prevent flicker when seeking
timers.loading = setTimeout(function() {
// Toggle container class hook
- _toggleClass(plyr.container, config.classes.loading, loading);
+ utils.toggleClass(player.elements.container, config.classes.loading, loading);
// Show controls if loading, hide if done
- _toggleControls(loading);
+ toggleControls(loading);
}, (loading ? 250 : 0));
}
// Update <progress> elements
- function _updateProgress(event) {
- if (!plyr.supported.full) {
+ function updateProgress(event) {
+ if (!player.supported.full) {
return;
}
- var progress = plyr.progress.played,
- value = 0,
- duration = _getDuration();
+ var progress = player.elements.display.played,
+ value = 0,
+ duration = getDuration();
if (event) {
switch (event.type) {
// Video playing
case 'timeupdate':
case 'seeking':
- if (plyr.controls.pressed) {
+ if (player.elements.controls.pressed) {
return;
}
- value = _getPercentage(plyr.media.currentTime, duration);
+ value = utils.getPercentage(player.elements.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;
+ if (event.type === 'timeupdate' && player.elements.inputs.seek) {
+ player.elements.inputs.seek.value = value;
}
break;
- // Check buffer status
+ // Check buffer status
case 'playing':
case 'progress':
- progress = plyr.progress.buffer;
- value = (function() {
- var buffered = plyr.media.buffered;
+ progress = player.elements.display.buffer;
+ value = (function() {
+ var buffered = player.elements.media.buffered;
if (buffered && buffered.length) {
// HTML5
- return _getPercentage(buffered.end(0), duration);
- } else if (_is.number(buffered)) {
+ return utils.getPercentage(buffered.end(0), duration);
+ } else if (utils.is.number(buffered)) {
// YouTube returns between 0 and 1
return (buffered * 100);
}
@@ -2417,45 +3569,46 @@
}
}
- // Set values
- _setProgress(progress, value);
+ if (utils.is.number(config.loop.start) && utils.is.number(config.loop.end) && player.elements.media.currentTime >= config.loop.end) {
+ seek(config.loop.start);
+ }
+
+ setProgress(progress, value);
}
// Set <progress> value
- function _setProgress(progress, value) {
- if (!plyr.supported.full) {
+ function setProgress(progress, value) {
+ if (!player.supported.full) {
return;
}
// Default to 0
- if (_is.undefined(value)) {
+ if (utils.is.undefined(value)) {
value = 0;
}
// Default to buffer or bail
- if (_is.undefined(progress)) {
- if (plyr.progress && plyr.progress.buffer) {
- progress = plyr.progress.buffer;
+ if (utils.is.undefined(progress)) {
+ if (utils.is.htmlElement(player.elements.display.buffer)) {
+ progress = player.elements.display.buffer;
} else {
return;
}
}
- // One progress element passed
- if (_is.htmlElement(progress)) {
+ // Update value and label
+ if (utils.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;
+
+ // Update text label inside
+ var label = progress.getElementsByTagName('span')[0];
+ if (utils.is.htmlElement(label)) {
+ label.childNodes[0].nodeValue = value;
}
}
}
// Update the displayed time
- function _updateTimeDisplay(time, element) {
+ function updateTimeDisplay(time, element) {
// Bail if there's no duration display
if (!element) {
return;
@@ -2466,102 +3619,108 @@
time = 0;
}
- plyr.secs = parseInt(time % 60);
- plyr.mins = parseInt((time / 60) % 60);
- plyr.hours = parseInt(((time / 60) / 60) % 60);
+ var secs = parseInt(time % 60);
+ var mins = parseInt((time / 60) % 60);
+ var hours = parseInt(((time / 60) / 60) % 60);
// Do we need to display hours?
- var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0);
+ var displayHours = (parseInt(((getDuration() / 60) / 60) % 60) > 0);
// 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);
+ secs = ('0' + secs).slice(-2);
+ mins = ('0' + mins).slice(-2);
+
+ // Generate display
+ var display = (displayHours ? hours + ':' : '') + mins + ':' + secs;
// Render
- element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+ element.textContent = display;
+
+ // Return for looping
+ return display;
}
// Show the duration on metadataloaded
- function _displayDuration() {
- if (!plyr.supported.full) {
+ function displayDuration() {
+ if (!player.supported.full) {
return;
}
// Determine duration
- var duration = _getDuration() || 0;
+ 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 (!player.elements.display.duration && config.displayDuration && player.elements.media.paused) {
+ updateTimeDisplay(duration, player.elements.display.currentTime);
}
// If there's a duration element, update content
- if (plyr.duration) {
- _updateTimeDisplay(duration, plyr.duration);
+ if (player.elements.display.duration) {
+ updateTimeDisplay(duration, player.elements.display.duration);
}
// Update the tooltip (if visible)
- _updateSeekTooltip();
+ updateSeekTooltip();
}
// Handle time change event
- function _timeUpdate(event) {
+ function timeUpdate(event) {
// Duration
- _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
+ updateTimeDisplay(player.elements.media.currentTime, player.elements.display.currentTime);
// Ignore updates while seeking
- if (event && event.type === 'timeupdate' && plyr.media.seeking) {
+ if (event && event.type === 'timeupdate' && player.elements.media.seeking) {
return;
}
// Playing progress
- _updateProgress(event);
+ updateProgress(event);
}
// Update seek range and progress
- function _updateSeekDisplay(time) {
+ function updateSeekDisplay(time) {
// Default to 0
- if (!_is.number(time)) {
+ if (!utils.is.number(time)) {
time = 0;
}
- var duration = _getDuration(),
- value = _getPercentage(time, duration);
+ var duration = getDuration(),
+ value = utils.getPercentage(time, duration);
// Update progress
- if (plyr.progress && plyr.progress.played) {
- plyr.progress.played.value = value;
+ if (player.elements.progress && player.elements.display.played) {
+ player.elements.display.played.value = value;
}
// Update seek range input
- if (plyr.buttons && plyr.buttons.seek) {
- plyr.buttons.seek.value = value;
+ if (player.elements.buttons && player.elements.inputs.seek) {
+ player.elements.inputs.seek.value = value;
}
}
// Update hover tooltip for seeking
- function _updateSeekTooltip(event) {
- var duration = _getDuration();
+ function updateSeekTooltip(event) {
+ var duration = getDuration();
// Bail if setting not true
- if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
+ if (!config.tooltips.seek || !utils.is.htmlElement(player.elements.inputs.seek) || !utils.is.htmlElement(player.elements.display.seekTooltip) || duration === 0) {
return;
}
// Calculate percentage
- var clientRect = plyr.progress.container.getBoundingClientRect(),
- percent = 0,
- visible = config.classes.tooltip + '--visible';
+ var clientRect = player.elements.inputs.seek.getBoundingClientRect();
+ var percent = 0;
+ var 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('%', '');
+ if (utils.is.event(event)) {
+ percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
+ } else {
+ if (utils.hasClass(player.elements.display.seekTooltip, visible)) {
+ percent = player.elements.display.seekTooltip.style.left.replace('%', '');
} else {
return;
}
- } else {
- percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
}
// Set bounds
@@ -2572,41 +3731,41 @@
}
// Display the time a click would seek to
- _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
+ updateTimeDisplay(((duration / 100) * percent), player.elements.display.seekTooltip);
// Set position
- plyr.progress.tooltip.style.left = percent + "%";
+ player.elements.display.seekTooltip.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'));
+ if (utils.is.event(event) && utils.inArray(['mouseenter', 'mouseleave'], event.type)) {
+ utils.toggleClass(player.elements.display.seekTooltip, visible, (event.type === 'mouseenter'));
}
}
// Show the player controls in fullscreen mode
- function _toggleControls(toggle) {
+ 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') {
+ if (!config.hideControls || player.type === 'audio') {
return;
}
- var delay = 0,
- isEnterFullscreen = false,
- show = toggle,
- loading = _hasClass(plyr.container, config.classes.loading);
+ var delay = 0;
+ var isEnterFullscreen = false;
+ var show = toggle;
+ var loading = utils.hasClass(player.elements.container, config.classes.loading);
// Default to false if no boolean
- if (!_is.boolean(toggle)) {
+ if (!utils.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);
+ show = utils.inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
// Delay hiding on move events
- if (_inArray(['mousemove', 'touchmove'], toggle.type)) {
+ if (utils.inArray(['mousemove', 'touchmove'], toggle.type)) {
delay = 2000;
}
@@ -2615,7 +3774,7 @@
delay = 3000;
}
} else {
- show = _hasClass(plyr.container, config.classes.hideControls);
+ show = utils.hasClass(player.elements.container, config.classes.hideControls);
}
}
@@ -2623,63 +3782,63 @@
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);
+ if (show || player.elements.media.paused || loading) {
+ utils.toggleClass(player.elements.container, config.classes.hideControls, false);
// Always show controls when paused or if touch
- if (plyr.media.paused || loading) {
+ if (player.elements.media.paused || loading) {
return;
}
// Delay for hiding on touch
- if (plyr.browser.isTouch) {
+ if (support.touch) {
delay = 3000;
}
}
// 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) {
+ if (!show || !player.elements.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) {
+ if ((player.elements.controls.pressed || player.elements.controls.hover) && !isEnterFullscreen) {
return;
}
- _toggleClass(plyr.container, config.classes.hideControls, true);
+ utils.toggleClass(player.elements.container, config.classes.hideControls, true);
}, delay);
}
}
// Add common function to retrieve media source
- function _source(source) {
+ function source(source) {
// If not null or undefined, parse it
- if (!_is.undefined(source)) {
- _updateSource(source);
+ if (!utils.is.undefined(source)) {
+ updateSource(source);
return;
}
// Return the current source
var url;
- switch(plyr.type) {
+ switch (player.type) {
case 'youtube':
- url = plyr.embed.getVideoUrl();
+ url = player.embed.getVideoUrl();
break;
case 'vimeo':
- plyr.embed.getVideoUrl.then(function (value) {
+ player.embed.getVideoUrl.then(function(value) {
url = value;
});
break;
case 'soundcloud':
- plyr.embed.getCurrentSound(function(object) {
+ player.embed.getCurrentSound(function(object) {
url = object.permalink_url;
});
break;
default:
- url = plyr.media.currentSrc;
+ url = player.elements.media.currentSrc;
break;
}
@@ -2688,202 +3847,188 @@
// 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');
+ function updateSource(source) {
+ if (!utils.is.object(source) || !('sources' in source) || !source.sources.length) {
+ warn('Invalid source format');
return;
}
// Remove ready class hook
- _toggleClass(plyr.container, config.classes.ready, false);
+ utils.toggleClass(player.elements.container, config.classes.ready, false);
// Pause playback
- _pause();
+ pause();
// Update seek range and progress
- _updateSeekDisplay();
+ updateSeekDisplay();
// Reset buffer progress
- _setProgress();
+ setProgress();
// Cancel current network requests
- _cancelRequests();
+ cancelRequests();
// Setup new source
function setup() {
- // Remove embed object
- plyr.embed = null;
+ // Reset embed object
+ player.embed = null;
+
+ // Remove media
+ removeElement('media');
- // Remove the old media
- _remove(plyr.media);
+ // Remove the old captions
+ removeElement('captions');
// Remove video container
- if (plyr.type === 'video' && plyr.videoContainer) {
- _remove(plyr.videoContainer);
- }
+ removeElement('wrapper');
// Reset class name
- if (plyr.container) {
- plyr.container.removeAttribute('class');
+ if (player.elements.container) {
+ player.elements.container.removeAttribute('class');
}
// Set the type
if ('type' in source) {
- plyr.type = source.type;
+ player.type = source.type;
// Get child type for video (it might be an embed)
- if (plyr.type === 'video') {
+ if (player.type === 'video') {
var firstSource = source.sources[0];
- if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
- plyr.type = firstSource.type;
+ if ('type' in firstSource && utils.inArray(types.embed, firstSource.type)) {
+ player.type = firstSource.type;
}
}
}
// Check for support
- plyr.supported = supported(plyr.type);
+ player.supported = utils.checkSupport(player.type, config.inline);
// Create new markup
- switch(plyr.type) {
+ switch (player.type) {
case 'video':
- plyr.media = document.createElement('video');
+ player.elements.media = utils.createElement('video');
break;
case 'audio':
- plyr.media = document.createElement('audio');
+ player.elements.media = utils.createElement('audio');
break;
case 'youtube':
case 'vimeo':
case 'soundcloud':
- plyr.media = document.createElement('div');
- plyr.embedId = source.sources[0].src;
+ player.elements.media = utils.createElement('div');
+ player.embedId = source.sources[0].src;
break;
}
// Inject the new element
- _prependChild(plyr.container, plyr.media);
+ utils.prependChild(player.elements.container, player.elements.media);
// Autoplay the new source?
- if (_is.boolean(source.autoplay)) {
+ if (utils.is.boolean(source.autoplay)) {
config.autoplay = source.autoplay;
}
// Set attributes for audio and video
- if (_inArray(config.types.html5, plyr.type)) {
+ if (utils.inArray(types.html5, player.type)) {
if (config.crossorigin) {
- plyr.media.setAttribute('crossorigin', '');
+ player.elements.media.setAttribute('crossorigin', '');
}
if (config.autoplay) {
- plyr.media.setAttribute('autoplay', '');
+ player.elements.media.setAttribute('autoplay', '');
}
if ('poster' in source) {
- plyr.media.setAttribute('poster', source.poster);
+ player.elements.media.setAttribute('poster', source.poster);
}
- if (config.loop) {
- plyr.media.setAttribute('loop', '');
+ if (config.loop.active) {
+ player.elements.media.setAttribute('loop', '');
+ }
+ if (config.inline) {
+ player.elements.media.setAttribute('playsinline', '');
}
}
// Restore class hooks
- _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
- _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
- _toggleStyleHook();
+ utils.toggleClass(player.elements.container, config.classes.fullscreen.active, player.fullscreen.active);
+ utils.toggleClass(player.elements.container, config.classes.captions.active, player.captions.enabled);
+ toggleStyleHook();
// Set new sources for html5
- if (_inArray(config.types.html5, plyr.type)) {
- _insertChildElements('source', source.sources);
+ if (utils.inArray(types.html5, player.type)) {
+ insertElements('source', source.sources);
}
// Set up from scratch
- _setupMedia();
+ setupMedia();
// HTML5 stuff
- if (_inArray(config.types.html5, plyr.type)) {
+ if (utils.inArray(types.html5, player.type)) {
// Setup captions
if ('tracks' in source) {
- _insertChildElements('track', source.tracks);
+ insertElements('track', source.tracks);
}
// Load HTML5 sources
- plyr.media.load();
+ player.elements.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)) {
+ if (utils.inArray(types.html5, player.type) || (utils.inArray(types.embed, player.type) && !player.supported.full)) {
// Setup interface
- _setupInterface();
+ setupInterface();
// Call ready
- _ready();
+ ready();
}
// Set aria title and iframe title
config.title = source.title;
- _setTitle();
+ setTitle();
}
// Destroy instance adn wait for callback
// Vimeo throws a wobbly if you don't wait
- _destroy(setup, false);
+ destroy(setup, false);
}
// Update poster
- function _updatePoster(source) {
- if (plyr.type === 'video') {
- plyr.media.setAttribute('poster', source);
+ function updatePoster(source) {
+ if (player.type === 'video') {
+ player.elements.media.setAttribute('poster', source);
}
}
// Listen for control events
- function _controlListeners() {
+ function controlListeners() {
// IE doesn't support input event, so we fallback to change
- var inputEvent = (plyr.browser.isIE ? 'change' : 'input');
+ var inputEvent = (player.browser.isIE ? 'change' : 'input');
// Click play/pause helper
- function togglePlay() {
- var play = _togglePlay();
+ 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 && target.length > 1) {
- target = target[target.length - 1];
- } else {
- target = target[0];
- }
+ var trigger = player.elements.buttons[play ? 'play' : 'pause'];
+ var target = player.elements.buttons[play ? 'pause' : 'play'];
// Setup focus and tab focus
if (target) {
- var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
+ var hadTabFocus = utils.hasClass(trigger, config.classes.tabFocus);
setTimeout(function() {
- target.focus();
+ if (utils.is.htmlElement(target)) {
+ target.focus();
+ }
if (hadTabFocus) {
- _toggleClass(trigger, config.classes.tabFocus, false);
- _toggleClass(target, config.classes.tabFocus, true);
+ utils.toggleClass(trigger, config.classes.tabFocus, false);
+ utils.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;
@@ -2891,84 +4036,84 @@
// Detect tab focus
function checkTabFocus(focused) {
- for (var button in plyr.buttons) {
- var element = plyr.buttons[button];
+ utils.toggleClass(getElements('.' + config.classes.tabFocus), config.classes.tabFocus, false);
- 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));
- }
+ if (player.elements.container.contains(focused)) {
+ utils.toggleClass(focused, config.classes.tabFocus, true);
}
}
// Keyboard shortcuts
- if (config.keyboardShorcuts.focused) {
+ if (config.keyboardShortcuts.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
+ if (config.keyboardShortcuts.global) {
+ utils.on(window, 'keydown keyup', function(event) {
+ var code = getKeyCode(event);
+ var focused = utils.getFocusElement();
+ var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
+
+ // Only handle global key press if 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))) {
+ if (utils.inArray(allowed, code) && (!utils.is.htmlElement(focused) || !utils.matches(focused, config.selectors.editable))) {
handleKey(event);
}
- });
+ }, false);
}
// Handle presses on focused
- _on(plyr.container, 'keydown keyup', handleKey);
+ utils.on(player.elements.container, 'keydown keyup', handleKey, false);
}
function handleKey(event) {
- var code = getKeyCode(event),
- pressed = event.type === 'keydown',
- held = pressed && code === last;
+ var code = getKeyCode(event);
+ var pressed = event.type === 'keydown';
+ var 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 (!utils.is.number(code)) {
return;
}
// Seek by the number keys
function seekByKey() {
// Get current duration
- var duration = plyr.media.duration;
+ var duration = player.elements.media.duration;
// Bail if we have no duration set
- if (!_is.number(duration)) {
+ if (!utils.is.number(duration)) {
return;
}
// Divide the max duration into 10th's and times by the number value
- _seek((duration / 10) * (code - 48));
+ seek((duration / 10) * (code - 48));
}
// 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];
+ var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
+ var checkFocus = [38, 40];
+
+ if (utils.inArray(checkFocus, code)) {
+ var focused = utils.getFocusElement();
+
+ if (utils.is.htmlElement(focused) && utils.getFocusElement().type === "radio") {
+ return;
+ }
+ }
// If the code is found prevent default (e.g. prevent scrolling for arrows)
- if (_inArray(preventDefault, code)) {
+ if (utils.inArray(preventDefault, code)) {
event.preventDefault();
event.stopPropagation();
}
- switch(code) {
- // 0-9
+ switch (code) {
case 48:
case 49:
case 50:
@@ -2978,30 +4123,77 @@
case 54:
case 55:
case 56:
- case 57: if (!held) { seekByKey(); } break;
- // Space and K key
+ case 57:
+ // 0-9
+ if (!held) {
+ seekByKey();
+ }
+ break;
+
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;
+ case 75:
+ // Space and K key
+ if (!held) {
+ _togglePlay();
+ }
+ break;
+
+ case 38:
+ // Arrow up
+ increaseVolume();
+ break;
+
+ case 40:
+ // Arrow down
+ decreaseVolume();
+ break;
+
+ case 77:
+ // M key
+ if (!held) {
+ toggleMute();
+ }
+ break;
+
+ case 39:
+ // Arrow forward
+ forward();
+ break;
+
+ case 37:
+ // Arrow back
+ rewind();
+ break;
+
+ case 70:
+ // F key
+ toggleFullscreen();
+ break;
+
+ case 67:
+ // C key
+ if (!held) {
+ toggleCaptions();
+ }
+ break;
+
+ case 73:
+ toggleLoop('start');
+ break;
+
+ case 76:
+ toggleLoop();
+ break;
+
+ case 79:
+ toggleLoop('end');
+ break;
}
// 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 (!support.fullscreen && player.fullscreen.active && code === 27) {
+ toggleFullscreen();
}
// Store last code for next cycle
@@ -3012,157 +4204,238 @@
}
// Focus/tab management
- _on(window, 'keyup', function(event) {
- var code = getKeyCode(event),
- focused = getFocusElement();
+ utils.on(window, 'keyup', function(event) {
+ var code = getKeyCode(event);
+ var focused = utils.getFocusElement();
if (code === 9) {
checkTabFocus(focused);
}
});
- _on(document.body, 'click', function() {
- _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
+ utils.on(document.body, 'click', function() {
+ utils.toggleClass(getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
});
- for (var button in plyr.buttons) {
- var element = plyr.buttons[button];
+ for (var button in player.elements.buttons) {
+ var element = player.elements.buttons[button];
- _on(element, 'blur', function() {
- _toggleClass(element, 'tab-focus', false);
+ utils.on(element, 'blur', function() {
+ utils.toggleClass(element, 'tab-focus', false);
});
}
+ // Trigger custom and default handlers
+ var handlerProxy = function(event, customHandler, defaultHandler) {
+ if (utils.is.function(customHandler)) {
+ customHandler.call(this, event);
+ }
+ if (utils.is.function(defaultHandler)) {
+ defaultHandler.call(this, event);
+ }
+ }
+
// Play
- _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay);
+ utils.proxy(player.elements.buttons.play, 'click', config.listeners.play, _togglePlay);
+ utils.proxy(player.elements.buttons.playLarge, 'click', config.listeners.play, _togglePlay);
// Pause
- _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay);
+ utils.proxy(player.elements.buttons.pause, 'click', config.listeners.pause, _togglePlay);
- // Restart
- _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek);
+ // Pause
+ utils.proxy(player.elements.buttons.restart, 'click', config.listeners.restart, seek);
// Rewind
- _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind);
+ utils.proxy(player.elements.buttons.rewind, 'click', config.listeners.rewind, rewind);
- // Fast forward
- _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
+ // Rewind
+ utils.proxy(player.elements.buttons.forward, 'click', config.listeners.forward, forward);
- // Seek
- _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
+ // Mute
+ utils.proxy(player.elements.buttons.mute, 'click', config.listeners.mute, toggleMute);
- // Set volume
- _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
- _setVolume(plyr.volume.input.value);
+ // Captions
+ utils.proxy(player.elements.buttons.captions, 'click', config.listeners.captions, toggleCaptions);
+
+ // Fullscreen
+ utils.proxy(player.elements.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
+
+ // Picture-in-Picture
+ utils.proxy(player.elements.buttons.pip, 'click', config.listeners.pip, function(event) {
+ if (!support.pip) {
+ return;
+ }
+ player.elements.media.webkitSetPresentationMode(player.elements.media.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
});
- // Mute
- _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute);
+ // Airplay
+ utils.proxy(player.elements.buttons.airplay, 'click', config.listeners.airplay, function(event) {
+ if (!support.airplay) {
+ return;
+ }
+ player.elements.media.webkitShowPlaybackTargetPicker();
+ });
- // Fullscreen
- _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen);
+ // Settings menu
+ utils.on(player.elements.settings.menu, 'click', toggleMenu);
- // Handle user exiting fullscreen by escaping etc
- if (fullscreen.supportsFullScreen) {
- _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
- }
+ // Click anywhere closes menu
+ utils.on(document.body, 'click', function(event) {
+ var menu = player.elements.settings.menu;
+ var form = menu.querySelector('form');
- // Captions
- _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
+ if (form.getAttribute('aria-hidden') === 'true' || menu.contains(event.target)) {
+ return;
+ }
+
+ // TODO: This should call some sort of menuToggle function?
+ form.setAttribute('aria-hidden', true);
+ });
+
+ // Settings menu items - use event delegation as items are added/removed
+ utils.on(player.elements.settings.menu, 'click', function(event) {
+ // Settings - Language
+ if (utils.matches(event.target, config.selectors.inputs.language)) {
+ handlerProxy.call(this, event, config.listeners.language, setLanguage);
+ }
+
+ // Settings - Quality
+ else if (utils.matches(event.target, config.selectors.inputs.quality)) {
+ handlerProxy.call(this, event, config.listeners.quality, function() {
+ warn("Set quality");
+ });
+ }
+
+ // Settings - Speed
+ else if (utils.matches(event.target, config.selectors.inputs.speed)) {
+ handlerProxy.call(this, event, config.listeners.speed, setSpeed);
+ }
+
+ // Settings - Looping
+ // TODO: use toggle buttons
+ else if (utils.matches(event.target, config.selectors.buttons.loop)) {
+ handlerProxy.call(this, event, config.listeners.loop, function() {
+ // TODO: This should be done in the method itself I think
+ var value = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
+
+ if (utils.inArray(['start', 'end', 'all', 'none'], value)) {
+ toggleLoop(value);
+ }
+ });
+ }
+ });
+
+ // Seek
+ utils.proxy(player.elements.inputs.seek, inputEvent, config.listeners.seek, seek);
+
+ // Seek
+ utils.proxy(player.elements.inputs.volume, inputEvent, config.listeners.volume, setVolume);
// Seek tooltip
- _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
+ utils.on(player.elements.progress, '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);
+ utils.on(player.elements.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';
+ utils.on(player.elements.controls, 'mouseenter mouseleave', function(event) {
+ player.elements.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);
+ // Watch for cursor over controls so they don't hide when trying to interact
+ utils.on(player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
+ player.elements.controls.pressed = utils.inArray(['mousedown', 'touchstart'], event.type);
});
// Focus in/out on controls
- _on(plyr.controls, 'focus blur', _toggleControls, true);
+ // TODO: Check we need capture here
+ utils.on(player.elements.controls, 'focus blur', toggleControls, true, true);
}
- // Adjust volume on scroll
- _on(plyr.volume.input, 'wheel', function(event) {
- event.preventDefault();
-
+ // Mouse wheel for volume
+ utils.proxy(player.elements.inputs.volume, 'wheel', config.listeners.volume, function(event) {
// 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);
+ var inverted = event.webkitDirectionInvertedFromDevice;
+ var step = (1 / 5);
+ var direction = 0;
// Scroll down (or up on natural) to decrease
if (event.deltaY < 0 || event.deltaX > 0) {
if (inverted) {
- _decreaseVolume(step);
+ decreaseVolume(step);
+ direction = -1;
} else {
- _increaseVolume(step);
+ increaseVolume(step);
+ direction = 1;
}
}
// Scroll up (or down on natural) to increase
if (event.deltaY > 0 || event.deltaX < 0) {
if (inverted) {
- _increaseVolume(step);
+ increaseVolume(step);
+ direction = 1;
} else {
- _decreaseVolume(step);
+ decreaseVolume(step);
+ direction = -1;
}
}
- });
+
+ // Don't break page scrolling at max and min
+ if ((direction === 1 && player.elements.media.volume < 1) ||
+ (direction === -1 && player.elements.media.volume > 0)) {
+ event.preventDefault();
+ }
+ }, false);
+
+ // Handle user exiting fullscreen by escaping etc
+ if (support.fullscreen) {
+ utils.on(document, fullscreen.eventType, toggleFullscreen);
+ }
}
// Listen for media events
- function _mediaListeners() {
+ function mediaListeners() {
// Time change on media
- _on(plyr.media, 'timeupdate seeking', _timeUpdate);
-
- // Update manual captions
- _on(plyr.media, 'timeupdate', _seekManualCaptions);
+ utils.on(player.elements.media, 'timeupdate seeking', timeUpdate);
// Display duration
- _on(plyr.media, 'durationchange loadedmetadata', _displayDuration);
+ utils.on(player.elements.media, 'durationchange loadedmetadata', displayDuration);
// Handle the media finishing
- _on(plyr.media, 'ended', function() {
+ utils.on(player.elements.media, 'ended', function() {
// Show poster on end
- if (plyr.type === 'video' && config.showPosterOnEnd) {
+ if (player.type === 'video' && config.showPosterOnEnd) {
// Clear
- if (plyr.type === 'video') {
- _setCaption();
+ if (player.type === 'video') {
+ setCaption();
}
// Restart
- _seek();
+ seek();
// Re-load media
- plyr.media.load();
+ player.elements.media.load();
}
});
// Check for buffer progress
- _on(plyr.media, 'progress playing', _updateProgress);
+ utils.on(player.elements.media, 'progress playing', updateProgress);
// Handle native mute
- _on(plyr.media, 'volumechange', _updateVolume);
+ utils.on(player.elements.media, 'volumechange', updateVolume);
// Handle native play/pause
- _on(plyr.media, 'play pause ended', _checkPlaying);
+ utils.on(player.elements.media, 'play pause ended', checkPlaying);
// Loading
- _on(plyr.media, 'waiting canplay seeked', _checkLoading);
+ utils.on(player.elements.media, 'waiting canplay seeked', checkLoading);
// Click video
- if (config.clickToPlay && plyr.type !== 'audio') {
+ if (config.clickToPlay && player.type !== 'audio') {
// Re-fetch the wrapper
- var wrapper = _getElement('.' + config.classes.videoWrapper);
+ var wrapper = getElement('.' + config.classes.videoWrapper);
// Bail if there's no wrapper (this should never happen)
if (!wrapper) {
@@ -3173,80 +4446,77 @@
wrapper.style.cursor = "pointer";
// On click play, pause ore restart
- _on(wrapper, 'click', function() {
+ utils.on(wrapper, 'click', function() {
// Touch devices will just show controls (if we're hiding controls)
- if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
+ if (config.hideControls && support.touch && !player.elements.media.paused) {
return;
}
- if (plyr.media.paused) {
- _play();
- } else if (plyr.media.ended) {
- _seek();
- _play();
+ if (player.elements.media.paused) {
+ play();
+ } else if (player.elements.media.ended) {
+ seek();
+ play();
} else {
- _pause();
+ pause();
}
});
}
// Disable right click
if (config.disableContextMenu) {
- _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); });
+ utils.on(player.elements.media, 'contextmenu', function(event) {
+ event.preventDefault();
+ }, false);
}
// 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);
+ utils.on(player.elements.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
+ trigger(player.elements.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)) {
+ // See https://github.com/Selz/plyr/issues/174
+ function cancelRequests() {
+ if (!utils.inArray(types.html5, player.type)) {
return;
}
// Remove child sources
- var sources = plyr.media.querySelectorAll('source');
+ var sources = player.elements.media.querySelectorAll('source');
for (var i = 0; i < sources.length; i++) {
- _remove(sources[i]);
+ utils.removeElement(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);
+ player.elements.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4');
// Load the new empty source
// This will cancel existing requests
- // See https://github.com/sampotts/plyr/issues/174
- plyr.media.load();
+ // See https://github.com/Selz/plyr/issues/174
+ player.elements.media.load();
// Debugging
- _log('Cancelled network requests');
+ 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;
- }
-
+ function destroy(callback, restore) {
// Type specific stuff
- switch (plyr.type) {
+ switch (player.type) {
case 'youtube':
// Clear timers
window.clearInterval(timers.buffering);
window.clearInterval(timers.playing);
// Destroy YouTube API
- plyr.embed.destroy();
+ player.embed.destroy();
// Clean up
cleanUp();
@@ -3256,17 +4526,17 @@
case 'vimeo':
// Destroy Vimeo API
// then clean up (wait, to prevent postmessage errors)
- plyr.embed.unload().then(cleanUp);
+ player.embed.unload().then(cleanUp);
// Vimeo does not always return
- timers.cleanUp = window.setTimeout(cleanUp, 200);
+ window.setTimeout(cleanUp, 200);
break;
case 'video':
case 'audio':
// Restore native video controls
- _toggleNativeControls(true);
+ toggleNativeControls(true);
// Clean up
cleanUp();
@@ -3275,16 +4545,14 @@
}
function cleanUp() {
- clearTimeout(timers.cleanUp);
-
// Default to restore original element
- if (!_is.boolean(restore)) {
+ if (!utils.is.boolean(restore)) {
restore = true;
}
// Callback
- if (_is.function(callback)) {
- callback.call(original);
+ if (utils.is.function(callback)) {
+ callback.call(player.original);
}
// Bail if we don't need to restore the original element
@@ -3292,485 +4560,296 @@
return;
}
- // Remove init flag
- plyr.init = false;
-
// Replace the container with the original element provided
- plyr.container.parentNode.replaceChild(original, plyr.container);
+ player.elements.container.parentNode.replaceChild(player.original, player.elements.container);
- // Allow overflow (set on fullscreen)
+ // Reset overflow (incase destroyed while fullscreen)
document.body.style.overflow = '';
// Event
- _triggerEvent(original, 'destroyed', true);
+ trigger(player.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();
-
- // 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() {
+ function setupInterface() {
// Don't setup interface if no support
- if (!plyr.supported.full) {
- _warn('Basic support only', plyr.type);
+ if (!player.supported.full) {
+ warn('Basic support only', player.type);
// Remove controls
- _remove(_getElement(config.selectors.controls.wrapper));
+ removeElement('controls');
// Remove large play
- _remove(_getElement(config.selectors.buttons.play));
+ removeElement('buttons.play');
// Restore native controls
- _toggleNativeControls(true);
+ toggleNativeControls(true);
// Bail
return;
}
// Inject custom controls if not present
- var controlsMissing = !_getElements(config.selectors.controls.wrapper).length;
- if (controlsMissing) {
+ if (!utils.is.htmlElement(player.elements.controls)) {
// Inject custom controls
- _injectControls();
- }
+ injectControls();
- // Find the elements
- if (!_findElements()) {
- return;
+ // Re-attach listeners
+ controlListeners();
}
- // If the controls are injected, re-bind listeners for controls
- if (controlsMissing) {
- _controlListeners();
+ // If there's no controls, bail
+ if (!utils.is.htmlElement(player.elements.controls)) {
+ return;
}
// Media element listeners
- _mediaListeners();
+ mediaListeners();
// Remove native controls
- _toggleNativeControls();
+ toggleNativeControls();
// Setup fullscreen
- _setupFullscreen();
+ setupFullscreen();
// Captions
- _setupCaptions();
+ setupCaptions();
// Set volume
- _setVolume();
- _updateVolume();
+ setVolume();
+ updateVolume();
+
+ // Set playback speed
+ setSpeed();
+
+ // Set loop
+ toggleLoop();
// Reset time display
- _timeUpdate();
+ timeUpdate();
// Update the UI
- _checkPlaying();
+ checkPlaying();
}
- 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);
-
+ function ready() {
// Set class hook on media element
- _toggleClass(plyr.media, defaults.classes.setup, true);
+ // utils.toggleClass(player.elements.media, defaults.classes.setup, true);
// Set container class for ready
- _toggleClass(plyr.container, config.classes.ready, true);
+ // utils.toggleClass(player.elements.container, config.classes.ready, true);
// Store a refernce to instance
- plyr.media.plyr = api;
+ // player.elements.media.plyr = api;
+
+ // Ready event at end of execution stack
+ trigger(player.elements.container, 'ready', true);
// Autoplay
if (config.autoplay) {
- _play();
+ 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;
- }
-
- // Inject hidden div with sprite on load
- x.onload = function() {
- container.innerHTML = x.responseText;
- }
-
- x.send();
- }
-
- // 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;
-
- switch (type) {
- case 'video':
- basic = videoSupport;
- full = (basic && (!isOldIE && !isIphone));
- break;
-
- case 'audio':
- basic = audioSupport;
- full = (basic && !isOldIE);
- break;
-
- // 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;
- }
+ // Setup a player
+ function setup(target) {
+ // We need an element to setup
+ if (!utils.is.htmlElement(target)) {
+ error('Setup failed. No suitable element passed.');
+ return false;
+ }
- break;
+ // Bail if not enabled
+ if (!config.enabled) {
+ return false;
+ }
- case 'soundcloud':
- basic = true;
- full = (!isOldIE && !isIphone);
- break;
+ // Bail if disabled or no basic support
+ // You may want to disable certain UAs etc
+ if (!utils.checkSupport().basic) {
+ return false;
+ }
- default:
- basic = (audioSupport && videoSupport);
- full = (basic && !isOldIE);
- }
+ // Bail if the element is initialized
+ if (target.plyr) {
+ return false;
+ }
- return {
- basic: basic,
- full: full
- };
- }
+ // Set media type based on tag or data attribute
+ // Supported: video, audio, vimeo, youtube
+ var type = target.tagName.toLowerCase();
- // Setup function
- function setup(targets, options) {
- // Get the players
- var players = [],
- instances = [],
- selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
+ // Different setup based on type
+ switch (type) {
+ case 'div':
+ player.type = target.getAttribute('data-type');
+ player.embedId = target.getAttribute('data-video-id');
- // 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;
- }
+ if (utils.is.empty(player.type) || utils.is.empty(player.embedId)) {
+ return false;
+ }
- // Use default selector
- targets = document.querySelectorAll(selector);
- }
+ // Clean up
+ target.removeAttribute('data-type');
+ target.removeAttribute('data-video-id');
+ break;
- // Convert NodeList to array
- if (_is.nodeList(targets)) {
- targets = Array.prototype.slice.call(targets);
- }
+ case 'iframe':
+ // Do something with the iframe
+ break;
- // Bail if disabled or no basic support
- // You may want to disable certain UAs etc
- if (!supported().basic || !targets.length) {
- return false;
- }
+ case 'video':
+ case 'audio':
+ player.type = type;
+ config.crossorigin = target.getAttribute('crossorigin') !== null;
+ config.autoplay = config.autoplay || (target.getAttribute('autoplay') !== null);
+ config.inline = target.getAttribute('playsinline') !== null;
+ config.loop.active = config.loop || (target.getAttribute('loop') !== null);
+ break;
- // 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
- });
+ default:
+ return false;
}
- }
-
- // 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);
+ // Sniff out the browser
+ player.browser = utils.getBrowser();
- // 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);
- }
- }
+ // Load saved settings from localStorage
+ setupStorage();
- // Create a player instance for each element
- players.forEach(function(player) {
- var element = player.target,
- media = player.media,
- match = false;
+ // Check for support
+ player.supported = utils.checkSupport(player.type, config.inline);
- // The target element can also be the media element
- if (media === element) {
- match = true;
+ // If no native support, bail
+ if (!player.supported.basic) {
+ return false;
}
- // Setup a player instance and add to the element
- // Create instance-specific config
- var data = {};
+ // Wrap media
+ player.elements.container = utils.wrap(target, utils.createElement('div'));
- // Try parsing data attribute config
- try { data = JSON.parse(element.getAttribute('data-plyr')); }
- catch(e) { }
+ // Cache original element state for .destroy()
+ player.original = target.cloneNode(true);
- var config = _extend({}, defaults, options, data);
+ // Allow focus to be captured
+ player.elements.container.setAttribute('tabindex', 0);
- // Bail if not enabled
- if (!config.enabled) {
- return null;
- }
+ // Add style hook
+ toggleStyleHook();
- // Create new instance
- var instance = new Plyr(media, config);
+ // Debug info
+ log(player.browser.name + ' ' + player.browser.version);
- // Go to next if setup failed
- if (!_is.object(instance)) {
- return;
- }
+ // Setup media
+ setupMedia();
// 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);
+ utils.on(player.elements.container, events.join(' '), function(event) {
+ log(['event:', event.type].join(' ').trim());
});
}
- // Callback
- _event(instance.getContainer(), 'setup', true, {
- plyr: instance
- });
+ // Setup interface
+ // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now
+ if (utils.inArray(types.html5, player.type) || (utils.inArray(types.embed, player.type) && !player.supported.full)) {
+ // Setup UI
+ setupInterface();
- // Add to return array even if it's already setup
- instances.push(instance);
- });
+ // Call ready
+ ready();
- return instances;
- }
+ // Set title on button and frame
+ setTitle();
+ }
- // 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;
+ // Successful setup
+ return true;
}
- // 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);
- }
- });
+ // Expose prototypes
+ api = {
+ getOriginal: function() {
+ return player.original;
+ },
+ getContainer: function() {
+ return player.elements.container
+ },
+ getEmbed: function() {
+ return player.embed;
+ },
+ getMedia: function() {
+ return player.elements.media;
+ },
+ getType: function() {
+ return player.type;
+ },
+ getDuration: getDuration,
+ getCurrentTime: function() {
+ return player.elements.media.currentTime;
+ },
+ getVolume: function() {
+ return player.elements.media.volume;
+ },
+ isMuted: function() {
+ return player.elements.media.muted;
+ },
+ isReady: function() {
+ return utils.hasClass(player.elements.container, config.classes.ready);
+ },
+ isLoading: function() {
+ return utils.hasClass(player.elements.container, config.classes.loading);
+ },
+ isPaused: function() {
+ return player.elements.media.paused;
+ },
+ isLooping: function() {
+ return config.loop.active;
+ },
+ on: function(event, callback) {
+ utils.on(player.elements.container, event, callback);
+ return this;
+ },
+ play: play,
+ pause: pause,
+ loop: toggleLoop,
+ stop: function() {
+ pause();
+ seek();
+ },
+ restart: seek,
+ rewind: rewind,
+ forward: forward,
+ seek: seek,
+ source: source,
+ poster: updatePoster,
+ setVolume: setVolume,
+ setSpeed: setSpeed,
+ togglePlay: togglePlay,
+ toggleMute: toggleMute,
+ toggleCaptions: toggleCaptions,
+ toggleFullscreen: toggleFullscreen,
+ toggleControls: toggleControls,
+ setLanguage: setLanguage,
+ isFullscreen: player.fullscreen.active,
+ support: function(mimeType) {
+ return support.mime(player, mimeType);
+ },
+ destroy: destroy
+ };
- return instances;
+ // Initialize instance
+ if (!setup(player.elements.media)) {
+ return null;
}
- return [];
+ // Expose API
+ return api;
}
- return {
- setup: setup,
- supported: supported,
- loadSprite: loadSprite,
- get: get
- };
+ return Player;
}));
-
-// Custom event polyfill
-// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-(function () {
- if (typeof window.CustomEvent === 'function') {
- return;
- }
-
- 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;
- }
-
- CustomEvent.prototype = window.Event.prototype;
-
- window.CustomEvent = CustomEvent;
-})();