// ========================================================================== // Plyr // plyr.js v1.0.14 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== (function (api) { "use strict"; // Globals var fullscreen, config; // Default config var defaults = { enabled: true, debug: false, seekInterval: 10, volume: 5, click: true, selectors: { container: ".player", controls: ".player-controls", buttons: { play: "[data-player='play']", pause: "[data-player='pause']", restart: "[data-player='restart']", rewind: "[data-player='rewind']", forward: "[data-player='fast-forward']", mute: "[data-player='mute']", volume: "[data-player='volume']", captions: "[data-player='captions']", fullscreen: "[data-player='fullscreen']" }, progress: { container: ".player-progress", buffer: ".player-progress-buffer", played: ".player-progress-played" }, captions: ".player-captions", duration: ".player-duration", seekTime: ".player-seek-time" }, classes: { video: "player-video", videoWrapper: "player-video-wrapper", audio: "player-audio", stopped: "stopped", playing: "playing", muted: "muted", captions: { enabled: "captions-enabled", active: "captions-active" }, fullscreen: { enabled: "fullscreen-enabled", active: "fullscreen-active" } }, captions: { defaultActive: false }, fullscreen: { enabled: true, fallback: true }, storage: { enabled: true, supported: function() { try { return "localStorage" in window && window.localStorage !== null; } catch(e) { return false; } } } }; // Debugging function _log(text, error) { if(config.debug && window.console) { console[(error ? "error" : "log")](text); } } // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to scattered support, browser sniffing is required function _browserSniff() { var nAgt = navigator.userAgent, browserName = navigator.appName, fullVersion = ""+parseFloat(navigator.appVersion), majorVersion = parseInt(navigator.appVersion,10), nameOffset, verOffset, ix; // MSIE 11 if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) { browserName = "IE"; fullVersion = "11;"; } // MSIE else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) { browserName = "IE"; fullVersion = nAgt.substring(verOffset+5); } // Chrome else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) { browserName = "Chrome"; fullVersion = nAgt.substring(verOffset+7); } // Safari else if ((verOffset=nAgt.indexOf("Safari")) !== -1) { browserName = "Safari"; fullVersion = nAgt.substring(verOffset+7); if ((verOffset=nAgt.indexOf("Version")) !== -1) { fullVersion = nAgt.substring(verOffset+8); } } // Firefox else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) { browserName = "Firefox"; fullVersion = nAgt.substring(verOffset+8); } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) { browserName = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset+1); if (browserName.toLowerCase()==browserName.toUpperCase()) { browserName = 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); } // Get major version majorVersion = parseInt(""+fullVersion,10); if (isNaN(majorVersion)) { fullVersion = ""+parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion,10); } // Return data return [browserName, majorVersion]; } // Replace all function _replaceAll(string, find, replace) { return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); } // Wrap an element function _wrap(elements, wrapper) { // Convert `elms` 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 el = elements[i]; // Cache the current parent and sibling. var parent = el.parentNode; var sibling = el.nextSibling; // Wrap the element (is automatically removed from its current // parent). child.appendChild(el); // 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); } } } // Toggle class on an element function _toggleClass(element, name, state) { if(element){ if(element.classList) { element.classList[state ? "add" : "remove"](name); } else { var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", ""); element.className = className + (state ? " " + name : ""); } } } // Toggle event function _toggleHandler(element, events, callback, toggle) { events = events.split(" "); for (var i = 0; i < events.length; i++) { element[toggle ? "addEventListener" : "removeEventListener"](events[i], callback, false); } } // Bind event function _on(element, events, callback) { _toggleHandler(element, events, callback, true); } // Unbind event function _off(element, events, callback) { _toggleHandler(element, events, callback, false); } // Get percentage function _getPercentage(current, max) { return Math.floor((current / max) * 100); } // Get click position relative to parent // http://www.kirupa.com/html5/getting_mouse_click_position.htm function _getClickPosition(event) { var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget); return { x: event.clientX - parentPosition.x, y: event.clientY - parentPosition.y }; } // Get element position function _getPosition(element) { var xPosition = 0; var yPosition = 0; while (element) { xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); yPosition += (element.offsetTop - element.scrollTop + element.clientTop); element = element.offsetParent; } return { x: xPosition, y: yPosition }; } // Deep extend/merge two Objects // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ // Removed call to arguments.callee (used explicit function name instead) function _extend(destination, source) { 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]; } } return destination; } // Fullscreen API function _fullscreen() { var fullscreen = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: "", element: null, prefix: "" }, browserPrefixes = "webkit moz o ms khtml".split(" "); // check for native support if (typeof document.cancelFullScreen != "undefined") { 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 (typeof document[fullscreen.prefix + "CancelFullScreen"] != "undefined") { fullscreen.supportsFullScreen = true; break; } // Special case for MS (when isn't it?) else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) { fullscreen.prefix = "ms"; fullscreen.supportsFullScreen = true; break; } } } // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported // https://bugs.webkit.org/show_bug.cgi?id=121496 if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) { fullscreen.supportsFullScreen = false; } // Update methods to do something useful if (fullscreen.supportsFullScreen) { // Yet again Microsoft awesomeness, // Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange"); fullscreen.isFullScreen = function() { switch (this.prefix) { case "": return document.fullScreen; case "webkit": return document.webkitIsFullScreen; case "ms": // Docs say document.msFullScreenElement returns undefined // if no element is full screem but it returns null, cheers // https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx return (document.msFullscreenElement !== null); default: return document[this.prefix + "FullScreen"]; } }; fullscreen.requestFullScreen = function(element) { return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null); }; 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 fullscreen; } // Player instance function Plyr(container) { var player = this; player.container = container; // Captions functions // Credits: http://paypal.github.io/accessible-html5-video-player/ // For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.) function _adjustManualCaptions() { player.subcount = 0; while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) { player.subcount++; if (player.subcount > player.captions.length-1) { player.subcount = player.captions.length-1; break; } } } // Display captions container and button (for initialization) function _showCaptions() { _toggleClass(player.container, config.classes.captions.enabled, true); if (config.captions.defaultActive) { _toggleClass(player.container, config.classes.captions.active, true); player.buttons.captions.setAttribute("checked", "checked"); } } // Utilities for caption time codes function _timecodeMin(tc) { var tcpair = []; tcpair = tc.split(" --> "); return _subTcSecs(tcpair[0]); } function _timecodeMax(tc) { var tcpair = []; tcpair = tc.split(" --> "); return _subTcSecs(tcpair[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; } } // Find all elements function _getElements(selector) { return player.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; } catch (e) { return true; } } // Insert controls function _injectControls() { // Insert custom video controls _log("Injecting custom controls."); // Use specified html // Need to do a default? var html = config.html; // Replace aria label instances html = _replaceAll(html, "{aria-label}", config.playAriaLabel); // Replace all id references html = _replaceAll(html, "{id}", player.random); // Inject into the container player.container.insertAdjacentHTML("beforeend", html); } // Find the UI controls and store references function _findElements() { try { player.controls = _getElement(config.selectors.controls); // Buttons player.buttons = {}; player.buttons.play = _getElement(config.selectors.buttons.play); player.buttons.pause = _getElement(config.selectors.buttons.pause); player.buttons.restart = _getElement(config.selectors.buttons.restart); player.buttons.rewind = _getElement(config.selectors.buttons.rewind); player.buttons.forward = _getElement(config.selectors.buttons.forward); player.buttons.mute = _getElement(config.selectors.buttons.mute); player.buttons.captions = _getElement(config.selectors.buttons.captions); player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); // Progress player.progress = {}; player.progress.container = _getElement(config.selectors.progress.container); // Progress - Buffering player.progress.buffer = {}; player.progress.buffer.bar = _getElement(config.selectors.progress.buffer); player.progress.buffer.text = player.progress.buffer.bar.getElementsByTagName("span")[0]; // Progress - Played player.progress.played = {}; player.progress.played.bar = _getElement(config.selectors.progress.played); player.progress.played.text = player.progress.played.bar.getElementsByTagName("span")[0]; // Volume player.volume = _getElement(config.selectors.buttons.volume); // Timing player.duration = _getElement(config.selectors.duration); player.seekTime = _getElements(config.selectors.seekTime); return true; } catch(e) { _log("It looks like there's a problem with your controls html. Bailing.", true); return false; } } // Setup media function _setupMedia() { player.media = player.container.querySelectorAll("audio, video")[0]; // If there's no media, bail if(!player.media) { _log("No audio or video element found!", true); return false; } // Remove native video controls player.media.removeAttribute("controls"); // Set media type player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); // Add type class _toggleClass(player.container, config.classes[player.type], true); // If there's no autoplay attribute, assume the video is stopped and add state class _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); // Inject the player wrapper if(player.type === "video") { // Create the wrapper div var wrapper = document.createElement("div"); wrapper.setAttribute("class", config.classes.videoWrapper); // Wrap the video in a container _wrap(player.media, wrapper); // Cache the container player.videoContainer = wrapper; } } // Setup captions function _setupCaptions() { if(player.type === "video") { // Inject the container player.videoContainer.insertAdjacentHTML("afterbegin", "
"); // Cache selector player.captionsContainer = _getElement(config.selectors.captions); // Determine if HTML5 textTracks is supported player.isTextTracks = false; if (player.media.textTracks) { player.isTextTracks = true; } // Get URL of caption file if exists var captionSrc = "", kind, children = player.media.childNodes; for (var i = 0; i < children.length; i++) { if (children[i].nodeName.toLowerCase() === "track") { kind = children[i].getAttribute("kind"); if (kind === "captions") { captionSrc = children[i].getAttribute("src"); } } } // Record if caption file exists or not player.captionExists = true; if (captionSrc === "") { player.captionExists = false; _log("No caption track found."); } else { _log("Caption track found; URI: " + captionSrc); } // If no caption file exists, hide container for caption text if (!player.captionExists) { _toggleClass(player.container, config.classes.captions.enabled); } // If caption file exists, process captions else { // Turn off native caption rendering to avoid double captions // This doesn't seem to work in Safari 7+, so the