// ==========================================================================
// Plyr
// plyr.js v1.0.20
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
// 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,
seekTime: 10,
volume: 5,
click: true,
selectors: {
container: ".player",
controls: ".player-controls",
buttons: {
seek: "[data-player='seek']",
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"
},
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
},
html: (function() {
return [
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"",
"",
"",
"",
"",
"",
"Time",
"00:00",
"",
"",
"
",
"",
"",
"",
"",
"",
"",
"",
"",
"
"
].join("\n");
})()
};
// 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);
}
}
// Set attributes
function _setAttributes(element, attributes) {
for(var key in attributes) {
element.setAttribute(key, attributes[key]);
}
}
// Prepend child
function _prependChild(parent, element) {
parent.insertBefore(element, parent.firstChild);
}
// 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 ((current / max) * 100).toFixed(2);
}
// 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;
}
// Local storage
function _storage() {
var storage = {
supported: (function() {
try {
return "localStorage" in window && window.localStorage !== null;
}
catch(e) {
return false;
}
})()
}
return storage;
}
// 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 seek time instances
html = _replaceAll(html, "{seektime}", config.seekTime);
// 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.seek = _getElement(config.selectors.buttons.seek);
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 aria attributes
function _setupAria() {
var label = player.buttons.play.innerText || "Play";
// If there's a media title set, use that for the label
if (typeof(config.title) !== "undefined" && config.title.length) {
label += ", " + config.title;
}
player.buttons.play.setAttribute("aria-label", label);
}
// 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;
}
// Autoplay
if(player.media.getAttribute("autoplay") !== null) {
_play();
}
}
// 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