diff options
| author | Sam Potts <me@sampotts.me> | 2017-01-10 21:43:28 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2017-01-10 21:43:28 +1100 |
| commit | c49d0a99e427bf61a733144292752e921b406d1d (patch) | |
| tree | 2bd753ebc5519b8f8d0a56acb7abcb81db2b7f22 /src/js/plyr.js | |
| parent | 663c1fb62747d8b3ae2c6c2073b52ff7e9c420a4 (diff) | |
| download | plyr-c49d0a99e427bf61a733144292752e921b406d1d.tar.lz plyr-c49d0a99e427bf61a733144292752e921b406d1d.tar.xz plyr-c49d0a99e427bf61a733144292752e921b406d1d.zip | |
JsBeautifier
Diffstat (limited to 'src/js/plyr.js')
| -rw-r--r-- | src/js/plyr.js | 2427 |
1 files changed, 1272 insertions, 1155 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index ddc20630..2100aa47 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -7,7 +7,7 @@ // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -;(function(root, factory) { +(function(root, factory) { 'use strict'; /* global define,module */ @@ -16,7 +16,9 @@ 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); @@ -25,179 +27,182 @@ 'use strict'; // Globals - 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, - defaultSpeed: 1.0, - currentSpeed: 1.0, - speeds: [0.5, 1.0, 1.5, 2.0], - 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, - keyboardShorcuts: { - focused: true, - global: false - }, - tooltips: { - controls: false, - seek: true + var scroll = { + x: 0, + y: 0 }, - selectors: { - html5: 'video, audio', - embed: '[data-type]', - editable: 'input, textarea, select, [contenteditable]', - container: '.plyr', - controls: { - container: null, - wrapper: '.plyr__controls' + + // Default config + defaults = { + enabled: true, + debug: false, + autoplay: false, + loop: false, + seekTime: 10, + volume: 10, + volumeMin: 0, + volumeMax: 10, + volumeStep: 1, + defaultSpeed: 1.0, + currentSpeed: 1.0, + speeds: [0.5, 1.0, 1.5, 2.0], + 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, + keyboardShorcuts: { + focused: true, + global: false }, - 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"]', - settings: '[data-plyr="settings"]', - pip: '[data-plyr="pip"]', - airplay: '[data-plyr="airplay"]' + tooltips: { + controls: false, + seek: true }, - volume: { - input: '[data-plyr="volume"]', - display: '.plyr__volume--display' + selectors: { + html5: 'video, audio', + embed: '[data-type]', + editable: 'input, textarea, select, [contenteditable]', + container: '.plyr', + controls: { + container: null, + wrapper: '.plyr__controls' + }, + labels: '[data-plyr]', + buttons: { + seek: '[data-plyr="seek"]', + play: '[data-plyr="play"]', + pause: '[data-plyr="pause"]', + restart: '[data-plyr="restart"]', + rewind: '[data-plyr="rewind"]', + forward: '[data-plyr="fast-forward"]', + mute: '[data-plyr="mute"]', + captions: '[data-plyr="captions"]', + fullscreen: '[data-plyr="fullscreen"]', + settings: '[data-plyr="settings"]', + pip: '[data-plyr="pip"]', + airplay: '[data-plyr="airplay"]' + }, + volume: { + input: '[data-plyr="volume"]', + display: '.plyr__volume--display' + }, + progress: { + container: '.plyr__progress', + buffer: '.plyr__progress--buffer', + played: '.plyr__progress--played' + }, + captions: '.plyr__captions', + currentTime: '.plyr__time--current', + duration: '.plyr__time--duration' }, - progress: { - container: '.plyr__progress', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played' + classes: { + setup: 'plyr--setup', + ready: 'plyr--ready', + videoWrapper: 'plyr__video-wrapper', + embedWrapper: 'plyr__video-embed', + type: 'plyr--{0}', + stopped: 'plyr--stopped', + playing: 'plyr--playing', + muted: 'plyr--muted', + loading: 'plyr--loading', + hover: 'plyr--hover', + tooltip: 'plyr__tooltip', + hidden: 'plyr__sr-only', + hideControls: 'plyr--hide-controls', + isIos: 'plyr--is-ios', + isTouch: 'plyr--is-touch', + captions: { + enabled: 'plyr--captions-enabled', + active: 'plyr--captions-active' + }, + fullscreen: { + enabled: 'plyr--fullscreen-enabled', + active: 'plyr--fullscreen-active' + }, + pip: { + enabled: 'plyr--pip-enabled', + active: 'plyr--pip-active' + }, + tabFocus: 'tab-focus' }, - captions: '.plyr__captions', - currentTime: '.plyr__time--current', - duration: '.plyr__time--duration' - }, - classes: { - setup: 'plyr--setup', - ready: 'plyr--ready', - videoWrapper: 'plyr__video-wrapper', - embedWrapper: 'plyr__video-embed', - type: 'plyr--{0}', - stopped: 'plyr--stopped', - playing: 'plyr--playing', - muted: 'plyr--muted', - loading: 'plyr--loading', - hover: 'plyr--hover', - tooltip: 'plyr__tooltip', - hidden: 'plyr__sr-only', - hideControls: 'plyr--hide-controls', - isIos: 'plyr--is-ios', - isTouch: 'plyr--is-touch', captions: { - enabled: 'plyr--captions-enabled', - active: 'plyr--captions-active' + defaultActive: false, + selectedIndex: 0 }, fullscreen: { - enabled: 'plyr--fullscreen-enabled', - active: 'plyr--fullscreen-active' + enabled: true, + fallback: true, + allowAudio: false }, - pip: { - enabled: 'plyr--pip-enabled', - active: 'plyr--pip-active' + storage: { + enabled: true, + key: 'plyr' }, - tabFocus: 'tab-focus' - }, - captions: { - defaultActive: false, - selectedIndex: 0 - }, - fullscreen: { - enabled: true, - fallback: true, - allowAudio: false - }, - storage: { - enabled: true, - key: 'plyr' - }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'pip', 'airplay', 'fullscreen'], - i18n: { - restart: 'Restart', - rewind: 'Rewind {seektime} secs', - play: 'Play', - pause: 'Pause', - forward: 'Forward {seektime} secs', - played: 'played', - buffered: 'buffered', - currentTime: 'Current time', - duration: 'Duration', - volume: 'Volume', - toggleMute: 'Toggle Mute', - toggleCaptions: 'Toggle Captions', - toggleFullscreen: 'Toggle Fullscreen', - frameTitle: 'Player for {title}', - captions: 'Captions', - settings: 'Settings', - speed: 'Speed', - quality: 'Quality' - }, - types: { - embed: ['youtube', 'vimeo', 'soundcloud'], - html5: ['video', 'audio'] - }, - // URLs - urls: { - vimeo: { - api: 'https://player.vimeo.com/api/player.js', + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'pip', 'airplay', 'fullscreen'], + i18n: { + restart: 'Restart', + rewind: 'Rewind {seektime} secs', + play: 'Play', + pause: 'Pause', + forward: 'Forward {seektime} secs', + played: 'played', + buffered: 'buffered', + currentTime: 'Current time', + duration: 'Duration', + volume: 'Volume', + toggleMute: 'Toggle Mute', + toggleCaptions: 'Toggle Captions', + toggleFullscreen: 'Toggle Fullscreen', + frameTitle: 'Player for {title}', + captions: 'Captions', + settings: 'Settings', + speed: 'Speed', + quality: 'Quality' }, - youtube: { - api: 'https://www.youtube.com/iframe_api' + types: { + embed: ['youtube', 'vimeo', 'soundcloud'], + html5: ['video', 'audio'] }, - soundcloud: { - api: 'https://w.soundcloud.com/player/api.js' - } - }, - // Custom control listeners - listeners: { - seek: null, - play: null, - pause: null, - restart: null, - rewind: null, - forward: null, - mute: null, - volume: null, - captions: null, - fullscreen: null, - speed: 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'], - // Logging - logPrefix: '[Plyr]' - }; + // URLs + urls: { + vimeo: { + api: 'https://player.vimeo.com/api/player.js', + }, + youtube: { + api: 'https://www.youtube.com/iframe_api' + }, + soundcloud: { + api: 'https://w.soundcloud.com/player/api.js' + } + }, + // Custom control listeners + listeners: { + seek: null, + play: null, + pause: null, + restart: null, + rewind: null, + forward: null, + mute: null, + volume: null, + captions: null, + fullscreen: null, + speed: 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'], + // Logging + logPrefix: '' + }; // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to mixed support, UA sniffing is required - function _getBrowser() { + function getBrowser() { var ua = navigator.userAgent, name = navigator.appName, fullVersion = '' + parseFloat(navigator.appVersion), @@ -240,7 +245,7 @@ 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); + name = ua.substring(nameOffset, verOffset); fullVersion = ua.substring(verOffset + 1); if (name.toLowerCase() === name.toUpperCase()) { @@ -265,19 +270,19 @@ // Return data return { - name: name, - version: majorVersion, - isIE: isIE, - isFirefox: isFirefox, - isChrome: isChrome, - isSafari: isSafari, - isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), - isTouch: 'ontouchstart' in document.documentElement + name: name, + version: majorVersion, + isIE: isIE, + isFirefox: isFirefox, + isChrome: isChrome, + isSafari: isSafari, + isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), + isTouch: 'ontouchstart' in document.documentElement }; } // Inject a script - function _injectScript(source) { + function injectScript(source) { if (document.querySelectorAll('script[src="' + source + '"]').length) { return; } @@ -289,17 +294,17 @@ } // Element exists in an array - function _inArray(haystack, needle) { + function inArray(haystack, needle) { return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1); } // Replace all - function _replaceAll(string, find, replace) { + function replaceAll(string, find, replace) { return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); } // Wrap an element - function _wrap(elements, wrapper) { + function wrap(elements, wrapper) { // Convert `elements` to an array, if necessary. if (!elements.length) { elements = [elements]; @@ -308,11 +313,11 @@ // 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 child = (i > 0) ? wrapper.cloneNode(true) : wrapper; var element = elements[i]; // Cache the current parent and sibling. - var parent = element.parentNode; + var parent = element.parentNode; var sibling = element.nextSibling; // Wrap the element (is automatically removed from its current @@ -333,7 +338,7 @@ } // Remove an element - function _remove(element) { + function remove(element) { if (!element) { return; } @@ -341,36 +346,36 @@ } // Prepend child - function _prependChild(parent, element) { + function prependChild(parent, element) { parent.insertBefore(element, parent.firstChild); } // Set attributes - function _setAttributes(element, attributes) { + function setAttributes(element, attributes) { for (var key in attributes) { - element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]); + element.setAttribute(key, (is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]); } } // Insert a HTML element - function _insertElement(type, parent, attributes) { + function insertElement(type, parent, attributes) { // Create a new <element> var element = document.createElement(type); // Set all passed attributes - _setAttributes(element, attributes); + setAttributes(element, attributes); // Inject the new element - _prependChild(parent, element); + prependChild(parent, element); } // Get a classname from selector - function _getClassname(selector) { + function getClassname(selector) { return selector.replace('.', ''); } // Toggle class on an element - function _toggleClass(element, className, state) { + function toggleClass(element, className, state) { if (element) { if (element.classList) { element.classList[state ? 'add' : 'remove'](className); @@ -382,7 +387,7 @@ } // Has class name - function _hasClass(element, className) { + function hasClass(element, className) { if (element) { if (element.classList) { return element.classList.contains(className); @@ -394,7 +399,7 @@ } // Element matches selector - function _matches(element, selector) { + function matches(element, selector) { var p = Element.prototype; var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { @@ -405,8 +410,8 @@ } // Bind along with custom handler - function _proxyListener(element, eventName, userListener, defaultListener, useCapture) { - _on(element, eventName, function(event) { + function proxyListener(element, eventName, userListener, defaultListener, useCapture) { + on(element, eventName, function(event) { if (userListener) { userListener.apply(element, [event]); } @@ -415,12 +420,12 @@ } // Toggle event listener - function _toggleListener(elements, events, callback, toggle, useCapture) { + function toggleListener(elements, events, callback, toggle, useCapture) { var eventList = events.split(' '); // Whether the listener is a capturing listener or not // Default to false - if (!_is.boolean(useCapture)) { + if (!is.boolean(useCapture)) { useCapture = false; } @@ -428,7 +433,7 @@ if (elements instanceof NodeList) { for (var x = 0; x < elements.length; x++) { if (elements[x] instanceof Node) { - _toggleListener(elements[x], arguments[1], arguments[2], arguments[3]); + toggleListener(elements[x], arguments[1], arguments[2], arguments[3]); } } return; @@ -441,35 +446,35 @@ } // Bind event handler - function _on(element, events, callback, useCapture) { - if (!_is.undefined(element)) { - _toggleListener(element, events, callback, true, useCapture); + function on(element, events, callback, useCapture) { + if (!is.undefined(element)) { + toggleListener(element, events, callback, true, useCapture); } } // Unbind event handler - function _off(element, events, callback, useCapture) { - if (!_is.undefined(element)) { - _toggleListener(element, events, callback, false, useCapture); + function off(element, events, callback, useCapture) { + if (!is.undefined(element)) { + toggleListener(element, events, callback, false, useCapture); } } // Trigger event - function _event(element, type, bubbles, properties) { + function event(element, type, bubbles, properties) { // Bail if no element if (!element || !type) { return; } // Default bubbles to false - if (!_is.boolean(bubbles)) { + if (!is.boolean(bubbles)) { bubbles = false; } // Create and dispatch the event - var event = new CustomEvent(type, { - bubbles: bubbles, - detail: properties + var event = new CustomEvent(type, { + bubbles: bubbles, + detail: properties }); // Dispatch the event @@ -478,14 +483,14 @@ // 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) { + function toggleState(target, state) { // Bail if no target if (!target) { return; } // Get state - state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed')); + state = (is.boolean(state) ? state : !target.getAttribute('aria-pressed')); // Set the attribute on target target.setAttribute('aria-pressed', state); @@ -494,7 +499,7 @@ } // Get percentage - function _getPercentage(current, max) { + function getPercentage(current, max) { if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) { return 0; } @@ -504,7 +509,7 @@ // 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() { + function extend() { // Get arguments var objects = arguments; @@ -520,7 +525,7 @@ // First object is the destination var destination = Array.prototype.shift.call(objects), - length = objects.length; + length = objects.length; // Loop through all objects to merge for (var i = 0; i < length; i++) { @@ -529,7 +534,7 @@ for (var property in source) { if (source[property] && source[property].constructor && source[property].constructor === Object) { destination[property] = destination[property] || {}; - _extend(destination[property], source[property]); + extend(destination[property], source[property]); } else { destination[property] = source[property]; } @@ -539,10 +544,28 @@ return destination; } + // Loop through an object or array + function each(variable, callback) { + if (is.object(variable)) { + for (var key in variable) { + if (variable.hasOwnProperty(key)) { + var element = variable[key]; + callback.call(element, key, element); + } + } + } else if (is.array(variable)) { + var length = variable.length; + for (var index = 0; index < length; index++) { + var item = variable[index]; + callback.call(item, index, item); + } + } + } + // Check variable types - var _is = { + var is = { object: function(input) { - return input !== null && typeof(input) === 'object' && input.constructor === Object; + return input !== null && typeof(input) === 'object' && input.constructor === Object; }, array: function(input) { return input !== null && typeof(input) === 'object' && input.constructor === Array; @@ -577,97 +600,89 @@ }; // Parse YouTube ID from url - function _parseYouTubeId(url) { + function parseYouTubeId(url) { var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; return (url.match(regex)) ? RegExp.$2 : url; } // Parse Vimeo ID from url - function _parseVimeoId(url) { + function parseVimeoId(url) { var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; return (url.match(regex)) ? RegExp.$2 : url; } // Fullscreen API - var _fullscreen; - (function() { - // Determine the prefix - var prefix = (function() { - var value = false; - - if (_is.function(document.cancelFullScreen)) { - value = ''; - } else { - // Check for fullscreen support by vendor prefix - ['webkit', 'o', 'moz', 'ms', 'khtml'].some(function(prefix) { - if (_is.function(document[prefix + 'CancelFullScreen'])) { - value = prefix; - return true; - } else if (_is.function(document.msExitFullscreen) && document.msFullscreenEnabled) { - // Special case for MS (when isn't it?) - value = 'ms'; - return true; - } - }); - } + // Determine the prefix + var prefix = false; - return value; - })(); + if (is.function(document.cancelFullScreen)) { + prefix = ''; + } else { + // Check for fullscreen support by vendor prefix + ['webkit', 'o', 'moz', 'ms', 'khtml'].some(function(test) { + if (is.function(document[test + 'CancelFullScreen'])) { + prefix = test; + return true; + } else if (is.function(document.msExitFullscreen) && document.msFullscreenEnabled) { + // Special case for MS (when isn't it?) + prefix = 'ms'; + return true; + } + }); + } - _fullscreen = { - prefix: prefix, - // Yet again Microsoft awesomeness, - // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes - eventType: (prefix === 'ms' ? 'MSFullscreenChange' : prefix + 'fullscreenchange'), + var fullscreen = { + prefix: prefix, - // Is an element fullscreen - isFullScreen: function(element) { - if (!_support.fullscreen) { - return false; - } - if (_is.undefined(element)) { - element = document.body; - } - switch (this.prefix) { - case '': - return document.fullscreenElement === element; - case 'moz': - return document.mozFullScreenElement === element; - default: - return document[prefix + 'FullscreenElement'] === element; - } - }, - requestFullScreen: function(element) { - if (!_support.fullscreen) { - return false; - } - if (!_is.htmlElement(element)) { - element = document.body; - } + // Yet again Microsoft awesomeness, + // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes + eventType: (prefix === 'ms' ? 'MSFullscreenChange' : prefix + 'fullscreenchange'), - console.log(prefix); + // Is an element fullscreen + isFullScreen: function(element) { + if (!support.fullscreen) { + return false; + } + if (is.undefined(element)) { + element = document.body; + } + switch (this.prefix) { + case '': + return document.fullscreenElement === element; + case 'moz': + return document.mozFullScreenElement === element; + default: + return document[prefix + 'FullscreenElement'] === element; + } + }, + requestFullScreen: function(element) { + if (!support.fullscreen) { + return false; + } + if (!is.htmlElement(element)) { + element = document.body; + } - 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 (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']; + } + }; // Check for support - var _support = { + var support = { // Fullscreen support and set prefix - fullscreen: _fullscreen.prefix !== false, + fullscreen: fullscreen.prefix !== false, // Local storage mode // We can't assume if local storage is present that we can use it storage: (function() { @@ -689,22 +704,21 @@ // Check if value matches return (result === 'OK'); - } - catch (e) { + } catch (e) { return false; } return false; })(), // Picture-in-picture support - // Safari only currently + // Safari only currently pip: (function() { - return _is.function(document.createElement('video').webkitSetPresentationMode); + return is.function(document.createElement('video').webkitSetPresentationMode); })(), // Airplay support - // Safari only currently + // Safari only currently airplay: (function() { - return _is.function(window.WebKitPlaybackTargetAvailabilityEvent); + return is.function(window.WebKitPlaybackTargetAvailabilityEvent); })(), // Check for mime type support against a player instance // Credits: http://diveintohtml5.info/everything.html @@ -713,27 +727,32 @@ var media = plyr.media; try { - // Bail if no checking function - if (!_is.function(media.canPlayType)) { + // Bail if no checking function + if (!is.function(media.canPlayType)) { return false; } // Type specific checks if (plyr.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/, ''); + 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 (plyr.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/, ''); + 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) { + } catch (e) { return false; } @@ -745,59 +764,64 @@ // Player instance function Plyr(media, config) { var plyr = this, - timers = {}, - api; + timers = {}, + api; - // Set media + // Set media plyr.media = media; var original = media.cloneNode(true); // Trigger events, with plyr instance passed - function _triggerEvent(element, type, bubbles, properties) { - _event(element, type, bubbles, _extend({}, properties, { + function triggerEvent(element, type, bubbles, properties) { + event(element, type, bubbles, extend({}, properties, { plyr: api })); } - // Debugging - function _console(type, args) { + // Debugging proxy + function debug(type, args) { if (config.debug && window.console) { args = Array.prototype.slice.call(args); - if (_is.string(config.logPrefix) && config.logPrefix.length) { + // Add a logging prefix if set + if (!is.empty(config.logPrefix)) { args.unshift(config.logPrefix); } - + console[type].apply(console, args); } } - var _log = function() { _console('log', arguments) }, - _warn = function() { _console('warn', arguments) }; + var log = function() { + debug('log', arguments); + }; + var warn = function() { + debug('warn', arguments); + }; // Log config options - _log('Config', config); + log('Config', config); // 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) || plyr.browser.isIE }; } // Build the default HTML - function _buildControls() { + function buildControls() { // Create html array - var html = [], - iconUrl = _getIconUrl(), - iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; + var html = [], + iconUrl = getIconUrl(), + iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; // Larger overlaid play button - if (_inArray(config.controls, 'play-large')) { + 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>', + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.play + '</span>', '</button>' ); } @@ -805,59 +829,59 @@ html.push('<div class="plyr__controls">'); // Restart button - if (_inArray(config.controls, 'restart')) { + if (inArray(config.controls, 'restart')) { html.push( '<button type="button" class="plyr__control" data-plyr="restart">', - '<svg><use xlink:href="' + iconPath + '-restart" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.restart + '</span>', + '<svg><use xlink:href="' + iconPath + '-restart" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.restart + '</span>', '</button>' ); } // Rewind button - if (_inArray(config.controls, 'rewind')) { + if (inArray(config.controls, 'rewind')) { html.push( '<button type="button" class="plyr__control" data-plyr="rewind">', - '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', + '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', '</button>' ); } // Play Pause button // TODO: This should be a toggle button really? - if (_inArray(config.controls, 'play')) { + if (inArray(config.controls, 'play')) { html.push( '<button type="button" class="plyr__control" data-plyr="play">', - '<svg><use xlink:href="' + iconPath + '-play" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.play + '</span>', + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.play + '</span>', '</button>', '<button type="button" class="plyr__control" data-plyr="pause">', - '<svg><use xlink:href="' + iconPath + '-pause" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.pause + '</span>', + '<svg><use xlink:href="' + iconPath + '-pause" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.pause + '</span>', '</button>' ); } // Fast forward button - if (_inArray(config.controls, 'fast-forward')) { + if (inArray(config.controls, 'fast-forward')) { html.push( '<button type="button" class="plyr__control" data-plyr="fast-forward">', - '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.forward + '</span>', + '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.forward + '</span>', '</button>' ); } // Progress - if (_inArray(config.controls, '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, + '<span>0</span>% ' + config.i18n.buffered, '</progress>'); // Seek tooltip @@ -870,213 +894,225 @@ } // Media current time display - if (_inArray(config.controls, 'current-time')) { + 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 class="plyr__sr-only">' + config.i18n.currentTime + '</span>', + '<span class="plyr__time--current">00:00</span>', '</span>' ); } // Media duration display - if (_inArray(config.controls, 'duration')) { + 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 class="plyr__sr-only">' + config.i18n.duration + '</span>', + '<span class="plyr__time--duration">00:00</span>', '</span>' ); } // Toggle mute button - if (_inArray(config.controls, 'mute')) { + if (inArray(config.controls, 'mute')) { html.push( '<button type="button" class="plyr__control" 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>', + '<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>' ); } // Volume range control - if (_inArray(config.controls, 'volume')) { + 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>', + '<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>' ); } // Toggle captions button - if (_inArray(config.controls, 'captions')) { + if (inArray(config.controls, 'captions')) { html.push( '<button type="button" class="plyr__control" 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>', + '<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>' ); } // Settings button / menu - if (_inArray(config.controls, 'settings')) { + if (inArray(config.controls, 'settings')) { html.push( '<div class="plyr__menu" data-plyr="settings">', - '<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">', - '<svg><use xlink:href="' + iconPath + '-settings" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.settings + '</span>', - '</button>', - '<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">', - '<div>', - '<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">', - '<ul>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">', - config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>', - '</button>', - '</li>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">', - config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>', - '</button>', - '</li>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">', - config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>', - '</button>', - '</li>', - '</ul>', - '</div>', - '<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">', - '<ul>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', - config.i18n.captions, - '</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">English</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">Off</button>', - '</li>', - '</ul>', - '</div>', - '<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">', - '<ul>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', - config.i18n.speed, - '</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">2×</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">1.5×</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">1×</button>', - '</li>', - '<li>', - '<button type="button" class="plyr__control">0.5×</button>', - '</li>', - '</ul>', - '</div>', - '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">', - '<ul>', - '<li role="tab">', - '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', - config.i18n.quality, - '</button>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '2160P', - '<span class="plyr__menu__value">', - '<span class="plyr__badge">4K</span>', - '</span>', - '</label>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '1440P', - '<span class="plyr__menu__value">', - '<span class="plyr__badge">WQHD</span>', - '</span>', - '</label>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '1080P', - '<span class="plyr__menu__value">', - '<span class="plyr__badge">HD</span>', - '</span>', - '</label>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '720P', - '<span class="plyr__menu__value">', - '<span class="plyr__badge">HD</span>', - '</span>', - '</label>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '480P', - '</label>', - '</li>', - '<li>', - '<label class="plyr__control">', - '<input type="radio" name="quality">', - '360P', - '</label>', - '</li>', - '</ul>', - '</div>', - '</div>', - '</div>', + '<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">', + '<svg><use xlink:href="' + iconPath + '-settings" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.settings + '</span>', + '</button>', + '<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">', + '<div>', + '<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">', + '<ul>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">', + config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>', + '</button>', + '</li>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">', + config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>', + '</button>', + '</li>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">', + config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>', + '</button>', + '</li>', + '</ul>', + '</div>', + '<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">', + '<ul>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', + config.i18n.captions, + '</button>', + '</li>', + '<li>', + '<button type="button" class="plyr__control">English</button>', + '</li>', + '<li>', + '<button type="button" class="plyr__control">Off</button>', + '</li>', + '</ul>', + '</div>', + '<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">', + '<ul>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', + config.i18n.speed, + '</button>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="speed">', + '2×', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="speed">', + '1.5×', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="speed" checked>', + '1×', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="speed">', + '0.5×', + '</label>', + '</li>', + '</ul>', + '</div>', + '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">', + '<ul>', + '<li role="tab">', + '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', + config.i18n.quality, + '</button>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality">', + '2160P', + '<span class="plyr__menu__value">', + '<span class="plyr__badge">4K</span>', + '</span>', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality">', + '1440P', + '<span class="plyr__menu__value">', + '<span class="plyr__badge">WQHD</span>', + '</span>', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality">', + '1080P', + '<span class="plyr__menu__value">', + '<span class="plyr__badge">HD</span>', + '</span>', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality" checked>', + '720P', + '<span class="plyr__menu__value">', + '<span class="plyr__badge">HD</span>', + '</span>', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality">', + '480P', + '</label>', + '</li>', + '<li>', + '<label class="plyr__control">', + '<input type="radio" name="quality">', + '360P', + '</label>', + '</li>', + '</ul>', + '</div>', + '</div>', + '</div>', '</div>' ); } // Picture in picture button - if (_inArray(config.controls, 'pip') && _support.pip) { + if (inArray(config.controls, 'pip') && support.pip) { html.push( '<button type="button" class="plyr__control" data-plyr="pip">', - '<svg><use xlink:href="' + iconPath + '-pip" /></svg>', - '<span class="plyr__sr-only">PIP</span>', + '<svg><use xlink:href="' + iconPath + '-pip" /></svg>', + '<span class="plyr__sr-only">PIP</span>', '</button>' ); } // Airplay button - if (_inArray(config.controls, 'airplay') && _support.airplay) { + if (inArray(config.controls, 'airplay') && support.airplay) { html.push( '<button type="button" class="plyr__control" data-plyr="airplay">', - '<svg><use xlink:href="' + iconPath + '-airplay" /></svg>', - '<span class="plyr__sr-only">AirPlay</span>', + '<svg><use xlink:href="' + iconPath + '-airplay" /></svg>', + '<span class="plyr__sr-only">AirPlay</span>', '</button>' ); } // Toggle fullscreen button - if (_inArray(config.controls, 'fullscreen')) { + if (inArray(config.controls, 'fullscreen')) { html.push( '<button type="button" class="plyr__control" 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>', + '<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>' ); } @@ -1088,59 +1124,59 @@ } // Setup fullscreen - function _setupFullscreen() { + function setupFullscreen() { if (!plyr.supported.full) { return; } if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { // Check for native support - var nativeSupport = _support.fullscreen; + var nativeSupport = support.fullscreen; - if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); + if (nativeSupport || (config.fullscreen.fallback && !inFrame())) { + log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); // Add styling hook - _toggleClass(plyr.container, config.classes.fullscreen.enabled, true); + toggleClass(plyr.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); + toggleState(plyr.buttons.fullscreen, false); } // Setup focus trap - _focusTrap(); + focusTrap(); } } // Display active caption if it contains text - function _setActiveCue(track) { + function setActiveCue(track) { // Get the track from the event if needed - if (_is.event(track)) { + if (is.event(track)) { track = track.target; } // Display a cue, if there is one if (track.activeCues[0] && 'text' in track.activeCues[0]) { - _setCaption(track.activeCues[0].getCueAsHTML()); + setCaption(track.activeCues[0].getCueAsHTML()); } else { - _setCaption(); + setCaption(); } } // Setup captions - function _setupCaptions() { + function setupCaptions() { // Bail if not HTML5 video if (plyr.type !== 'video') { return; } // Inject the container - if (!_getElement(config.selectors.captions)) { - plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>'); + if (!getElement(config.selectors.captions)) { + plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + getClassname(config.selectors.captions) + '"></div>'); } // Determine if HTML5 textTracks is supported @@ -1165,18 +1201,18 @@ plyr.captionExists = true; if (captionSources.length === 0) { plyr.captionExists = false; - _log('No caption track found'); + log('No caption track found'); } else if ((config.captions.selectedIndex + 1) > captionSources.length) { plyr.captionExists = false; - _log('Caption index out of bound'); + log('Caption index out of bound'); } else { captionSrc = captionSources[config.captions.selectedIndex]; - _log('Caption track found; URI: ' + captionSrc); + log('Caption track found; URI: ' + captionSrc); } // If no caption file exists, hide container for caption text if (!plyr.captionExists) { - _toggleClass(plyr.container, config.classes.captions.enabled); + toggleClass(plyr.container, config.classes.captions.enabled); } else { var tracks = plyr.media.textTracks; @@ -1184,14 +1220,14 @@ // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below [].forEach.call(tracks, function(track) { // Remove the listener to prevent event overlapping - _off(track, 'cuechange', _setActiveCue); + off(track, 'cuechange', setActiveCue); // Hide captions track.mode = 'hidden'; }); // Enable UI - _showCaptions(plyr); + showCaptions(plyr); // Disable unsupported browsers than report false positive // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144 @@ -1199,7 +1235,7 @@ (plyr.browser.isFirefox && plyr.browser.version >= 31)) { // Debugging - _log('Detected browser with known TextTrack issues - using manual fallback'); + log('Detected browser with known TextTrack issues - using manual fallback'); // Set to false so skips to 'manual' captioning plyr.usingTextTracks = false; @@ -1208,21 +1244,21 @@ // Rendering caption tracks // Native support required - http://caniuse.com/webvtt if (plyr.usingTextTracks) { - _log('TextTracks supported'); + log('TextTracks supported'); var track = tracks[config.captions.selectedIndex]; if (track.kind === 'captions' || track.kind === 'subtitles') { - _on(track, 'cuechange', _setActiveCue); + on(track, 'cuechange', setActiveCue); // 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); + setActiveCue(track); } } } else { // Caption tracks not natively supported - _log('TextTracks not supported so rendering captions manually'); + log('TextTracks not supported so rendering captions manually'); // Render captions from array at appropriate time plyr.currentCaption = ''; @@ -1238,7 +1274,7 @@ 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'; @@ -1249,7 +1285,7 @@ lineSeparator = '\n'; } } - + captions = req.split(lineSeparator + lineSeparator); for (var r = 0; r < captions.length; r++) { @@ -1271,9 +1307,9 @@ // Remove first element ('VTT') plyr.captions.shift(); - _log('Successfully loaded the caption file via AJAX'); + log('Successfully loaded the caption file via AJAX'); } else { - _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX'); + warn(config.logPrefix + 'There was a problem loading the caption file via AJAX'); } } }; @@ -1287,21 +1323,21 @@ } // Set the current caption - function _setCaption(caption) { + function setCaption(caption) { /* jshint unused:false */ - var container = _getElement(config.selectors.captions), + var container = getElement(config.selectors.captions), content = document.createElement('span'); // Empty the container container.innerHTML = ''; // Default to empty - if (_is.undefined(caption)) { + if (is.undefined(caption)) { caption = ''; } // Set the span content - if (_is.string(caption)) { + if (is.string(caption)) { content.innerHTML = caption.trim(); } else { content.appendChild(caption); @@ -1316,25 +1352,28 @@ // Captions functions // Seek the manual caption time and update UI - function _seekManualCaptions(time) { + function seekManualCaptions(time) { // Utilities for caption time codes - function _timecodeCommon(tc, pos) { + function timecodeCommon(tc, pos) { var tcpair = []; tcpair = tc.split(' --> '); - for(var i = 0; i < tcpair.length; i++) { + 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]); + return subTcSecs(tcpair[pos]); } - function _timecodeMin(tc) { - return _timecodeCommon(tc, 0); + + function timecodeMin(tc) { + return timecodeCommon(tc, 0); } - function _timecodeMax(tc) { - return _timecodeCommon(tc, 1); + + function timecodeMax(tc) { + return timecodeCommon(tc, 1); } - function _subTcSecs(tc) { + + function subTcSecs(tc) { if (tc === null || tc === undefined) { return 0; } else { @@ -1343,7 +1382,7 @@ seconds; tc1 = tc.split(','); tc2 = tc1[0].split(':'); - seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); + seconds = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]); return seconds; } } @@ -1359,14 +1398,14 @@ // 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; + time = is.number(time) ? time : plyr.media.currentTime; // If there's no subs available, bail if (!plyr.captions[plyr.subcount]) { return; } - while (_timecodeMax(plyr.captions[plyr.subcount][0]) < time.toFixed(1)) { + 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; @@ -1375,67 +1414,66 @@ } // 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]; + if (plyr.media.currentTime.toFixed(1) >= timecodeMin(plyr.captions[plyr.subcount][0]) && + plyr.media.currentTime.toFixed(1) <= timecodeMax(plyr.captions[plyr.subcount][0])) { + plyr.currentCaption = plyr.captions[plyr.subcount][1]; // Render the caption - _setCaption(plyr.currentCaption); + setCaption(plyr.currentCaption); } else { - _setCaption(); + setCaption(); } } // Display captions container and button (for initialization) - function _showCaptions() { + function showCaptions() { // If there's no caption toggle, bail if (!plyr.buttons.captions) { return; } - _toggleClass(plyr.container, config.classes.captions.enabled, true); + toggleClass(plyr.container, config.classes.captions.enabled, true); // Try to load the value from storage var active = plyr.storage.captionsEnabled; // Otherwise fall back to the default config - if (!_is.boolean(active)) { + if (!is.boolean(active)) { active = config.captions.defaultActive; } if (active) { - _toggleClass(plyr.container, config.classes.captions.active, true); - _toggleState(plyr.buttons.captions, true); + toggleClass(plyr.container, config.classes.captions.active, true); + toggleState(plyr.buttons.captions, true); } } // Find all elements - function _getElements(selector) { + function getElements(selector) { return plyr.container.querySelectorAll(selector); } // Find a single element - function _getElement(selector) { - return _getElements(selector)[0]; + function getElement(selector) { + return getElements(selector)[0]; } // Determine if we're in an iframe - function _inFrame() { + function inFrame() { try { return window.self !== window.top; - } - catch (e) { + } catch (e) { return true; } } // Trap focus inside container - function _focusTrap() { - var tabbables = _getElements('input:not([disabled]), button:not([disabled])'), - first = tabbables[0], - last = tabbables[tabbables.length - 1]; + function focusTrap() { + var tabbables = getElements('input:not([disabled]), button:not([disabled])'), + first = tabbables[0], + last = tabbables[tabbables.length - 1]; - function _checkFocus(event) { + function checkFocus(event) { // If it is TAB if (event.which === 9 && plyr.isFullscreen) { if (event.target === last && !event.shiftKey) { @@ -1451,32 +1489,34 @@ } // Bind the handler - _on(plyr.container, 'keydown', _checkFocus); + on(plyr.container, 'keydown', checkFocus); } // Add elements to HTML5 media (source, tracks, etc) - function _insertChildElements(type, attributes) { - if (_is.string(attributes)) { - _insertElement(type, plyr.media, { src: attributes }); + 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]); + insertElement(type, plyr.media, attributes[i]); } } } // 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)' : '')); + log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); loadSprite(iconUrl.url, "sprite-plyr"); } else { - _log('Sprite will be used as external resource directly'); + log('Sprite will be used as external resource directly'); } } @@ -1484,35 +1524,35 @@ var html = config.html; // Insert custom video controls - _log('Injecting custom controls'); + log('Injecting custom controls'); // If no controls are specified, create default if (!html) { - html = _buildControls(); + html = buildControls(); } // Replace seek time instances - html = _replaceAll(html, '{seektime}', config.seekTime); + html = replaceAll(html, '{seektime}', config.seekTime); // Replace seek time instances - html = _replaceAll(html, '{speed}', config.currentSpeed.toFixed(1).toString().replace('.0', '') + '×'); + html = replaceAll(html, '{speed}', config.currentSpeed.toFixed(1).toString().replace('.0', '') + '×'); // Replace current captions language - html = _replaceAll(html, '{lang}', 'English'); + html = replaceAll(html, '{lang}', 'English'); // Replace all id references with random numbers - html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); + html = replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); // Controls container var target; // Inject to custom location - if (_is.string(config.selectors.controls.container)) { + if (is.string(config.selectors.controls.container)) { target = document.querySelector(config.selectors.controls.container); } // Inject into the container by default - if (!_is.htmlElement(target)) { + if (!is.htmlElement(target)) { target = plyr.container } @@ -1521,91 +1561,90 @@ // 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); + toggleClass(label, config.classes.hidden, false); + toggleClass(label, config.classes.tooltip, true); } } } // Find the UI controls and store references - function _findElements() { + function findElements() { try { - plyr.controls = _getElement(config.selectors.controls.wrapper); + plyr.controls = getElement(config.selectors.controls.wrapper); // Buttons plyr.buttons = { - seek: _getElement(config.selectors.buttons.seek), - 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), - fullscreen: _getElement(config.selectors.buttons.fullscreen), - settings: _getElement(config.selectors.buttons.settings), - pip: _getElement(config.selectors.buttons.pip) + seek: getElement(config.selectors.buttons.seek), + 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), + fullscreen: getElement(config.selectors.buttons.fullscreen), + settings: getElement(config.selectors.buttons.settings), + pip: getElement(config.selectors.buttons.pip) }; // Inputs - plyr.buttons.mute = _getElement(config.selectors.buttons.mute); - plyr.buttons.captions = _getElement(config.selectors.buttons.captions); + plyr.buttons.mute = getElement(config.selectors.buttons.mute); + plyr.buttons.captions = getElement(config.selectors.buttons.captions); // Progress plyr.progress = { - container: _getElement(config.selectors.progress.container) + container: getElement(config.selectors.progress.container) }; // Progress - Buffering plyr.progress.buffer = (function() { - var bar = _getElement(config.selectors.progress.buffer); + var bar = getElement(config.selectors.progress.buffer); return { - bar: bar, - text: _is.htmlElement(bar) && bar.getElementsByTagName('span')[0] + bar: bar, + text: is.htmlElement(bar) && bar.getElementsByTagName('span')[0] }; })(); // Progress - Played - plyr.progress.played = _getElement(config.selectors.progress.played); + plyr.progress.played = getElement(config.selectors.progress.played); // Seek tooltip - plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); + plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); // Volume plyr.volume = { - input: _getElement(config.selectors.volume.input), - display: _getElement(config.selectors.volume.display) + input: getElement(config.selectors.volume.input), + 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); + plyr.duration = getElement(config.selectors.duration); + plyr.currentTime = getElement(config.selectors.currentTime); + plyr.seekTime = getElements(config.selectors.seekTime); return true; - } - catch(e) { - _warn('It looks like there is a problem with your controls HTML', e); + } catch (e) { + warn('It looks like there is a problem with your controls HTML', e); // 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() { + toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full); } // Toggle native controls - function _toggleNativeControls(toggle) { - if (toggle && _inArray(config.types.html5, plyr.type)) { + function toggleNativeControls(toggle) { + if (toggle && inArray(config.types.html5, plyr.type)) { plyr.media.setAttribute('controls', ''); } else { plyr.media.removeAttribute('controls'); @@ -1613,12 +1652,12 @@ } // 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 (is.string(config.title) && config.title.length) { label += ', ' + config.title; // Set container label @@ -1634,18 +1673,18 @@ // Set iframe title // https://github.com/Selz/plyr/issues/124 - if (_is.htmlElement(iframe)) { + if (is.htmlElement(iframe)) { iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title)); } } // Setup localStorage - function _setupStorage() { + function setupStorage() { var value = null; plyr.storage = {}; // Bail if we don't have localStorage support or it's disabled - if (!_support.storage || !config.storage.enabled) { + if (!support.storage || !config.storage.enabled) { return; } @@ -1663,7 +1702,9 @@ // If value is a number, it's probably volume from an older // version of plyr. 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); @@ -1671,48 +1712,48 @@ } // 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 (!_support.storage || !config.storage.enabled) { + if (!support.storage || !config.storage.enabled) { return; } // Update the working copy of the values - _extend(plyr.storage, value); + extend(plyr.storage, value); // Update storage window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage)); } // Setup media - function _setupMedia() { + function setupMedia() { // If there's no media, bail if (!plyr.media) { - _warn('No media element found!'); + warn('No media element found!'); return; } if (plyr.supported.full) { // Add type class - _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); + toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); // Add video class for embeds // This will require changes if audio embeds are added - if (_inArray(config.types.embed, plyr.type)) { - _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true); + if (inArray(config.types.embed, plyr.type)) { + toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true); } // Check for picture-in-picture support - _toggleClass(plyr.container, config.classes.pip.enabled, _support.pip); + toggleClass(plyr.container, config.classes.pip.enabled, support.pip); // If there's no autoplay attribute, assume the video is stopped and add state class - _toggleClass(plyr.container, config.classes.stopped, config.autoplay); + toggleClass(plyr.container, config.classes.stopped, config.autoplay); // Add iOS class - _toggleClass(plyr.ontainer, config.classes.isIos, plyr.browser.isIos); + toggleClass(plyr.ontainer, config.classes.isIos, plyr.browser.isIos); // Add touch class - _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); + toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); // Inject the player wrapper if (plyr.type === 'video') { @@ -1721,7 +1762,7 @@ wrapper.setAttribute('class', config.classes.videoWrapper); // Wrap the video in a container - _wrap(plyr.media, wrapper); + wrap(plyr.media, wrapper); // Cache the container plyr.videoContainer = wrapper; @@ -1729,13 +1770,13 @@ } // Embeds - if (_inArray(config.types.embed, plyr.type)) { - _setupEmbed(); + if (inArray(config.types.embed, plyr.type)) { + setupEmbed(); } } // Setup YouTube/Vimeo - function _setupEmbed() { + function setupEmbed() { var container = document.createElement('div'), mediaId, id = plyr.type + '-' + Math.floor(Math.random() * (10000)); @@ -1743,26 +1784,26 @@ // Parse IDs from URLs if supplied switch (plyr.type) { case 'youtube': - mediaId = _parseYouTubeId(plyr.embedId); + mediaId = parseYouTubeId(plyr.embedId); break; case 'vimeo': - mediaId = _parseVimeoId(plyr.embedId); + mediaId = parseVimeoId(plyr.embedId); break; - default: + default: mediaId = plyr.embedId; } // Remove old containers - var containers = _getElements('[id^="' + plyr.type + '-"]'); + var containers = getElements('[id^="' + plyr.type + '-"]'); for (var i = containers.length - 1; i >= 0; i--) { - _remove(containers[i]); + remove(containers[i]); } // Add embed class for responsive - _toggleClass(plyr.media, config.classes.videoWrapper, true); - _toggleClass(plyr.media, config.classes.embedWrapper, true); + toggleClass(plyr.media, config.classes.videoWrapper, true); + toggleClass(plyr.media, config.classes.embedWrapper, true); if (plyr.type === 'youtube') { // Create the YouTube container @@ -1772,21 +1813,25 @@ container.setAttribute('id', id); // Setup API - if (_is.object(window.YT)) { - _youTubeReady(mediaId, container); + if (is.object(window.YT)) { + youTubeReady(mediaId, container); } else { // Load the API - _injectScript(config.urls.youtube.api); + injectScript(config.urls.youtube.api); // Setup callback for the API window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; // Add to queue - window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); }); + window.onYouTubeReadyCallbacks.push(function() { + youTubeReady(mediaId, container); + }); // 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') { @@ -1801,18 +1846,18 @@ container.setAttribute('id', id); // Load the API if not already - if (!_is.object(window.Vimeo)) { - _injectScript(config.urls.vimeo.api); + if (!is.object(window.Vimeo)) { + injectScript(config.urls.vimeo.api); // Wait for fragaloop load var vimeoTimer = window.setInterval(function() { - if (_is.object(window.Vimeo)) { + if (is.object(window.Vimeo)) { window.clearInterval(vimeoTimer); - _vimeoReady(mediaId, container); + vimeoReady(mediaId, container); } }, 50); } else { - _vimeoReady(mediaId, container); + vimeoReady(mediaId, container); } } else if (plyr.type === 'soundcloud') { // TODO: Currently unsupported and undocumented @@ -1821,11 +1866,13 @@ // Watch for iframe load soundCloud.loaded = false; - _on(soundCloud, 'load', function() { soundCloud.loaded = true; }); + on(soundCloud, 'load', function() { + soundCloud.loaded = true; + }); - _setAttributes(soundCloud, { - 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId, - 'id': id + setAttributes(soundCloud, { + 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId, + 'id': id }); container.appendChild(soundCloud); @@ -1833,55 +1880,55 @@ // Load the API if not already if (!window.SC) { - _injectScript(config.urls.soundcloud.api); + 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(); + setupInterface(); + ready(); } // Set title - _setTitle(_getElement('iframe')); + setTitle(getElement('iframe')); } // Handle YouTube API ready - function _youTubeReady(videoId, container) { + function youTubeReady(videoId, container) { // Setup instance // https://developers.google.com/youtube/iframe_api_reference plyr.embed = new window.YT.Player(container.id, { videoId: videoId, playerVars: { - autoplay: (config.autoplay ? 1 : 0), - controls: (plyr.supported.full ? 0 : 1), - rel: 0, - showinfo: 0, + autoplay: (config.autoplay ? 1 : 0), + controls: (plyr.supported.full ? 0 : 1), + rel: 0, + showinfo: 0, iv_load_policy: 3, cc_load_policy: (config.captions.defaultActive ? 1 : 0), - cc_lang_pref: 'en', - wmode: 'transparent', + 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, + origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45 }, events: { 'onError': function(event) { - _triggerEvent(plyr.container, 'error', true, { - code: event.data, - embed: event.target + triggerEvent(plyr.container, 'error', true, { + code: event.data, + embed: event.target }); }, 'onPlaybackQualityChange': function(event) { @@ -1889,7 +1936,7 @@ var instance = event.target; var quality = instance.getPlaybackQuality(); - + // var set = instance.setPlaybackQuality(); console.warn(quality); }, @@ -1930,13 +1977,13 @@ } // Update UI - _embedReady(); + embedReady(); // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); + triggerEvent(plyr.media, 'durationchange'); // Reset timer window.clearInterval(timers.buffering); @@ -1948,7 +1995,7 @@ // Trigger progress only when we actually buffer something if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) { - _triggerEvent(plyr.media, 'progress'); + triggerEvent(plyr.media, 'progress'); } // Set last buffer point @@ -1959,7 +2006,7 @@ window.clearInterval(timers.buffering); // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + triggerEvent(plyr.media, 'canplaythrough'); } }, 200); }, @@ -1980,7 +2027,7 @@ switch (event.data) { case 0: plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + triggerEvent(plyr.media, 'ended'); break; case 1: @@ -1988,12 +2035,12 @@ // If we were seeking, fire seeked event if (plyr.media.seeking) { - _triggerEvent(plyr.media, 'seeked'); + triggerEvent(plyr.media, 'seeked'); } plyr.media.seeking = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + triggerEvent(plyr.media, 'play'); + triggerEvent(plyr.media, 'playing'); // Poll to get playback progress timers.playing = window.setInterval(function() { @@ -2001,7 +2048,7 @@ plyr.media.currentTime = instance.getCurrentTime(); // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); }, 100); // Check duration again due to YouTube bug @@ -2009,7 +2056,7 @@ // 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'); + triggerEvent(plyr.media, 'durationchange'); } // Get quality @@ -2020,11 +2067,11 @@ case 2: plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + triggerEvent(plyr.media, 'pause'); break; } - _triggerEvent(plyr.container, 'statechange', false, { + triggerEvent(plyr.container, 'statechange', false, { code: event.data }); } @@ -2033,16 +2080,16 @@ } // Vimeo ready - function _vimeoReady(mediaId, container) { + function vimeoReady(mediaId, container) { // 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 + id: parseInt(mediaId), + loop: config.loop, + autoplay: config.autoplay, + byline: false, + portrait: false, + title: false }); // Create a faux HTML5 API using the Vimeo API @@ -2058,25 +2105,25 @@ plyr.embed.stop(); plyr.media.paused = true; }; - + plyr.media.paused = true; plyr.media.currentTime = 0; // Update UI - _embedReady(); + embedReady(); plyr.embed.getCurrentTime().then(function(value) { plyr.media.currentTime = value; // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); }); plyr.embed.getDuration().then(function(value) { plyr.media.duration = value; - + // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); + triggerEvent(plyr.media, 'durationchange'); }); // TODO: Captions @@ -2087,58 +2134,58 @@ plyr.embed.on('loaded', function() { // Fix keyboard focus issues // https://github.com/Selz/plyr/issues/317 - if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) { + if (is.htmlElement(plyr.embed.element) && plyr.supported.full) { plyr.embed.element.setAttribute('tabindex', '-1'); } }); plyr.embed.on('play', function() { plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + triggerEvent(plyr.media, 'play'); + triggerEvent(plyr.media, 'playing'); }); plyr.embed.on('pause', function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + triggerEvent(plyr.media, 'pause'); }); plyr.embed.on('timeupdate', function(data) { plyr.media.seeking = false; plyr.media.currentTime = data.seconds; - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); }); plyr.embed.on('progress', function(data) { plyr.media.buffered = data.percent; - _triggerEvent(plyr.media, 'progress'); + triggerEvent(plyr.media, 'progress'); if (parseInt(data.percent) === 1) { // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + triggerEvent(plyr.media, 'canplaythrough'); } }); plyr.embed.on('seeked', function() { plyr.media.seeking = false; - _triggerEvent(plyr.media, 'seeked'); - _triggerEvent(plyr.media, 'play'); + triggerEvent(plyr.media, 'seeked'); + triggerEvent(plyr.media, 'play'); }); plyr.embed.on('ended', function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + triggerEvent(plyr.media, 'ended'); }); } - // Soundcloud ready - function _soundcloudReady() { + // SoundCloud ready + function soundCloudReady() { /* jshint validthis: true */ plyr.embed = window.SC.Widget(this); // Setup on ready - plyr.embed.bind(window.SC.Widget.Events.READY, function() { - // Create a faux HTML5 API using the Soundcloud API + plyr.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; @@ -2157,108 +2204,108 @@ plyr.media.currentTime = 0; plyr.embed.getDuration(function(value) { - plyr.media.duration = value/1000; + plyr.media.duration = value / 1000; // Update UI - _embedReady(); + embedReady(); }); plyr.embed.getPosition(function(value) { plyr.media.currentTime = value; // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); }); plyr.embed.bind(window.SC.Widget.Events.PLAY, function() { plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + triggerEvent(plyr.media, 'play'); + triggerEvent(plyr.media, 'playing'); }); plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + triggerEvent(plyr.media, 'pause'); }); plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) { plyr.media.seeking = false; - plyr.media.currentTime = data.currentPosition/1000; - _triggerEvent(plyr.media, 'timeupdate'); + plyr.media.currentTime = data.currentPosition / 1000; + triggerEvent(plyr.media, 'timeupdate'); }); plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) { plyr.media.buffered = data.loadProgress; - _triggerEvent(plyr.media, 'progress'); + triggerEvent(plyr.media, 'progress'); if (parseInt(data.loadProgress) === 1) { // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + triggerEvent(plyr.media, 'canplaythrough'); } }); plyr.embed.bind(window.SC.Widget.Events.FINISH, function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + triggerEvent(plyr.media, 'ended'); }); }); } // Play media - function _play() { + function play() { if ('play' in plyr.media) { plyr.media.play(); } } // Pause media - function _pause() { + function pause() { if ('pause' in plyr.media) { plyr.media.pause(); } } // Toggle playback - function _togglePlay(toggle) { + function togglePlay(toggle) { // True toggle - if (!_is.boolean(toggle)) { + if (!is.boolean(toggle)) { toggle = plyr.media.paused; } if (toggle) { - _play(); + play(); } else { - _pause(); + pause(); } return toggle; } // Rewind - function _rewind(seekTime) { + function rewind(seekTime) { // Use default if needed - if (!_is.number(seekTime)) { + if (!is.number(seekTime)) { seekTime = config.seekTime; } - _seek(plyr.media.currentTime - seekTime); + seek(plyr.media.currentTime - seekTime); } // Fast forward - function _forward(seekTime) { + function forward(seekTime) { // Use default if needed - if (!_is.number(seekTime)) { + if (!is.number(seekTime)) { seekTime = config.seekTime; } - _seek(plyr.media.currentTime + seekTime); + seek(plyr.media.currentTime + seekTime); } // Speed-up - function _speed(speed) { - if (!_is.array(config.speeds)) { - _warn('Invalid speeds format'); + function speed(speed) { + if (!is.array(config.speeds)) { + warn('Invalid speeds format'); return; } - if (!_is.number(speed)) { + if (!is.number(speed)) { var index = config.speeds.indexOf(config.currentSpeed); if (index !== -1) { @@ -2279,19 +2326,21 @@ plyr.media.playbackRate = speed; // Save speed to localStorage - _updateStorage({speed: speed}); + updateStorage({ + speed: speed + }); } // 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, + paused = plyr.media.paused, + duration = getDuration(); - if (_is.number(input)) { + if (is.number(input)) { targetTime = input; - } else if (_is.event(input) && _inArray(['input', 'change'], input.type)) { + } else if (is.event(input) && inArray(['input', 'change'], input.type)) { // It's the seek slider // Seek to the selected time targetTime = ((input.target.value / input.target.max) * duration); @@ -2304,19 +2353,18 @@ targetTime = duration; } - // Update seek range and progress - _updateSeekDisplay(targetTime); + // Update seek range and progress + updateSeekDisplay(targetTime); // Set the current time // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans try { plyr.media.currentTime = targetTime.toFixed(4); - } - catch(e) {} + } catch (e) {} // Embeds - if (_inArray(config.types.embed, plyr.type)) { - switch(plyr.type) { + if (inArray(config.types.embed, plyr.type)) { + switch (plyr.type) { case 'youtube': plyr.embed.seekTo(targetTime); break; @@ -2332,33 +2380,33 @@ } if (paused) { - _pause(); + pause(); } // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + triggerEvent(plyr.media, 'timeupdate'); // Set seeking flag plyr.media.seeking = true; // Trigger seeking - _triggerEvent(plyr.media, 'seeking'); + triggerEvent(plyr.media, 'seeking'); } // Logging - _log('Seeking to ' + plyr.media.currentTime + ' seconds'); + log('Seeking to ' + plyr.media.currentTime + ' seconds'); // Special handling for 'manual' captions - _seekManualCaptions(targetTime); + seekManualCaptions(targetTime); } // 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), - // True duration - mediaDuration = 0; + // True duration + mediaDuration = 0; // Only if duration available if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) { @@ -2370,16 +2418,16 @@ } // Check playing state - function _checkPlaying() { - _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused); + function checkPlaying() { + toggleClass(plyr.container, config.classes.playing, !plyr.media.paused); - _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused); + toggleClass(plyr.container, config.classes.stopped, plyr.media.paused); - _toggleControls(plyr.media.paused); + toggleControls(plyr.media.paused); } // Save scroll position - function _saveScrollPosition() { + function saveScrollPosition() { scroll = { x: window.pageXOffset || 0, y: window.pageYOffset || 0 @@ -2387,34 +2435,34 @@ } // 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 = _support.fullscreen; - + var nativeSupport = support.fullscreen; + if (nativeSupport) { // If it's a fullscreen change event, update the UI - if (event && event.type === _fullscreen.eventType) { - plyr.isFullscreen = _fullscreen.isFullScreen(plyr.container); + if (event && event.type === fullscreen.eventType) { + plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); } else { // Else it's a user request to enter or exit - if (!_fullscreen.isFullScreen(plyr.container)) { + if (!fullscreen.isFullScreen(plyr.container)) { // Save scroll position - _saveScrollPosition(); + saveScrollPosition(); // Request full screen - _fullscreen.requestFullScreen(plyr.container); + fullscreen.requestFullScreen(plyr.container); } else { // Bail from fullscreen - _fullscreen.cancelFullScreen(); + fullscreen.cancelFullScreen(); } // Check if we're actually full screen (it could fail) - plyr.isFullscreen = _fullscreen.isFullScreen(plyr.container); + plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); return; } @@ -2427,47 +2475,47 @@ } // Set class hook - _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); + toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); // Trap focus - _focusTrap(plyr.isFullscreen); + focusTrap(plyr.isFullscreen); // Set button state if (plyr.buttons && plyr.buttons.fullscreen) { - _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); + toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); } // Trigger an event - _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); + triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); // Restore scroll position if (!plyr.isFullscreen && nativeSupport) { - _restoreScrollPosition(); + restoreScrollPosition(); } } // Mute - function _toggleMute(muted) { + function toggleMute(muted) { // If the method is called without parameter, toggle based on current value - if (!_is.boolean(muted)) { + if (!is.boolean(muted)) { muted = !plyr.media.muted; } // Set button state - _toggleState(plyr.buttons.mute, muted); + toggleState(plyr.buttons.mute, muted); // Set mute on the player plyr.media.muted = muted; // If volume is 0 after unmuting, set to default if (plyr.media.volume === 0) { - _setVolume(config.volume); + setVolume(config.volume); } // Embeds - if (_inArray(config.types.embed, plyr.type)) { + if (inArray(config.types.embed, plyr.type)) { // YouTube - switch(plyr.type) { + switch (plyr.type) { case 'youtube': plyr.embed[plyr.media.muted ? 'mute' : 'unMute'](); break; @@ -2479,17 +2527,17 @@ } // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); + triggerEvent(plyr.media, 'volumechange'); } } // Set volume - function _setVolume(volume) { + function setVolume(volume) { var max = config.volumeMax, min = config.volumeMin; // Load volume from storage if no value specified - if (_is.undefined(volume)) { + if (is.undefined(volume)) { volume = plyr.storage.volume; } @@ -2516,8 +2564,8 @@ } // Embeds - if (_inArray(config.types.embed, plyr.type)) { - switch(plyr.type) { + if (inArray(config.types.embed, plyr.type)) { + switch (plyr.type) { case 'youtube': plyr.embed.setVolume(plyr.media.volume * 100); break; @@ -2529,41 +2577,41 @@ } // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); + triggerEvent(plyr.media, 'volumechange'); } // Toggle muted state if (volume === 0) { plyr.media.muted = true; } else if (plyr.media.muted && volume > 0) { - _toggleMute(); + toggleMute(); } } // Increase volume - function _increaseVolume(step) { + function increaseVolume(step) { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - if (!_is.number(step)) { + if (!is.number(step)) { step = config.volumeStep; } - _setVolume(volume + step); + setVolume(volume + step); } // Decrease volume - function _decreaseVolume(step) { + function decreaseVolume(step) { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - if (!_is.number(step)) { + if (!is.number(step)) { step = config.volumeStep; } - _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); @@ -2578,26 +2626,28 @@ } // Update the volume in storage - _updateStorage({volume: volume}); + updateStorage({ + volume: volume + }); // Toggle class if muted - _toggleClass(plyr.container, config.classes.muted, (volume === 0)); + toggleClass(plyr.container, config.classes.muted, (volume === 0)); // Update checkbox for mute state if (plyr.supported.full && plyr.buttons.mute) { - _toggleState(plyr.buttons.mute, (volume === 0)); + toggleState(plyr.buttons.mute, (volume === 0)); } } // Toggle captions - function _toggleCaptions(show) { + 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)) { + if (!is.boolean(show)) { show = (plyr.container.className.indexOf(config.classes.captions.active) === -1); } @@ -2605,32 +2655,34 @@ plyr.captionsEnabled = show; // Toggle state - _toggleState(plyr.buttons.captions, plyr.captionsEnabled); + toggleState(plyr.buttons.captions, plyr.captionsEnabled); // Add class hook - _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); + toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); // Trigger an event - _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); + triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); // Save captions state to localStorage - _updateStorage({captionsEnabled: plyr.captionsEnabled}); + updateStorage({ + captionsEnabled: plyr.captionsEnabled + }); } // Select active caption - function _setCaptionIndex(index) { + function setCaptionIndex(index) { // Save active caption config.captions.selectedIndex = index; // Clear caption - _setCaption(); + setCaption(); // Re-run setup - _setupCaptions(); + setupCaptions(); } // Check if media is loading - function _checkLoading(event) { + function checkLoading(event) { var loading = (event.type === 'waiting'); // Clear timer @@ -2639,22 +2691,22 @@ // Timer to prevent flicker when seeking timers.loading = setTimeout(function() { // Toggle container class hook - _toggleClass(plyr.container, config.classes.loading, loading); + toggleClass(plyr.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) { + function updateProgress(event) { if (!plyr.supported.full) { return; } - var progress = plyr.progress.played, - value = 0, - duration = _getDuration(); + var progress = plyr.progress.played, + value = 0, + duration = getDuration(); if (event) { switch (event.type) { @@ -2665,7 +2717,7 @@ return; } - value = _getPercentage(plyr.media.currentTime, duration); + value = getPercentage(plyr.media.currentTime, duration); // Set seek range value only if it's a 'natural' time event if (event.type === 'timeupdate' && plyr.buttons.seek) { @@ -2674,17 +2726,17 @@ break; - // Check buffer status + // Check buffer status case 'playing': case 'progress': - progress = plyr.progress.buffer; - value = (function() { + progress = plyr.progress.buffer; + value = (function() { var buffered = plyr.media.buffered; if (buffered && buffered.length) { // HTML5 - return _getPercentage(buffered.end(0), duration); - } else if (_is.number(buffered)) { + return getPercentage(buffered.end(0), duration); + } else if (is.number(buffered)) { // YouTube returns between 0 and 1 return (buffered * 100); } @@ -2697,21 +2749,21 @@ } // Set values - _setProgress(progress, value); + setProgress(progress, value); } // Set <progress> value - function _setProgress(progress, value) { + function setProgress(progress, value) { if (!plyr.supported.full) { return; } - + // Default to 0 - if (_is.undefined(value)) { + if (is.undefined(value)) { value = 0; } // Default to buffer or bail - if (_is.undefined(progress)) { + if (is.undefined(progress)) { if (plyr.progress && plyr.progress.buffer) { progress = plyr.progress.buffer; } else { @@ -2720,7 +2772,7 @@ } // One progress element passed - if (_is.htmlElement(progress)) { + if (is.htmlElement(progress)) { progress.value = value; } else if (progress) { // Object of progress + text element @@ -2734,7 +2786,7 @@ } // Update the displayed time - function _updateTimeDisplay(time, element) { + function updateTimeDisplay(time, element) { // Bail if there's no duration display if (!element) { return; @@ -2750,7 +2802,7 @@ plyr.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); @@ -2761,32 +2813,32 @@ } // Show the duration on metadataloaded - function _displayDuration() { + function displayDuration() { if (!plyr.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); + updateTimeDisplay(duration, plyr.currentTime); } // If there's a duration element, update content if (plyr.duration) { - _updateTimeDisplay(duration, plyr.duration); + updateTimeDisplay(duration, plyr.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(plyr.media.currentTime, plyr.currentTime); // Ignore updates while seeking if (event && event.type === 'timeupdate' && plyr.media.seeking) { @@ -2794,20 +2846,20 @@ } // Playing progress - _updateProgress(event); + updateProgress(event); } - // Update seek range and progress - function _updateSeekDisplay(time) { + // Update seek range and progress + function updateSeekDisplay(time) { // Default to 0 - if (!_is.number(time)) { + if (!is.number(time)) { time = 0; } - var duration = _getDuration(), - value = _getPercentage(time, duration); + var duration = getDuration(), + value = getPercentage(time, duration); - // Update progress + // Update progress if (plyr.progress && plyr.progress.played) { plyr.progress.played.value = value; } @@ -2819,8 +2871,8 @@ } // 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) { @@ -2828,13 +2880,13 @@ } // Calculate percentage - var clientRect = plyr.progress.container.getBoundingClientRect(), - percent = 0, - visible = config.classes.tooltip + '--visible'; + var clientRect = plyr.progress.container.getBoundingClientRect(), + percent = 0, + visible = config.classes.tooltip + '--visible'; // Determine percentage, if already visible if (!event) { - if (_hasClass(plyr.progress.tooltip, visible)) { + if (hasClass(plyr.progress.tooltip, visible)) { percent = plyr.progress.tooltip.style.left.replace('%', ''); } else { return; @@ -2851,30 +2903,30 @@ } // Display the time a click would seek to - _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip); + updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip); // Set position plyr.progress.tooltip.style.left = percent + "%"; // Show/hide the tooltip // If the event is a moues in/out and percentage is inside bounds - if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) { - _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter')); + if (event && inArray(['mouseenter', 'mouseleave'], event.type)) { + toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter')); } } // Set playback speed - function _setSpeed(speed) { + function setSpeed(value) { // Load speed from storage or default value - if (_is.undefined(speed)) { - speed = plyr.storage.speed || config.defaultSpeed; + if (is.undefined(value)) { + value = plyr.storage.speed || config.defaultSpeed; } - _speed(speed); + speed(value); } // 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') { return; @@ -2883,19 +2935,19 @@ var delay = 0, isEnterFullscreen = false, show = toggle, - loading = _hasClass(plyr.container, config.classes.loading); + loading = hasClass(plyr.container, config.classes.loading); // Default to false if no boolean - if (!_is.boolean(toggle)) { + if (!is.boolean(toggle)) { if (toggle && toggle.type) { // Is the enter fullscreen event isEnterFullscreen = (toggle.type === 'enterfullscreen'); // Whether to show controls - show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); + show = inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); // Delay hiding on move events - if (_inArray(['mousemove', 'touchmove'], toggle.type)) { + if (inArray(['mousemove', 'touchmove'], toggle.type)) { delay = 2000; } @@ -2904,7 +2956,7 @@ delay = 3000; } } else { - show = _hasClass(plyr.container, config.classes.hideControls); + show = hasClass(plyr.container, config.classes.hideControls); } } @@ -2913,7 +2965,7 @@ // 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); + toggleClass(plyr.container, config.classes.hideControls, false); // Always show controls when paused or if touch if (plyr.media.paused || loading) { @@ -2926,37 +2978,37 @@ } } - // If toggle is false or if we're playing (regardless of toggle), - // then set the timer to hide the controls + // If toggle is false or if we're playing (regardless of toggle), + // then set the timer to hide the controls if (!show || !plyr.media.paused) { timers.hover = window.setTimeout(function() { // If the mouse is over the controls (and not entering fullscreen), bail if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) { return; } - - _toggleClass(plyr.container, config.classes.hideControls, true); + + toggleClass(plyr.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 (!is.undefined(source)) { + updateSource(source); return; } // Return the current source var url; - switch(plyr.type) { + switch (plyr.type) { case 'youtube': url = plyr.embed.getVideoUrl(); break; case 'vimeo': - plyr.embed.getVideoUrl.then(function (value) { + plyr.embed.getVideoUrl.then(function(value) { url = value; }); break; @@ -2977,26 +3029,26 @@ // 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 (!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); + toggleClass(plyr.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() { @@ -3004,14 +3056,14 @@ plyr.embed = null; // Remove the old media - _remove(plyr.media); + remove(plyr.media); // Remove video container if (plyr.type === 'video' && plyr.videoContainer) { - _remove(plyr.videoContainer); + remove(plyr.videoContainer); } - // Reset class name + // Reset class name if (plyr.container) { plyr.container.removeAttribute('class'); } @@ -3024,7 +3076,7 @@ if (plyr.type === 'video') { var firstSource = source.sources[0]; - if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) { + if ('type' in firstSource && inArray(config.types.embed, firstSource.type)) { plyr.type = firstSource.type; } } @@ -3034,7 +3086,7 @@ plyr.supported = supported(plyr.type); // Create new markup - switch(plyr.type) { + switch (plyr.type) { case 'video': plyr.media = document.createElement('video'); break; @@ -3052,15 +3104,15 @@ } // Inject the new element - _prependChild(plyr.container, plyr.media); + prependChild(plyr.container, plyr.media); // Autoplay the new source? - if (_is.boolean(source.autoplay)) { + if (is.boolean(source.autoplay)) { config.autoplay = source.autoplay; } // Set attributes for audio and video - if (_inArray(config.types.html5, plyr.type)) { + if (inArray(config.types.html5, plyr.type)) { if (config.crossorigin) { plyr.media.setAttribute('crossorigin', ''); } @@ -3076,23 +3128,23 @@ } // Restore class hooks - _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); - _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); - _toggleStyleHook(); + toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); + toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); + toggleStyleHook(); // Set new sources for html5 - if (_inArray(config.types.html5, plyr.type)) { - _insertChildElements('source', source.sources); + if (inArray(config.types.html5, plyr.type)) { + insertChildElements('source', source.sources); } // Set up from scratch - _setupMedia(); + setupMedia(); // HTML5 stuff - if (_inArray(config.types.html5, plyr.type)) { + if (inArray(config.types.html5, plyr.type)) { // Setup captions if ('tracks' in source) { - _insertChildElements('track', source.tracks); + insertChildElements('track', source.tracks); } // Load HTML5 sources @@ -3100,39 +3152,39 @@ } // 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 (inArray(config.types.html5, plyr.type) || (inArray(config.types.embed, plyr.type) && !plyr.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) { + function updatePoster(source) { if (plyr.type === 'video') { plyr.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'); // Click play/pause helper - function togglePlay() { - var play = _togglePlay(); + function _togglePlay() { + var play = togglePlay(); // Determine which buttons var trigger = plyr.buttons[play ? 'play' : 'pause'], @@ -3147,14 +3199,14 @@ // Setup focus and tab focus if (target) { - var hadTabFocus = _hasClass(trigger, config.classes.tabFocus); + var hadTabFocus = hasClass(trigger, config.classes.tabFocus); setTimeout(function() { target.focus(); if (hadTabFocus) { - _toggleClass(trigger, config.classes.tabFocus, false); - _toggleClass(target, config.classes.tabFocus, true); + toggleClass(trigger, config.classes.tabFocus, false); + toggleClass(target, config.classes.tabFocus, true); } }, 100); } @@ -3183,12 +3235,12 @@ for (var button in plyr.buttons) { var element = plyr.buttons[button]; - if (_is.nodeList(element)) { + if (is.nodeList(element)) { for (var i = 0; i < element.length; i++) { - _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused)); + toggleClass(element[i], config.classes.tabFocus, (element[i] === focused)); } } else { - _toggleClass(element, config.classes.tabFocus, (element === focused)); + toggleClass(element, config.classes.tabFocus, (element === focused)); } } } @@ -3199,24 +3251,24 @@ // Handle global presses if (config.keyboardShorcuts.global) { - _on(window, 'keydown keyup', function(event) { + 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; + focused = getFocusElement(), + allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67], + count = get().length; // Only handle global key press if there's only one player - // and the key is in the allowed keys + // and the key is in the allowed keys // and if the focused element is not editable (e.g. text input) // and any that accept key input http://webaim.org/techniques/keyboard/ - if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) { + if (count === 1 && inArray(allowed, code) && (!is.htmlElement(focused) || !matches(focused, config.selectors.editable))) { handleKey(event); } }); } // Handle presses on focused - _on(plyr.container, 'keydown keyup', handleKey); + on(plyr.container, 'keydown keyup', handleKey); } function handleKey(event) { @@ -3226,7 +3278,7 @@ // If the event is bubbled from the media element // Firefox doesn't get the keycode for whatever reason - if (!_is.number(code)) { + if (!is.number(code)) { return; } @@ -3236,70 +3288,96 @@ var duration = plyr.media.duration; // Bail if we have no duration set - if (!_is.number(duration)) { + if (!is.number(duration)) { return; } - // Divide the max duration into 10th's and times by the number value - _seek((duration / 10) * (code - 48)); + // Divide the max duration into 10th's and times by the number value + 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 checkFocus = [38,40]; + var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67]; + var checkFocus = [38, 40]; - if (_inArray(checkFocus, code)) { + if (inArray(checkFocus, code)) { var focused = getFocusElement(); - if (_is.htmlElement(focused) && getFocusElement().type === "radio") { + if (is.htmlElement(focused) && getFocusElement().type === "radio") { return; } } // If the code is found prevent default (e.g. prevent scrolling for arrows) - if (_inArray(preventDefault, code)) { + if (inArray(preventDefault, code)) { event.preventDefault(); event.stopPropagation(); } - switch(code) { + switch (code) { // 0-9 - case 48: - case 49: - case 50: - case 51: - case 52: - case 53: - case 54: - case 55: + case 48: + case 49: + case 50: + case 51: + case 52: + case 53: + case 54: + case 55: case 56: - case 57: if (!held) { seekByKey(); } break; - // Space and K key - case 32: - case 75: if (!held) { _togglePlay(); } break; - // Arrow up - case 38: _increaseVolume(); break; - // Arrow down - case 40: _decreaseVolume(); break; - // M key - case 77: if (!held) { _toggleMute() } break; - // Arrow forward - case 39: _forward(); break; - // Arrow back - case 37: _rewind(); break; - // F key - case 70: _toggleFullscreen(); break; - // C key - case 67: if (!held) { _toggleCaptions(); } break; + case 57: + if (!held) { + seekByKey(); + } + break; + // Space and K key + case 32: + case 75: + if (!held) { + togglePlay(); + } + break; + // Arrow up + case 38: + increaseVolume(); + break; + // Arrow down + case 40: + decreaseVolume(); + break; + // M key + case 77: + if (!held) { + toggleMute() + } + break; + // Arrow forward + case 39: + forward(); + break; + // Arrow back + case 37: + rewind(); + break; + // F key + case 70: + toggleFullscreen(); + break; + // C key + case 67: + if (!held) { + toggleCaptions(); + } + break; } - // Escape is handle natively when in full screen + // Escape is handle natively when in full screen // So we only need to worry about non native - if (!_support.fullscreen && plyr.isFullscreen && code === 27) { - _toggleFullscreen(); + if (!support.fullscreen && plyr.isFullscreen && code === 27) { + toggleFullscreen(); } // Store last code for next cycle @@ -3310,7 +3388,7 @@ } // Focus/tab management - _on(window, 'keyup', function(event) { + on(window, 'keyup', function(event) { var code = getKeyCode(event), focused = getFocusElement(); @@ -3318,87 +3396,87 @@ checkTabFocus(focused); } }); - _on(document.body, 'click', function() { - _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false); + on(document.body, 'click', function() { + toggleClass(getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false); }); for (var button in plyr.buttons) { var element = plyr.buttons[button]; - _on(element, 'blur', function() { - _toggleClass(element, 'tab-focus', false); + on(element, 'blur', function() { + toggleClass(element, 'tab-focus', false); }); } // Play - _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay); + proxyListener(plyr.buttons.play, 'click', config.listeners.play, _togglePlay); // Pause - _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay); + proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, _togglePlay); // Restart - _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek); + proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, seek); // Rewind - _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind); + proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, rewind); // Fast forward - _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); + proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, forward); // Speed-up - _proxyListener(plyr.buttons.speed, 'click', config.listeners.speed, _speed); + proxyListener(plyr.buttons.speed, 'click', config.listeners.speed, speed); // Seek - _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); + proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, seek); // Set volume - _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() { - _setVolume(plyr.volume.input.value); + proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() { + setVolume(plyr.volume.input.value); }); // Mute - _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute); + proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, toggleMute); // Fullscreen - _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen); + proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen); // Handle user exiting fullscreen by escaping etc - if (_support.fullscreen) { - _on(document, _fullscreen.eventType, _toggleFullscreen); + if (support.fullscreen) { + on(document, fullscreen.eventType, toggleFullscreen); } // Captions - _on(plyr.buttons.captions, 'click', _toggleCaptions); + on(plyr.buttons.captions, 'click', toggleCaptions); // Settings - _on(plyr.buttons.settings, 'click', function(event) { + on(plyr.buttons.settings, 'click', function(event) { var menu = this, toggle = event.target, target = document.getElementById(toggle.getAttribute('aria-controls')), show = (toggle.getAttribute('aria-expanded') === 'false'); // Nothing to show, bail - if (!_is.htmlElement(target)) { + if (!is.htmlElement(target)) { return; } // Are we targetting a tab? var isTab = target.getAttribute('role') === 'tabpanel', - targetWidth, + targetWidth, targetHeight, container; // Hide all other tabs if (isTab) { // Get other tabs - var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]'); + 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'; + container.style.width = current.scrollWidth + 'px'; + container.style.height = current.scrollHeight + 'px'; current.setAttribute('aria-hidden', true); current.setAttribute('tabindex', -1); @@ -3411,9 +3489,9 @@ container.appendChild(clone); targetWidth = clone.scrollWidth; targetHeight = clone.scrollHeight; - _remove(clone); + remove(clone); } - + target.setAttribute('aria-hidden', !show); toggle.setAttribute('aria-expanded', show); target.setAttribute('tabindex', 0); @@ -3430,36 +3508,36 @@ }); // Picture in picture - _on(plyr.buttons.pip, 'click', function() { + on(plyr.buttons.pip, 'click', function() { //if () plyr.media.webkitSetPresentationMode(plyr.media.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture'); }); // Seek tooltip - _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip); + on(plyr.progress.container, 'mouseenter mouseleave mousemove', updateSeekTooltip); // Toggle controls visibility based on mouse movement if (config.hideControls) { // Toggle controls on mouse events and entering fullscreen - _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls); + on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', toggleControls); // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mouseenter mouseleave', function(event) { + on(plyr.controls, 'mouseenter mouseleave', function(event) { plyr.controls.hover = event.type === 'mouseenter'; }); - // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { - plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type); + // Watch for cursor over controls so they don't hide when trying to interact + on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { + plyr.controls.pressed = inArray(['mousedown', 'touchstart'], event.type); }); // Focus in/out on controls - _on(plyr.controls, 'focus blur', _toggleControls, true); + on(plyr.controls, 'focus blur', toggleControls, true); } // Adjust volume on scroll - _on(plyr.volume.input, 'wheel', function(event) { + on(plyr.volume.input, 'wheel', function(event) { event.preventDefault(); // Detect "natural" scroll - suppored on OS X Safari only @@ -3470,45 +3548,45 @@ // Scroll down (or up on natural) to decrease if (event.deltaY < 0 || event.deltaX > 0) { if (inverted) { - _decreaseVolume(step); + decreaseVolume(step); } else { - _increaseVolume(step); + increaseVolume(step); } } // Scroll up (or down on natural) to increase if (event.deltaY > 0 || event.deltaX < 0) { if (inverted) { - _increaseVolume(step); + increaseVolume(step); } else { - _decreaseVolume(step); + decreaseVolume(step); } } }); } // Listen for media events - function _mediaListeners() { + function mediaListeners() { // Time change on media - _on(plyr.media, 'timeupdate seeking', _timeUpdate); + on(plyr.media, 'timeupdate seeking', timeUpdate); // Update manual captions - _on(plyr.media, 'timeupdate', _seekManualCaptions); + on(plyr.media, 'timeupdate', seekManualCaptions); // Display duration - _on(plyr.media, 'durationchange loadedmetadata', _displayDuration); + on(plyr.media, 'durationchange loadedmetadata', displayDuration); // Handle the media finishing - _on(plyr.media, 'ended', function() { + on(plyr.media, 'ended', function() { // Show poster on end if (plyr.type === 'video' && config.showPosterOnEnd) { // Clear if (plyr.type === 'video') { - _setCaption(); + setCaption(); } - + // Restart - _seek(); + seek(); // Re-load media plyr.media.load(); @@ -3516,21 +3594,21 @@ }); // Check for buffer progress - _on(plyr.media, 'progress playing', _updateProgress); + on(plyr.media, 'progress playing', updateProgress); // Handle native mute - _on(plyr.media, 'volumechange', _updateVolume); + on(plyr.media, 'volumechange', updateVolume); // Handle native play/pause - _on(plyr.media, 'play pause ended', _checkPlaying); + on(plyr.media, 'play pause ended', checkPlaying); // Loading - _on(plyr.media, 'waiting canplay seeked', _checkLoading); + on(plyr.media, 'waiting canplay seeked', checkLoading); // Click video if (config.clickToPlay && plyr.type !== 'audio') { // Re-fetch the wrapper - var wrapper = _getElement('.' + config.classes.videoWrapper); + var wrapper = getElement('.' + config.classes.videoWrapper); // Bail if there's no wrapper (this should never happen) if (!wrapper) { @@ -3541,50 +3619,52 @@ wrapper.style.cursor = "pointer"; // On click play, pause ore restart - _on(wrapper, 'click', function() { + on(wrapper, 'click', function() { // Touch devices will just show controls (if we're hiding controls) if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) { return; } if (plyr.media.paused) { - _play(); + play(); } else if (plyr.media.ended) { - _seek(); - _play(); + seek(); + play(); } else { - _pause(); + pause(); } }); } // Disable right click if (config.disableContextMenu) { - _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); }); + on(plyr.media, 'contextmenu', function(event) { + event.preventDefault(); + }); } // Proxy events to container // Bubble up key events for Edge - _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) { - _triggerEvent(plyr.container, event.type, true); + on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) { + triggerEvent(plyr.container, event.type, true); }); } // Cancel current network requests // See https://github.com/Selz/plyr/issues/174 - function _cancelRequests() { - if (!_inArray(config.types.html5, plyr.type)) { + function cancelRequests() { + if (!inArray(config.types.html5, plyr.type)) { return; } // Remove child sources var sources = plyr.media.querySelectorAll('source'); for (var i = 0; i < sources.length; i++) { - _remove(sources[i]); + remove(sources[i]); } // Set blank video src attribute - // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error + // This is to prevent a MEDIA_ERR_SRC_NOTsupportED error // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection plyr.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4'); @@ -3594,13 +3674,13 @@ plyr.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) { + function destroy(callback, restore) { // Bail if the element is not initialized if (!plyr.init) { return null; @@ -3608,7 +3688,7 @@ // Type specific stuff switch (plyr.type) { - case 'youtube': + case 'youtube': // Clear timers window.clearInterval(timers.buffering); window.clearInterval(timers.playing); @@ -3618,11 +3698,11 @@ // Clean up cleanUp(); - + break; case 'vimeo': - // Destroy Vimeo API + // Destroy Vimeo API // then clean up (wait, to prevent postmessage errors) plyr.embed.unload().then(cleanUp); @@ -3634,7 +3714,7 @@ case 'video': case 'audio': // Restore native video controls - _toggleNativeControls(true); + toggleNativeControls(true); // Clean up cleanUp(); @@ -3644,12 +3724,12 @@ function cleanUp() { // Default to restore original element - if (!_is.boolean(restore)) { + if (!is.boolean(restore)) { restore = true; } // Callback - if (_is.function(callback)) { + if (is.function(callback)) { callback.call(original); } @@ -3668,43 +3748,43 @@ document.body.style.overflow = ''; // Event - _triggerEvent(original, 'destroyed', true); + triggerEvent(original, 'destroyed', true); } } // Setup a player - function _init() { + function init() { // Bail if the element is initialized if (plyr.init) { return null; } // Sniff out the browser - plyr.browser = _getBrowser(); + plyr.browser = getBrowser(); // Bail if nothing to setup - if (!_is.htmlElement(plyr.media)) { + if (!is.htmlElement(plyr.media)) { return; } // Load saved settings from localStorage - _setupStorage(); + 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'); + 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)); + 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 @@ -3716,31 +3796,31 @@ } // Wrap media - plyr.container = _wrap(media, document.createElement('div')); + plyr.container = wrap(media, document.createElement('div')); // Allow focus to be captured plyr.container.setAttribute('tabindex', 0); // Add style hook - _toggleStyleHook(); + toggleStyleHook(); // Debug info - _log('' + plyr.browser.name + ' ' + plyr.browser.version); + log('' + plyr.browser.name + ' ' + plyr.browser.version); // Setup media - _setupMedia(); + 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)) { + if (inArray(config.types.html5, plyr.type) || (inArray(config.types.embed, plyr.type) && !plyr.supported.full)) { // Setup UI - _setupInterface(); + setupInterface(); // Call ready - _ready(); + ready(); // Set title on button and frame - _setTitle(); + setTitle(); } // Successful setup @@ -3748,127 +3828,159 @@ } // Setup the UI - function _setupInterface() { + function setupInterface() { // Don't setup interface if no support if (!plyr.supported.full) { - _warn('Basic support only', plyr.type); + warn('Basic support only', plyr.type); // Remove controls - _remove(_getElement(config.selectors.controls.wrapper)); + remove(getElement(config.selectors.controls.wrapper)); // Remove large play - _remove(_getElement(config.selectors.buttons.play)); + remove(getElement(config.selectors.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; + var controlsMissing = !getElements(config.selectors.controls.wrapper).length; if (controlsMissing) { // Inject custom controls - _injectControls(); + injectControls(); } // Find the elements - if (!_findElements()) { + if (!findElements()) { return; } // If the controls are injected, re-bind listeners for controls if (controlsMissing) { - _controlListeners(); + controlListeners(); } // 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(); + setSpeed(); // 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, - setSpeed: _setSpeed, - togglePlay: _togglePlay, - toggleMute: _toggleMute, - toggleCaptions: _toggleCaptions, - toggleFullscreen: _toggleFullscreen, - toggleControls: _toggleControls, - setCaptionIndex: _setCaptionIndex, - isFullscreen: function() { return plyr.isFullscreen || false; }, - support: function(mimeType) { return _support.mime(plyr, mimeType); }, - destroy: _destroy + 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, + setSpeed: setSpeed, + togglePlay: togglePlay, + toggleMute: toggleMute, + toggleCaptions: toggleCaptions, + toggleFullscreen: toggleFullscreen, + toggleControls: toggleControls, + setCaptionIndex: setCaptionIndex, + isFullscreen: function() { + return plyr.isFullscreen || false; + }, + support: function(mimeType) { + return support.mime(plyr, mimeType); + }, + destroy: destroy }; // Everything done - function _ready() { + function ready() { // Ready event at end of execution stack - window.setTimeout(function() { - _triggerEvent(plyr.media, 'ready'); + window.setTimeout(function() { + triggerEvent(plyr.media, 'ready'); }, 0); // Set class hook on media element - _toggleClass(plyr.media, defaults.classes.setup, true); + toggleClass(plyr.media, defaults.classes.setup, true); // Set container class for ready - _toggleClass(plyr.container, config.classes.ready, true); + toggleClass(plyr.container, config.classes.ready, true); // Store a refernce to instance plyr.media.plyr = api; // Autoplay if (config.autoplay) { - _play(); + play(); } } // Initialize instance - _init(); + init(); // If init failed, return null if (!plyr.init) { @@ -3883,14 +3995,14 @@ var x = new XMLHttpRequest(); // If the id is set and sprite exists, bail - if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) { + 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)) { + if (is.string(id)) { container.setAttribute('id', id); } document.body.insertBefore(container, document.body.childNodes[0]); @@ -3912,61 +4024,61 @@ // Check for support function supported(type) { - var browser = _getBrowser(), - isOldIE = (browser.isIE && browser.version <= 9), - isIos = browser.isIos, - isIphone = /iPhone|iPod/i.test(navigator.userAgent), - audio = !!document.createElement('audio').canPlayType, - video = !!document.createElement('video').canPlayType, + var browser = getBrowser(), + isOldIE = (browser.isIE && browser.version <= 9), + isIos = browser.isIos, + isIphone = /iPhone|iPod/i.test(navigator.userAgent), + audio = !!document.createElement('audio').canPlayType, + video = !!document.createElement('video').canPlayType, basic, full; switch (type) { case 'video': basic = video; - full = (basic && (!isOldIE && !isIphone)); + full = (basic && (!isOldIE && !isIphone)); break; case 'audio': basic = audio; - full = (basic && !isOldIE); + full = (basic && !isOldIE); break; case 'vimeo': case 'youtube': case 'soundcloud': basic = true; - full = (!isOldIE && !isIos); + full = (!isOldIE && !isIos); break; default: basic = (audio && video); - full = (basic && !isOldIE); + full = (basic && !isOldIE); } return { - basic: basic, - full: full + basic: basic, + full: full }; } // Setup function function setup(targets, options) { // Get the players - var players = [], - instances = [], - selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); + var players = [], + instances = [], + selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); // Select the elements - if (_is.string(targets)) { + if (is.string(targets)) { // String selector passed targets = document.querySelectorAll(targets); - } else if (_is.htmlElement(targets)) { + } else if (is.htmlElement(targets)) { // Single HTMLElement passed targets = [targets]; - } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(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)) { + if (is.undefined(options) && is.object(targets)) { options = targets; } @@ -3975,7 +4087,7 @@ } // Convert NodeList to array - if (_is.nodeList(targets)) { + if (is.nodeList(targets)) { targets = Array.prototype.slice.call(targets); } @@ -3987,14 +4099,14 @@ // Add to container list function add(target, media) { - if (!_hasClass(media, defaults.classes.hook)) { + if (!hasClass(media, defaults.classes.hook)) { players.push({ // Always wrap in a <div> for styling - //container: _wrap(media, document.createElement('div')), + //container: wrap(media, document.createElement('div')), // Could be a container or the media itself - target: target, + target: target, // This should be the <video>, <audio> or <div> (YouTube/Vimeo) - media: media + media: media }); } } @@ -4011,7 +4123,7 @@ for (var x = 0; x < children.length; x++) { add(target, children[x]); } - } else if (_matches(target, selector)) { + } else if (matches(target, selector)) { // Target is media element add(target, target); } @@ -4019,9 +4131,9 @@ // Create a player instance for each element players.forEach(function(player) { - var element = player.target, - media = player.media, - match = false; + var element = player.target, + media = player.media, + match = false; // The target element can also be the media element if (media === element) { @@ -4033,10 +4145,11 @@ var data = {}; // Try parsing data attribute config - try { data = JSON.parse(element.getAttribute('data-plyr')); } - catch(e) { } + try { + data = JSON.parse(element.getAttribute('data-plyr')); + } catch (e) {} - var config = _extend({}, defaults, options, data); + var config = extend({}, defaults, options, data); // Bail if not enabled if (!config.enabled) { @@ -4047,22 +4160,22 @@ var instance = new Plyr(media, config); // Go to next if setup failed - if (!_is.object(instance)) { + if (!is.object(instance)) { return; } // Listen for events if debugging if (config.debug) { var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); - - _on(instance.getContainer(), events.join(' '), function(event) { + + on(instance.getContainer(), events.join(' '), function(event) { console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr); }); } // Callback - _event(instance.getContainer(), 'setup', true, { - plyr: instance + event(instance.getContainer(), 'setup', true, { + plyr: instance }); // Add to return array even if it's already setup @@ -4074,48 +4187,52 @@ // Get all instances within a provided container function get(container) { - if (_is.string(container)) { + if (is.string(container)) { // Get selector if string passed container = document.querySelector(container); - } else if (_is.undefined(container)) { + } else if (is.undefined(container)) { // Use body by default to get all on page container = document.body; } // If we have a HTML element - if (_is.htmlElement(container)) { + 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)) { + if (is.object(element.plyr)) { instances.push(element.plyr); } }); - return instances; + return instances; } return []; } return { - setup: setup, - supported: supported, + setup: setup, + supported: supported, loadSprite: loadSprite, - get: get + get: get }; })); // Custom event polyfill // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent -(function () { +(function() { if (typeof window.CustomEvent === 'function') { return; } function CustomEvent(event, params) { - params = params || { bubbles: false, cancelable: false, detail: undefined }; + params = params || { + bubbles: false, + cancelable: false, + detail: undefined + }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; |