ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
plyr/src/js/plyr.js
Sam Potts 5abf7e9535
Merge pull request #703 from gurupras/early-listener-fix 
Allow Plyr.setup event listeners to be set up as separate event listeners
2017-11-04 18:15:03 +11:00

3967 lines
137 KiB
JavaScript
Raw Blame History

// ==========================================================================
// Plyr
// plyr.js v2.0.16
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
(function(root, factory) {
"use strict";
/*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);
});
} else {
// Browser globals (root is window)
root.plyr = factory(root, document);
}
})(typeof window !== "undefined" ? window : this, function(window, document) {
"use strict";
// Globals
var fullscreen,
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.16/plyr.svg",
blankUrl: "https://cdn.plyr.io/static/blank.mp4",
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
disableContextMenu: true,
keyboardShorcuts: {
focused: true,
global: false
},
tooltips: {
controls: false,
seek: true
},
selectors: {
html5: "video, audio",
embed: "[data-type]",
editable: "input, textarea, select, [contenteditable]",
container: ".plyr",
controls: {
container: null,
wrapper: ".plyr__controls"
},
labels: "[data-plyr]",
buttons: {
seek: '[data-plyr="seek"]',
play: '[data-plyr="play"]',
pause: '[data-plyr="pause"]',
restart: '[data-plyr="restart"]',
rewind: '[data-plyr="rewind"]',
forward: '[data-plyr="fast-forward"]',
mute: '[data-plyr="mute"]',
captions: '[data-plyr="captions"]',
fullscreen: '[data-plyr="fullscreen"]'
},
volume: {
input: '[data-plyr="volume"]',
display: ".plyr__volume--display"
},
progress: {
container: ".plyr__progress",
buffer: ".plyr__progress--buffer",
played: ".plyr__progress--played"
},
captions: ".plyr__captions",
currentTime: ".plyr__time--current",
duration: ".plyr__time--duration"
},
classes: {
setup: "plyr--setup",
ready: "plyr--ready",
videoWrapper: "plyr__video-wrapper",
embedWrapper: "plyr__video-embed",
type: "plyr--{0}",
stopped: "plyr--stopped",
playing: "plyr--playing",
muted: "plyr--muted",
loading: "plyr--loading",
hover: "plyr--hover",
tooltip: "plyr__tooltip",
hidden: "plyr__sr-only",
hideControls: "plyr--hide-controls",
isIos: "plyr--is-ios",
isTouch: "plyr--is-touch",
captions: {
enabled: "plyr--captions-enabled",
active: "plyr--captions-active"
},
fullscreen: {
enabled: "plyr--fullscreen-enabled",
fallback: "plyr--fullscreen-fallback",
active: "plyr--fullscreen-active"
},
tabFocus: "tab-focus"
},
captions: {
defaultActive: false
},
fullscreen: {
enabled: true,
fallback: true,
allowAudio: false
},
storage: {
enabled: true,
key: "plyr"
},
controls: ["play-large", "play", "progress", "current-time", "mute", "volume", "captions", "fullscreen"],
i18n: {
restart: "Restart",
rewind: "Rewind {seektime} secs",
play: "Play",
pause: "Pause",
forward: "Forward {seektime} secs",
played: "played",
buffered: "buffered",
currentTime: "Current time",
duration: "Duration",
volume: "Volume",
toggleMute: "Toggle Mute",
toggleCaptions: "Toggle Captions",
toggleFullscreen: "Toggle Fullscreen",
frameTitle: "Player for {title}"
},
types: {
embed: ["youtube", "vimeo", "soundcloud"],
html5: ["video", "audio"]
},
// URLs
urls: {
vimeo: {
api: "https://player.vimeo.com/api/player.js"
},
youtube: {
api: "https://www.youtube.com/iframe_api"
},
soundcloud: {
api: "https://w.soundcloud.com/player/api.js"
}
},
// Custom control listeners
listeners: {
seek: null,
play: null,
pause: null,
restart: null,
rewind: null,
forward: null,
mute: null,
volume: null,
captions: null,
fullscreen: null
},
// Events to watch on HTML5 media elements
events: [
"ready",
"ended",
"progress",
"stalled",
"playing",
"waiting",
"canplay",
"canplaythrough",
"loadstart",
"loadeddata",
"loadedmetadata",
"timeupdate",
"volumechange",
"play",
"pause",
"error",
"seeking",
"seeked",
"emptied"
],
// Logging
logPrefix: "[Plyr]"
};
// 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) {
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;
}
}
// 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 {
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 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;
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/, ""));
}
} 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/, ""));
}
}
// If we got this far, we're stuffed
return false;
}
// Inject a script
function _injectScript(source) {
if (document.querySelectorAll('script[src="' + source + '"]').length) {
return;
}
var tag = document.createElement("script");
tag.src = source;
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// Element exists in an array
function _inArray(haystack, needle) {
return Array.prototype.indexOf && haystack.indexOf(needle) !== -1;
}
// 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 `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];
// 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);
// 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;
}
}
// 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;
// Move all children out of the element
while (wrapper.firstChild) {
parent.insertBefore(wrapper.firstChild, wrapper);
}
// Remove the empty element
parent.removeChild(wrapper);
}*/
// Remove an element
function _remove(element) {
if (!element) {
return;
}
element.parentNode.removeChild(element);
}
// Prepend child
function _prependChild(parent, element) {
parent.insertBefore(element, parent.firstChild);
}
// Set attributes
function _setAttributes(element, attributes) {
for (var key in attributes) {
element.setAttribute(key, _is.boolean(attributes[key]) && attributes[key] ? "" : attributes[key]);
}
}
// Insert a HTML element
function _insertElement(type, parent, attributes) {
// Create a new <element>
var element = document.createElement(type);
// Set all passed attributes
_setAttributes(element, attributes);
// Inject the new element
_prependChild(parent, element);
}
// Get a classname from selector
function _getClassname(selector) {
return selector.replace(".", "");
}
// 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 : "");
}
}
}
// 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);
}
}
return false;
}
// Element matches selector
function _matches(element, selector) {
var p = Element.prototype;
var f =
p.matches ||
p.webkitMatchesSelector ||
p.mozMatchesSelector ||
p.msMatchesSelector ||
function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
};
return f.call(element, selector);
}
// Bind along with custom handler
function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
if(userListener) {
// Register this before defaultListener
_on(
element,
eventName,
function(event) {
userListener.apply(element, [event]);
},
useCapture
);
}
_on(
element,
eventName,
function(event) {
defaultListener.apply(element, [event]);
},
useCapture
);
}
// Toggle event listener
function _toggleListener(element, events, callback, toggle, useCapture) {
var eventList = events.split(" ");
// Whether the listener is a capturing listener or not
// Default to false
if (!_is.boolean(useCapture)) {
useCapture = false;
}
// 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]);
}
}
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);
}
}
// Bind event
function _on(element, events, callback, useCapture) {
if (element) {
_toggleListener(element, events, callback, true, useCapture);
}
}
// Unbind event
function _off(element, events, callback, useCapture) {
if (element) {
_toggleListener(element, events, callback, false, useCapture);
}
}
// Trigger event
function _event(element, type, bubbles, properties) {
// Bail if no element
if (!element || !type) {
return;
}
// Default bubbles to false
if (!_is.boolean(bubbles)) {
bubbles = false;
}
// Create and dispatch the event
var event = new CustomEvent(type, {
bubbles: bubbles,
detail: properties
});
// Dispatch the event
element.dispatchEvent(event);
}
// 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;
}
// Get state
state = _is.boolean(state) ? state : !target.getAttribute("aria-pressed");
// Set the attribute on target
target.setAttribute("aria-pressed", state);
return state;
}
// Get percentage
function _getPercentage(current, max) {
if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
return 0;
}
return (current / max * 100).toFixed(2);
}
// 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;
// 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),
length = objects.length;
// Loop through all objects to merge
for (var i = 0; i < length; i++) {
var source = objects[i];
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;
}
// Check variable types
var _is = {
object: function(input) {
return input !== null && typeof input === "object";
},
array: function(input) {
return input !== null && (typeof input === "object" && input.constructor === Array);
},
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";
},
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;
}
// Parse Vimeo ID from url
function _parseVimeoId(url) {
var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
return url.match(regex) ? RegExp.$2 : url;
}
// 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;
}
}
}
// 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(element) {
if (_is.undefined(element)) {
element = document.body;
}
switch (this.prefix) {
case "":
return document.fullscreenElement === element;
case "moz":
return document.mozFullScreenElement === element;
default:
return document[this.prefix + "FullscreenElement"] === element;
}
};
fullscreen.requestFullScreen = function(element) {
if (_is.undefined(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 fullscreen;
}
// Local storage
var _storage = {
supported: (function() {
// Try to use it (it might be disabled, e.g. user is in private/porn mode)
// see: https://github.com/sampotts/plyr/issues/131
try {
// Add test item
window.localStorage.setItem("___test", "OK");
// Get the test item
var result = window.localStorage.getItem("___test");
// Clean up
window.localStorage.removeItem("___test");
// Check if value matches
return result === "OK";
} catch (e) {
return false;
}
return false;
})()
};
// Player instance
function Plyr(media, config) {
var plyr = this,
timers = {},
api;
// Set media
plyr.media = media;
var original = media.cloneNode(true);
// Trigger events, with plyr instance passed
function _triggerEvent(element, type, bubbles, properties) {
_event(
element,
type,
bubbles,
_extend({}, properties, {
plyr: api
})
);
}
// Debugging
function _console(type, args) {
if (config.debug && window.console) {
args = Array.prototype.slice.call(args);
if (_is.string(config.logPrefix) && config.logPrefix.length) {
args.unshift(config.logPrefix);
}
console[type].apply(console, args);
}
}
var _log = function() {
_console("log", arguments);
},
_warn = function() {
_console("warn", arguments);
};
// Log config options
_log("Config", config);
// Get icon URL
function _getIconUrl() {
return {
url: config.iconUrl,
absolute: config.iconUrl.indexOf("http") === 0 || plyr.browser.isIE
};
}
// Build the default HTML
function _buildControls() {
// Create html array
var html = [],
iconUrl = _getIconUrl(),
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>"
);
}
html.push('<div class="plyr__controls">');
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
// Seek tooltip
if (config.tooltips.seek) {
html.push('<span class="plyr__tooltip">00:00</span>');
}
// Close
html.push("</span>");
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// 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>"
);
}
// Close everything
html.push("</div>");
return html.join("");
}
// Setup fullscreen
function _setupFullscreen() {
if (!plyr.supported.full) {
return;
}
if ((plyr.type !== "audio" || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
_log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled");
// Add styling hook
if (!nativeSupport) {
_toggleClass(plyr.container, config.classes.fullscreen.fallback, true);
}
// Add styling hook
_toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
} else {
_log("Fullscreen not supported and fallback disabled");
}
// Toggle state
if (plyr.buttons && plyr.buttons.fullscreen) {
_toggleState(plyr.buttons.fullscreen, false);
}
// Setup focus trap
_focusTrap();
}
}
// Setup captions
function _setupCaptions() {
// Bail if not HTML5 video
if (plyr.type !== "video") {
return;
}
// Inject the container
if (!_getElement(config.selectors.captions)) {
plyr.videoContainer.insertAdjacentHTML(
"afterbegin",
'<div class="' + _getClassname(config.selectors.captions) + '"></div>'
);
}
// Determine if HTML5 textTracks is supported
plyr.usingTextTracks = false;
if (plyr.media.textTracks) {
plyr.usingTextTracks = true;
}
// Get URL of caption file if exists
var captionSrc = "",
kind,
children = plyr.media.childNodes;
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");
}
}
}
// 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);
}
// 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";
}
// Enable UI
_showCaptions(plyr);
// 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)
) {
// Debugging
_log("Detected browser with known TextTrack issues - using manual fallback");
// Set to false so skips to 'manual' captioning
plyr.usingTextTracks = false;
}
// 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 (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();
}
}
}
}
// 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 = "";
// Default to empty
if (_is.undefined(caption)) {
caption = "";
}
// Set the span content
if (_is.string(caption)) {
content.innerHTML = caption.trim();
} else {
content.appendChild(caption);
}
// 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]);
}
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;
}
}
// If it's not video, or we're using textTracks, bail.
if (plyr.usingTextTracks || plyr.type !== "video" || !plyr.supported.full) {
return;
}
// Reset subcount
plyr.subcount = 0;
// 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;
// If there's no subs available, bail
if (!plyr.captions[plyr.subcount]) {
return;
}
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;
}
}
// 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];
// Render the caption
_setCaption(plyr.currentCaption);
} else {
_setCaption();
}
}
// Display captions container and button (for initialization)
function _showCaptions() {
// If there's no caption toggle, bail
if (!plyr.buttons.captions) {
return;
}
_toggleClass(plyr.container, config.classes.captions.enabled, true);
// Try to load the value from storage
var active = plyr.storage.captionsEnabled;
// Otherwise fall back to the default config
if (!_is.boolean(active)) {
active = config.captions.defaultActive;
}
if (active) {
_toggleClass(plyr.container, config.classes.captions.active, true);
_toggleState(plyr.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;
} catch (e) {
return true;
}
}
// Trap focus inside container
function _focusTrap() {
var tabbables = _getElements("input:not([disabled]), button:not([disabled])"),
first = tabbables[0],
last = tabbables[tabbables.length - 1];
function _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();
}
}
}
// Bind the handler
_on(plyr.container, "keydown", _checkFocus);
}
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
if (_is.string(attributes)) {
_insertElement(type, plyr.media, { src: attributes });
} else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
}
}
// Insert controls
function _injectControls() {
// Sprite
if (config.loadSprite) {
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");
} else {
_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();
}
// Replace seek time instances
html = _replaceAll(html, "{seektime}", config.seekTime);
// Replace all id references with random numbers
html = _replaceAll(html, "{id}", Math.floor(Math.random() * 10000));
// Controls container
var target;
// Inject to custom location
if (_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;
}
// Inject controls HTML
target.insertAdjacentHTML("beforeend", html);
// Setup tooltips
if (config.tooltips.controls) {
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);
}
}
}
// Find the UI controls and store references
function _findElements() {
try {
plyr.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);
// Progress
plyr.progress = {};
plyr.progress.container = _getElement(config.selectors.progress.container);
// 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];
// Progress - Played
plyr.progress.played = _getElement(config.selectors.progress.played);
// Seek tooltip
plyr.progress.tooltip =
plyr.progress.container && plyr.progress.container.querySelector("." + config.classes.tooltip);
// 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);
return true;
} catch (e) {
_warn("It looks like there is a problem with your controls HTML");
// Restore native video controls
_toggleNativeControls(true);
return false;
}
}
// Toggle style hook
function _toggleStyleHook() {
_toggleClass(plyr.container, config.selectors.container.replace(".", ""), plyr.supported.full);
}
// Toggle native controls
function _toggleNativeControls(toggle) {
if (toggle && _inArray(config.types.html5, plyr.type)) {
plyr.media.setAttribute("controls", "");
} else {
plyr.media.removeAttribute("controls");
}
}
// Setup aria attribute for play and iframe title
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) {
label += ", " + config.title;
// Set container label
plyr.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);
}
}
// Set iframe title
// https://github.com/sampotts/plyr/issues/124
if (_is.htmlElement(iframe)) {
iframe.setAttribute("title", config.i18n.frameTitle.replace("{title}", config.title));
}
}
// Setup localStorage
function _setupStorage() {
var value = null;
plyr.storage = {};
// Bail if we don't have localStorage support or it's disabled
if (!_storage.supported || !config.storage.enabled) {
return;
}
// Clean up old volume
// https://github.com/sampotts/plyr/issues/171
window.localStorage.removeItem("plyr-volume");
// load value from the current key
value = window.localStorage.getItem(config.storage.key);
if (!value) {
// Key wasn't set (or had been cleared), move along
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
// Update the key to be JSON
_updateStorage({ volume: parseFloat(value) });
} else {
// Assume it's JSON from this or a later version of plyr
plyr.storage = JSON.parse(value);
}
}
// Save a value back to local storage
function _updateStorage(value) {
// Bail if we don't have localStorage support or it's disabled
if (!_storage.supported || !config.storage.enabled) {
return;
}
// Update the working copy of the values
_extend(plyr.storage, value);
// Update storage
window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage));
}
// Setup media
function _setupMedia() {
// If there's no media, bail
if (!plyr.media) {
_warn("No media element found!");
return;
}
if (plyr.supported.full) {
// Add type class
_toggleClass(plyr.container, config.classes.type.replace("{0}", plyr.type), true);
// Add video class for embeds
// This will require changes if audio embeds are added
if (_inArray(config.types.embed, plyr.type)) {
_toggleClass(plyr.container, config.classes.type.replace("{0}", "video"), true);
}
// If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
// Add iOS class
_toggleClass(plyr.container, config.classes.isIos, plyr.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);
// Wrap the video in a container
_wrap(plyr.media, wrapper);
// Cache the container
plyr.videoContainer = wrapper;
}
}
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
_setupEmbed();
}
}
// Setup YouTube/Vimeo
function _setupEmbed() {
var container = document.createElement("div"),
mediaId,
id = plyr.type + "-" + Math.floor(Math.random() * 10000);
// Parse IDs from URLs if supplied
switch (plyr.type) {
case "youtube":
mediaId = _parseYouTubeId(plyr.embedId);
break;
case "vimeo":
mediaId = _parseVimeoId(plyr.embedId);
break;
default:
mediaId = plyr.embedId;
}
// Remove old containers
var containers = _getElements('[id^="' + plyr.type + '-"]');
for (var i = containers.length - 1; i >= 0; i--) {
_remove(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);
// Set ID
container.setAttribute("id", id);
// Setup API
if (_is.object(window.YT)) {
_youTubeReady(mediaId, container);
} else {
// Load the API
_injectScript(config.urls.youtube.api);
// Setup callback for the API
window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
// Add to queue
window.onYouTubeReadyCallbacks.push(function() {
_youTubeReady(mediaId, container);
});
// Set callback to process queue
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;
}
// Set ID
container.setAttribute("id", id);
// Load the API if not already
if (!_is.object(window.Vimeo)) {
_injectScript(config.urls.vimeo.api);
// Wait for fragaloop load
var vimeoTimer = window.setInterval(function() {
if (_is.object(window.Vimeo)) {
window.clearInterval(vimeoTimer);
_vimeoReady(mediaId, container);
}
}, 50);
} else {
_vimeoReady(mediaId, container);
}
} else if (plyr.type === "soundcloud") {
// TODO: Currently unsupported and undocumented
// Inject the iframe
var soundCloud = document.createElement("iframe");
// Watch for iframe load
soundCloud.loaded = false;
_on(soundCloud, "load", function() {
soundCloud.loaded = true;
});
_setAttributes(soundCloud, {
src: "https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/" + mediaId,
id: id
});
container.appendChild(soundCloud);
plyr.media.appendChild(container);
// Load the API if not already
if (!window.SC) {
_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);
}
}, 50);
}
}
// When embeds are ready
function _embedReady() {
// Setup the UI and call ready if full support
if (plyr.supported.full) {
_setupInterface();
_ready();
}
// Set title
_setTitle(_getElement("iframe"));
}
// Handle YouTube API ready
function _youTubeReady(videoId, container) {
// Setup instance
// https://developers.google.com/youtube/iframe_api_reference
plyr.embed = new window.YT.Player(container.id, {
videoId: videoId,
playerVars: {
autoplay: config.autoplay ? 1 : 0,
controls: plyr.supported.full ? 0 : 1,
rel: 0,
showinfo: 0,
iv_load_policy: 3,
cc_load_policy: config.captions.defaultActive ? 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
},
events: {
onError: function(event) {
_triggerEvent(plyr.container, "error", true, {
code: event.data,
embed: event.target
});
},
onReady: function(event) {
// Get the instance
var instance = event.target;
// Create a faux HTML5 API using the YouTube API
plyr.media.play = function() {
instance.playVideo();
plyr.media.paused = false;
};
plyr.media.pause = function() {
instance.pauseVideo();
plyr.media.paused = true;
};
plyr.media.stop = function() {
instance.stopVideo();
plyr.media.paused = true;
};
plyr.media.duration = instance.getDuration();
plyr.media.paused = true;
plyr.media.currentTime = 0;
plyr.media.muted = instance.isMuted();
// Set title
config.title = instance.getVideoData().title;
// Set the tabindex
if (plyr.supported.full) {
plyr.media.querySelector("iframe").setAttribute("tabindex", "-1");
}
// Update UI
_embedReady();
// Trigger timeupdate
_triggerEvent(plyr.media, "timeupdate");
// Trigger timeupdate
_triggerEvent(plyr.media, "durationchange");
// Reset timer
window.clearInterval(timers.buffering);
// Setup buffering
timers.buffering = window.setInterval(function() {
// Get loaded % from YouTube
plyr.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");
}
// Set last buffer point
plyr.media.lastBuffered = plyr.media.buffered;
// Bail if we're at 100%
if (plyr.media.buffered === 1) {
window.clearInterval(timers.buffering);
// Trigger event
_triggerEvent(plyr.media, "canplaythrough");
}
}, 200);
},
onStateChange: function(event) {
// Get the instance
var instance = event.target;
// Reset timer
window.clearInterval(timers.playing);
// Handle events
// -1 Unstarted
// 0 Ended
// 1 Playing
// 2 Paused
// 3 Buffering
// 5 Video cued
switch (event.data) {
case 0:
plyr.media.paused = true;
_triggerEvent(plyr.media, "ended");
break;
case 1:
plyr.media.paused = false;
// If we were seeking, fire seeked event
if (plyr.media.seeking) {
_triggerEvent(plyr.media, "seeked");
}
plyr.media.seeking = false;
_triggerEvent(plyr.media, "play");
_triggerEvent(plyr.media, "playing");
// Poll to get playback progress
timers.playing = window.setInterval(function() {
// Set the current time
plyr.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
_triggerEvent(plyr.media, "timeupdate");
}, 100);
// Check duration again due to YouTube bug
// https://github.com/sampotts/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");
}
break;
case 2:
plyr.media.paused = true;
_triggerEvent(plyr.media, "pause");
break;
}
_triggerEvent(plyr.container, "statechange", false, {
code: event.data
});
}
}
});
}
// Vimeo ready
function _vimeoReady(mediaId, container) {
// Setup instance
// https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId),
loop: config.loop,
autoplay: config.autoplay,
byline: false,
portrait: false,
title: false
});
// Create a faux HTML5 API using the Vimeo API
plyr.media.play = function() {
plyr.embed.play();
plyr.media.paused = false;
};
plyr.media.pause = function() {
plyr.embed.pause();
plyr.media.paused = true;
};
plyr.media.stop = function() {
plyr.embed.stop();
plyr.media.paused = true;
};
plyr.media.paused = true;
plyr.media.currentTime = 0;
// Update UI
_embedReady();
plyr.embed.getCurrentTime().then(function(value) {
plyr.media.currentTime = value;
// Trigger timeupdate
_triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.getDuration().then(function(value) {
plyr.media.duration = value;
// Trigger timeupdate
_triggerEvent(plyr.media, "durationchange");
});
// TODO: Captions
/*if (config.captions.defaultActive) {
plyr.embed.enableTextTrack('en');
}*/
plyr.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");
}
});
plyr.embed.on("play", function() {
plyr.media.paused = false;
_triggerEvent(plyr.media, "play");
_triggerEvent(plyr.media, "playing");
});
plyr.embed.on("pause", function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, "pause");
});
plyr.embed.on("timeupdate", function(data) {
plyr.media.seeking = false;
plyr.media.currentTime = data.seconds;
_triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.on("progress", function(data) {
plyr.media.buffered = data.percent;
_triggerEvent(plyr.media, "progress");
if (parseInt(data.percent) === 1) {
// Trigger event
_triggerEvent(plyr.media, "canplaythrough");
}
});
plyr.embed.on("seeked", function() {
plyr.media.seeking = false;
_triggerEvent(plyr.media, "seeked");
_triggerEvent(plyr.media, "play");
});
plyr.embed.on("ended", function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, "ended");
});
}
// Soundcloud ready
function _soundcloudReady() {
/* jshint validthis: true */
plyr.embed = window.SC.Widget(this);
// Setup on ready
plyr.embed.bind(window.SC.Widget.Events.READY, function() {
// Create a faux HTML5 API using the Soundcloud API
plyr.media.play = function() {
plyr.embed.play();
plyr.media.paused = false;
};
plyr.media.pause = function() {
plyr.embed.pause();
plyr.media.paused = true;
};
plyr.media.stop = function() {
plyr.embed.seekTo(0);
plyr.embed.pause();
plyr.media.paused = true;
};
plyr.media.paused = true;
plyr.media.currentTime = 0;
plyr.embed.getDuration(function(value) {
plyr.media.duration = value / 1000;
// Update UI
_embedReady();
});
plyr.embed.getPosition(function(value) {
plyr.media.currentTime = value;
// Trigger timeupdate
_triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
plyr.media.paused = false;
_triggerEvent(plyr.media, "play");
_triggerEvent(plyr.media, "playing");
});
plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, "pause");
});
plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
plyr.media.seeking = false;
plyr.media.currentTime = data.currentPosition / 1000;
_triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
plyr.media.buffered = data.loadProgress;
_triggerEvent(plyr.media, "progress");
if (parseInt(data.loadProgress) === 1) {
// Trigger event
_triggerEvent(plyr.media, "canplaythrough");
}
});
plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, "ended");
});
});
}
// Play media
function _play() {
if ("play" in plyr.media) {
plyr.media.play();
}
}
// Pause media
function _pause() {
if ("pause" in plyr.media) {
plyr.media.pause();
}
}
// Toggle playback
function _togglePlay(toggle) {
// True toggle
if (!_is.boolean(toggle)) {
toggle = plyr.media.paused;
}
if (toggle) {
_play();
} else {
_pause();
}
return toggle;
}
// Rewind
function _rewind(seekTime) {
// Use default if needed
if (!_is.number(seekTime)) {
seekTime = config.seekTime;
}
_seek(plyr.media.currentTime - seekTime);
}
// Fast forward
function _forward(seekTime) {
// Use default if needed
if (!_is.number(seekTime)) {
seekTime = config.seekTime;
}
_seek(plyr.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();
if (_is.number(input)) {
targetTime = input;
} else if (_is.object(input) && _inArray(["input", "change"], input.type)) {
// It's the seek slider
// Seek to the selected time
targetTime = input.target.value / input.target.max * duration;
}
// Normalise targetTime
if (targetTime < 0) {
targetTime = 0;
} else if (targetTime > duration) {
targetTime = duration;
}
// Update seek range and progress
_updateSeekDisplay(targetTime);
// Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try {
plyr.media.currentTime = targetTime.toFixed(4);
} catch (e) {}
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
switch (plyr.type) {
case "youtube":
plyr.embed.seekTo(targetTime);
break;
case "vimeo":
// Round to nearest second for vimeo
plyr.embed.setCurrentTime(targetTime.toFixed(0));
break;
case "soundcloud":
plyr.embed.seekTo(targetTime * 1000);
break;
}
if (paused) {
_pause();
}
// Trigger timeupdate
_triggerEvent(plyr.media, "timeupdate");
// Set seeking flag
plyr.media.seeking = true;
// Trigger seeking
_triggerEvent(plyr.media, "seeking");
}
// Logging
_log("Seeking to " + plyr.media.currentTime + " seconds");
// Special handling for 'manual' captions
_seekManualCaptions(targetTime);
}
// Get the duration (or custom if set)
function _getDuration() {
// It should be a number, but parse it just incase
var duration = parseInt(config.duration),
// True duration
mediaDuration = 0;
// Only if duration available
if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
mediaDuration = plyr.media.duration;
}
// If custom duration is funky, use regular duration
return isNaN(duration) ? mediaDuration : duration;
}
// Check playing state
function _checkPlaying() {
_toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
_toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
_toggleControls(plyr.media.paused);
}
// Save scroll position
function _saveScrollPosition() {
scroll = {
x: window.pageXOffset || 0,
y: window.pageYOffset || 0
};
}
// Restore scroll position
function _restoreScrollPosition() {
window.scrollTo(scroll.x, scroll.y);
}
// Toggle fullscreen
function _toggleFullscreen(event) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
if (nativeSupport) {
// If it's a fullscreen change event, update the UI
if (event && event.type === fullscreen.fullScreenEventName) {
plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
} else {
// Else it's a user request to enter or exit
if (!fullscreen.isFullScreen(plyr.container)) {
// Save scroll position
_saveScrollPosition();
// Request full screen
fullscreen.requestFullScreen(plyr.container);
} else {
// Bail from fullscreen
fullscreen.cancelFullScreen();
}
// Check if we're actually full screen (it could fail)
plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
return;
}
} else {
// Otherwise, it's a simple toggle
plyr.isFullscreen = !plyr.isFullscreen;
// Bind/unbind escape key
document.body.style.overflow = plyr.isFullscreen ? "hidden" : "";
}
// Set class hook
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
// Trap focus
_focusTrap(plyr.isFullscreen);
// Set button state
if (plyr.buttons && plyr.buttons.fullscreen) {
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
}
// Trigger an event
_triggerEvent(plyr.container, plyr.isFullscreen ? "enterfullscreen" : "exitfullscreen", true);
// Restore scroll position
if (!plyr.isFullscreen && nativeSupport) {
_restoreScrollPosition();
}
}
// Mute
function _toggleMute(muted) {
// If the method is called without parameter, toggle based on current value
if (!_is.boolean(muted)) {
muted = !plyr.media.muted;
}
// Set button state
_toggleState(plyr.buttons.mute, muted);
// Set mute on the player
plyr.media.muted = muted;
// If volume is 0 after unmuting, set to default
if (plyr.media.volume === 0) {
_setVolume(config.volume);
}
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch (plyr.type) {
case "youtube":
plyr.embed[plyr.media.muted ? "mute" : "unMute"]();
break;
case "vimeo":
case "soundcloud":
plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
break;
}
// Trigger volumechange for embeds
_triggerEvent(plyr.media, "volumechange");
}
}
// Set volume
function _setVolume(volume) {
var max = config.volumeMax,
min = config.volumeMin;
// Load volume from storage if no value specified
if (_is.undefined(volume)) {
volume = plyr.storage.volume;
}
// Use config if all else fails
if (volume === null || isNaN(volume)) {
volume = config.volume;
}
// Maximum is volumeMax
if (volume > max) {
volume = max;
}
// Minimum is volumeMin
if (volume < min) {
volume = min;
}
// Set the player volume
plyr.media.volume = parseFloat(volume / max);
// Set the display
if (plyr.volume.display) {
plyr.volume.display.value = volume;
}
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
switch (plyr.type) {
case "youtube":
plyr.embed.setVolume(plyr.media.volume * 100);
break;
case "vimeo":
case "soundcloud":
plyr.embed.setVolume(plyr.media.volume);
break;
}
// Trigger volumechange for embeds
_triggerEvent(plyr.media, "volumechange");
}
// Toggle muted state
if (volume === 0) {
plyr.media.muted = true;
} else if (plyr.media.muted && volume > 0) {
_toggleMute();
}
}
// Increase volume
function _increaseVolume(step) {
var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
if (!_is.number(step)) {
step = config.volumeStep;
}
_setVolume(volume + step);
}
// Decrease volume
function _decreaseVolume(step) {
var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
if (!_is.number(step)) {
step = config.volumeStep;
}
_setVolume(volume - step);
}
// Update volume UI and storage
function _updateVolume() {
// Get the current volume
var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
// Update the <input type="range"> if present
if (plyr.supported.full) {
if (plyr.volume.input) {
plyr.volume.input.value = volume;
}
if (plyr.volume.display) {
plyr.volume.display.value = volume;
}
}
// Update the volume in storage
_updateStorage({ volume: volume });
// Toggle class if muted
_toggleClass(plyr.container, config.classes.muted, volume === 0);
// Update checkbox for mute state
if (plyr.supported.full && plyr.buttons.mute) {
_toggleState(plyr.buttons.mute, volume === 0);
}
}
// 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) {
var loading = event.type === "waiting";
// Clear timer
clearTimeout(timers.loading);
// Timer to prevent flicker when seeking
timers.loading = setTimeout(function() {
// Toggle container class hook
_toggleClass(plyr.container, config.classes.loading, loading);
// Show controls if loading, hide if done
_toggleControls(loading);
}, loading ? 250 : 0);
}
// Update <progress> elements
function _updateProgress(event) {
if (!plyr.supported.full) {
return;
}
var progress = plyr.progress.played,
value = 0,
duration = _getDuration();
if (event) {
switch (event.type) {
// Video playing
case "timeupdate":
case "seeking":
if (plyr.controls.pressed) {
return;
}
value = _getPercentage(plyr.media.currentTime, duration);
// Set seek range value only if it's a 'natural' time event
if (event.type === "timeupdate" && plyr.buttons.seek) {
plyr.buttons.seek.value = value;
}
break;
// Check buffer status
case "playing":
case "progress":
progress = plyr.progress.buffer;
value = (function() {
var buffered = plyr.media.buffered;
if (buffered && buffered.length) {
// HTML5
return _getPercentage(buffered.end(0), duration);
} else if (_is.number(buffered)) {
// YouTube returns between 0 and 1
return buffered * 100;
}
return 0;
})();
break;
}
}
// Set values
_setProgress(progress, value);
}
// Set <progress> value
function _setProgress(progress, value) {
if (!plyr.supported.full) {
return;
}
// Default to 0
if (_is.undefined(value)) {
value = 0;
}
// Default to buffer or bail
if (_is.undefined(progress)) {
if (plyr.progress && plyr.progress.buffer) {
progress = plyr.progress.buffer;
} else {
return;
}
}
// One progress element passed
if (_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 the displayed time
function _updateTimeDisplay(time, element) {
// Bail if there's no duration display
if (!element) {
return;
}
// Fallback to 0
if (isNaN(time)) {
time = 0;
}
plyr.secs = parseInt(time % 60);
plyr.mins = parseInt((time / 60) % 60);
plyr.hours = parseInt((time / 60 / 60) % 60);
// Do we need to display hours?
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);
// Render
element.innerHTML = (displayHours ? plyr.hours + ":" : "") + plyr.mins + ":" + plyr.secs;
}
// Show the duration on metadataloaded
function _displayDuration() {
if (!plyr.supported.full) {
return;
}
// Determine duration
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 there's a duration element, update content
if (plyr.duration) {
_updateTimeDisplay(duration, plyr.duration);
}
// Update the tooltip (if visible)
_updateSeekTooltip();
}
// Handle time change event
function _timeUpdate(event) {
// Duration
_updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
// Ignore updates while seeking
if (event && event.type === "timeupdate" && plyr.media.seeking) {
return;
}
// Playing progress
_updateProgress(event);
}
// Update seek range and progress
function _updateSeekDisplay(time) {
// Default to 0
if (!_is.number(time)) {
time = 0;
}
var duration = _getDuration(),
value = _getPercentage(time, duration);
// Update progress
if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = value;
}
// Update seek range input
if (plyr.buttons && plyr.buttons.seek) {
plyr.buttons.seek.value = value;
}
}
// Update hover tooltip for seeking
function _updateSeekTooltip(event) {
var duration = _getDuration();
// Bail if setting not true
if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
return;
}
// Calculate percentage
var clientRect = plyr.progress.container.getBoundingClientRect(),
percent = 0,
visible = config.classes.tooltip + "--visible";
// Determine percentage, if already visible
if (!event) {
if (_hasClass(plyr.progress.tooltip, visible)) {
percent = plyr.progress.tooltip.style.left.replace("%", "");
} else {
return;
}
} else {
percent = 100 / clientRect.width * (event.pageX - clientRect.left);
}
// Set bounds
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
// Display the time a click would seek to
_updateTimeDisplay(duration / 100 * percent, plyr.progress.tooltip);
// Set position
plyr.progress.tooltip.style.left = percent + "%";
// Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds
if (event && _inArray(["mouseenter", "mouseleave"], event.type)) {
_toggleClass(plyr.progress.tooltip, visible, event.type === "mouseenter");
}
}
// Show the player controls in fullscreen mode
function _toggleControls(toggle) {
// Don't hide if config says not to, it's audio, or not ready or loading
if (!config.hideControls || plyr.type === "audio") {
return;
}
var delay = 0,
isEnterFullscreen = false,
show = toggle,
loading = _hasClass(plyr.container, config.classes.loading);
// Default to false if no boolean
if (!_is.boolean(toggle)) {
if (toggle && toggle.type) {
// Is the enter fullscreen event
isEnterFullscreen = toggle.type === "enterfullscreen";
// Whether to show controls
show = _inArray(["mousemove", "touchstart", "mouseenter", "focus"], toggle.type);
// Delay hiding on move events
if (_inArray(["mousemove", "touchmove"], toggle.type)) {
delay = 2000;
}
// Delay a little more for keyboard users
if (toggle.type === "focus") {
delay = 3000;
}
} else {
show = _hasClass(plyr.container, config.classes.hideControls);
}
}
// Clear timer every movement
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);
// Always show controls when paused or if touch
if (plyr.media.paused || loading) {
return;
}
// Delay for hiding on touch
if (plyr.browser.isTouch) {
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) {
timers.hover = window.setTimeout(function() {
// If the mouse is over the controls (and not entering fullscreen), bail
if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
return;
}
_toggleClass(plyr.container, config.classes.hideControls, true);
}, delay);
}
}
// Add common function to retrieve media source
function _source(source) {
// If not null or undefined, parse it
if (!_is.undefined(source)) {
_updateSource(source);
return;
}
// Return the current source
var url;
switch (plyr.type) {
case "youtube":
url = plyr.embed.getVideoUrl();
break;
case "vimeo":
plyr.embed.getVideoUrl.then(function(value) {
url = value;
});
break;
case "soundcloud":
plyr.embed.getCurrentSound(function(object) {
url = object.permalink_url;
});
break;
default:
url = plyr.media.currentSrc;
break;
}
return url || "";
}
// 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");
return;
}
// Remove ready class hook
_toggleClass(plyr.container, config.classes.ready, false);
// Pause playback
_pause();
// Update seek range and progress
_updateSeekDisplay();
// Reset buffer progress
_setProgress();
// Cancel current network requests
_cancelRequests();
// Setup new source
function setup() {
// Remove embed object
plyr.embed = null;
// Remove the old media
_remove(plyr.media);
// Remove video container
if (plyr.type === "video" && plyr.videoContainer) {
_remove(plyr.videoContainer);
}
// Reset class name
if (plyr.container) {
plyr.container.removeAttribute("class");
}
// Set the type
if ("type" in source) {
plyr.type = source.type;
// Get child type for video (it might be an embed)
if (plyr.type === "video") {
var firstSource = source.sources[0];
if ("type" in firstSource && _inArray(config.types.embed, firstSource.type)) {
plyr.type = firstSource.type;
}
}
}
// Check for support
plyr.supported = supported(plyr.type);
// Create new markup
switch (plyr.type) {
case "video":
plyr.media = document.createElement("video");
break;
case "audio":
plyr.media = document.createElement("audio");
break;
case "youtube":
case "vimeo":
case "soundcloud":
plyr.media = document.createElement("div");
plyr.embedId = source.sources[0].src;
break;
}
// Inject the new element
_prependChild(plyr.container, plyr.media);
// Autoplay the new source?
if (_is.boolean(source.autoplay)) {
config.autoplay = source.autoplay;
}
// Set attributes for audio and video
if (_inArray(config.types.html5, plyr.type)) {
if (config.crossorigin) {
plyr.media.setAttribute("crossorigin", "");
}
if (config.autoplay) {
plyr.media.setAttribute("autoplay", "");
}
if ("poster" in source) {
plyr.media.setAttribute("poster", source.poster);
}
if (config.loop) {
plyr.media.setAttribute("loop", "");
}
}
// Restore class hooks
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
_toggleStyleHook();
// Set new sources for html5
if (_inArray(config.types.html5, plyr.type)) {
_insertChildElements("source", source.sources);
}
// Set up from scratch
_setupMedia();
// HTML5 stuff
if (_inArray(config.types.html5, plyr.type)) {
// Setup captions
if ("tracks" in source) {
_insertChildElements("track", source.tracks);
}
// Load HTML5 sources
plyr.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)
) {
// Setup interface
_setupInterface();
// Call ready
_ready();
}
// Set aria title and iframe title
config.title = source.title;
_setTitle();
}
// Destroy instance adn wait for callback
// Vimeo throws a wobbly if you don't wait
_destroy(setup, false);
}
// Update poster
function _updatePoster(source) {
if (plyr.type === "video") {
plyr.media.setAttribute("poster", source);
}
}
function onBodyClick() {
_toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
}
// Listen for control events
function _controlListeners() {
// IE doesn't support input event, so we fallback to change
var inputEvent = plyr.browser.isIE ? "change" : "input";
// Click play/pause helper
function togglePlay() {
var play = _togglePlay();
// 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];
}
// Setup focus and tab focus
if (target) {
var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
setTimeout(function() {
target.focus();
if (hadTabFocus) {
_toggleClass(trigger, config.classes.tabFocus, false);
_toggleClass(target, config.classes.tabFocus, true);
}
}, 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;
}
// Detect tab focus
function checkTabFocus(focused) {
for (var button in plyr.buttons) {
var element = plyr.buttons[button];
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);
}
}
}
// Keyboard shortcuts
if (config.keyboardShorcuts.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
// 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))
) {
handleKey(event);
}
});
}
// Handle presses on focused
_on(plyr.container, "keydown keyup", handleKey);
}
function handleKey(event) {
var code = getKeyCode(event),
pressed = event.type === "keydown",
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)) {
return;
}
// Seek by the number keys
function seekByKey() {
// Get current duration
var duration = plyr.media.duration;
// Bail if we have no duration set
if (!_is.number(duration)) {
return;
}
// Divide the max duration into 10th's and times by the number value
_seek(duration / 10 * (code - 48));
}
// Handle the key on keydown
// Reset on keyup
if (pressed) {
// Which keycodes should we prevent default
var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
// If the code is found prevent default (e.g. prevent scrolling for arrows)
if (_inArray(preventDefault, code)) {
event.preventDefault();
event.stopPropagation();
}
switch (code) {
// 0-9
case 48:
case 49:
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57:
if (!held) {
seekByKey();
}
break;
// Space and K key
case 32:
case 75:
if (!held) {
_togglePlay();
}
break;
// Arrow up
case 38:
_increaseVolume();
break;
// Arrow down
case 40:
_decreaseVolume();
break;
// M key
case 77:
if (!held) {
_toggleMute();
}
break;
// Arrow forward
case 39:
_forward();
break;
// Arrow back
case 37:
_rewind();
break;
// F key
case 70:
_toggleFullscreen();
break;
// C key
case 67:
if (!held) {
_toggleCaptions();
}
break;
}
// 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();
}
// Store last code for next cycle
last = code;
} else {
last = null;
}
}
// Focus/tab management
_on(window, "keyup", function(event) {
var code = getKeyCode(event),
focused = getFocusElement();
if (code === 9) {
checkTabFocus(focused);
}
});
_on(document.body, "click", onBodyClick);
for (var button in plyr.buttons) {
var element = plyr.buttons[button];
_on(element, "blur", function() {
_toggleClass(element, "tab-focus", false);
});
}
// Play
_proxyListener(plyr.buttons.play, "click", config.listeners.play, togglePlay);
// Pause
_proxyListener(plyr.buttons.pause, "click", config.listeners.pause, togglePlay);
// Restart
_proxyListener(plyr.buttons.restart, "click", config.listeners.restart, _seek);
// Rewind
_proxyListener(plyr.buttons.rewind, "click", config.listeners.rewind, _rewind);
// Fast forward
_proxyListener(plyr.buttons.forward, "click", config.listeners.forward, _forward);
// Seek
_proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
// Set volume
_proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
_setVolume(plyr.volume.input.value);
});
// Mute
_proxyListener(plyr.buttons.mute, "click", config.listeners.mute, _toggleMute);
// Fullscreen
_proxyListener(plyr.buttons.fullscreen, "click", config.listeners.fullscreen, _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
if (fullscreen.supportsFullScreen) {
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
}
// Captions
_proxyListener(plyr.buttons.captions, "click", config.listeners.captions, _toggleCaptions);
// Seek tooltip
_on(plyr.progress.container, "mouseenter mouseleave mousemove", _updateSeekTooltip);
// Toggle controls visibility based on mouse movement
if (config.hideControls) {
// Toggle controls on mouse events and entering fullscreen
_on(
plyr.container,
"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",
_toggleControls
);
// 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";
});
// Watch for cursor over controls so they don't hide when trying to interact
_on(plyr.controls, "mousedown mouseup touchstart touchend touchcancel", function(event) {
plyr.controls.pressed = _inArray(["mousedown", "touchstart"], event.type);
});
// Focus in/out on controls
_on(plyr.controls, "focus blur", _toggleControls, true);
}
// Adjust volume on scroll
_on(plyr.volume.input, "wheel", function(event) {
event.preventDefault();
// 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;
// Scroll down (or up on natural) to decrease
if (event.deltaY < 0 || event.deltaX > 0) {
if (inverted) {
_decreaseVolume(step);
} else {
_increaseVolume(step);
}
}
// Scroll up (or down on natural) to increase
if (event.deltaY > 0 || event.deltaX < 0) {
if (inverted) {
_increaseVolume(step);
} else {
_decreaseVolume(step);
}
}
});
}
// Listen for media events
function _mediaListeners() {
// Time change on media
_on(plyr.media, "timeupdate seeking", _timeUpdate);
// Update manual captions
_on(plyr.media, "timeupdate", _seekManualCaptions);
// Display duration
_on(plyr.media, "durationchange loadedmetadata", _displayDuration);
// Handle the media finishing
_on(plyr.media, "ended", function() {
// Show poster on end
if (plyr.type === "video" && config.showPosterOnEnd) {
// Clear
if (plyr.type === "video") {
_setCaption();
}
// Restart
_seek();
// Re-load media
plyr.media.load();
}
});
// Check for buffer progress
_on(plyr.media, "progress playing", _updateProgress);
// Handle native mute
_on(plyr.media, "volumechange", _updateVolume);
// Handle native play/pause
_on(plyr.media, "play pause ended", _checkPlaying);
// Loading
_on(plyr.media, "waiting canplay seeked", _checkLoading);
// Click video
if (config.clickToPlay && plyr.type !== "audio") {
// Re-fetch the wrapper
var wrapper = _getElement("." + config.classes.videoWrapper);
// Bail if there's no wrapper (this should never happen)
if (!wrapper) {
return;
}
// Set cursor
wrapper.style.cursor = "pointer";
// On click play, pause ore restart
_on(wrapper, "click", function() {
// Touch devices will just show controls (if we're hiding controls)
if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
return;
}
if (plyr.media.paused) {
_play();
} else if (plyr.media.ended) {
_seek();
_play();
} else {
_pause();
}
});
}
// Disable right click
if (config.disableContextMenu) {
_on(plyr.media, "contextmenu", function(event) {
event.preventDefault();
});
}
// Proxy events to container
// Bubble up key events for Edge
_on(plyr.media, config.events.concat(["keyup", "keydown"]).join(" "), function(event) {
_triggerEvent(plyr.container, event.type, true);
});
}
// Cancel current network requests
// See https://github.com/sampotts/plyr/issues/174
function _cancelRequests() {
if (!_inArray(config.types.html5, plyr.type)) {
return;
}
// Remove child sources
var sources = plyr.media.querySelectorAll("source");
for (var i = 0; i < sources.length; i++) {
_remove(sources[i]);
}
// 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);
// Load the new empty source
// This will cancel existing requests
// See https://github.com/sampotts/plyr/issues/174
plyr.media.load();
// Debugging
_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;
}
// Type specific stuff
switch (plyr.type) {
case "youtube":
// Clear timers
window.clearInterval(timers.buffering);
window.clearInterval(timers.playing);
// Destroy YouTube API
plyr.embed.destroy();
// Clean up
cleanUp();
break;
case "vimeo":
// Destroy Vimeo API
// then clean up (wait, to prevent postmessage errors)
plyr.embed.unload().then(cleanUp);
// Vimeo does not always return
timers.cleanUp = window.setTimeout(cleanUp, 200);
break;
case "video":
case "audio":
// Restore native video controls
_toggleNativeControls(true);
// Clean up
cleanUp();
break;
}
function cleanUp() {
clearTimeout(timers.cleanUp);
// Default to restore original element
if (!_is.boolean(restore)) {
restore = true;
}
// Callback
if (_is.function(callback)) {
callback.call(original);
}
// Bail if we don't need to restore the original element
if (!restore) {
return;
}
// Remove init flag
plyr.init = false;
// Replace the container with the original element provided
plyr.container.parentNode.replaceChild(original, plyr.container);
// Free container in order for GC to remove it and prevent memory leaks due to added events
plyr.container = null;
// Allow overflow (set on fullscreen)
document.body.style.overflow = "";
//remove events
_off(document.body, 'click', onBodyClick);
// Event
_triggerEvent(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() {
// Don't setup interface if no support
if (!plyr.supported.full) {
_warn("Basic support only", plyr.type);
// Remove controls
_remove(_getElement(config.selectors.controls.wrapper));
// Remove large play
_remove(_getElement(config.selectors.buttons.play));
// Restore native controls
_toggleNativeControls(true);
// Bail
return;
}
// Inject custom controls if not present
var controlsMissing = !_getElements(config.selectors.controls.wrapper).length;
if (controlsMissing) {
// Inject custom controls
_injectControls();
}
// Find the elements
if (!_findElements()) {
return;
}
// If the controls are injected, re-bind listeners for controls
if (controlsMissing) {
_controlListeners();
}
// Media element listeners
_mediaListeners();
// Remove native controls
_toggleNativeControls();
// Setup fullscreen
_setupFullscreen();
// Captions
_setupCaptions();
// Set volume
_setVolume();
_updateVolume();
// Reset time display
_timeUpdate();
// Update the UI
_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);
// Set class hook on media element
_toggleClass(plyr.media, defaults.classes.setup, true);
// Set container class for ready
_toggleClass(plyr.container, config.classes.ready, true);
// Store a refernce to instance
plyr.media.plyr = api;
// Autoplay
if (config.autoplay) {
_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;
}
break;
case "soundcloud":
basic = true;
full = !isOldIE && !isIphone;
break;
default:
basic = audioSupport && videoSupport;
full = basic && !isOldIE;
}
return {
basic: basic,
full: full
};
}
// Setup function
function setup(targets, options) {
// Get the players
var players = [],
instances = [],
selector = [defaults.selectors.html5, defaults.selectors.embed].join(",");
// 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;
}
// Use default selector
targets = document.querySelectorAll(selector);
}
// Convert NodeList to array
if (_is.nodeList(targets)) {
targets = Array.prototype.slice.call(targets);
}
// Bail if disabled or no basic support
// You may want to disable certain UAs etc
if (!supported().basic || !targets.length) {
return false;
}
// 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
});
}
}
// 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);
// 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);
}
}
// Create a player instance for each element
players.forEach(function(player) {
var element = player.target,
media = player.media,
match = false;
// The target element can also be the media element
if (media === element) {
match = true;
}
// Setup a player instance and add to the element
// Create instance-specific config
var data = {};
// Try parsing data attribute config
try {
data = JSON.parse(element.getAttribute("data-plyr"));
} catch (e) {}
var config = _extend({}, defaults, options, data);
// Bail if not enabled
if (!config.enabled) {
return null;
}
// Create new instance
var instance = new Plyr(media, config);
// Go to next if setup failed
if (!_is.object(instance)) {
return;
}
// Listen for events if debugging
if (config.debug) {
var events = config.events.concat([
"setup",
"statechange",
"enterfullscreen",
"exitfullscreen",
"captionsenabled",
"captionsdisabled"
]);
_on(instance.getContainer(), events.join(" "), function(event) {
console.log([config.logPrefix, "event:", event.type].join(" "), event.detail.plyr);
});
}
// Callback
_event(instance.getContainer(), "setup", true, {
plyr: instance
});
// Add to return array even if it's already setup
instances.push(instance);
});
return instances;
}
// 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;
}
// 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);
}
});
return instances;
}
return [];
}
return {
setup: setup,
supported: supported,
loadSprite: loadSprite,
get: get
};
});
// 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;
})();
Reference in New Issue View Git Blame Copy Permalink