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