',
''];
// Restart button
if (_inArray(config.controls, 'restart')) {
html.push(
''
);
}
// Rewind button
if (_inArray(config.controls, 'rewind')) {
html.push(
''
);
}
// Play/pause button
if (_inArray(config.controls, 'play')) {
html.push(
'',
''
);
}
// Fast forward button
if (_inArray(config.controls, 'fast-forward')) {
html.push(
''
);
}
// Media current time display
if (_inArray(config.controls, 'current-time')) {
html.push(
'',
'' + config.i18n.currentTime + '',
'00:00',
''
);
}
// Media duration display
if (_inArray(config.controls, 'duration')) {
html.push(
'',
'' + config.i18n.duration + '',
'00:00',
''
);
}
// Close left controls
html.push(
'',
''
);
// Toggle mute button
if (_inArray(config.controls, 'mute')) {
html.push(
''
);
}
// Volume range control
if (_inArray(config.controls, 'volume')) {
html.push(
'',
''
);
}
// Toggle captions button
if (_inArray(config.controls, 'captions')) {
html.push(
''
);
}
// Toggle fullscreen button
if (_inArray(config.controls, 'fullscreen')) {
html.push(
''
);
}
// Close everything
html.push(
'',
'
'
);
return html.join('');
}
// Debugging
function _log(text, warn) {
if (config.debug && window.console) {
console[(warn ? 'warn' : 'log')](text);
}
}
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to mixed support, UA sniffing is required
function _browserSniff() {
var nAgt = navigator.userAgent,
name = 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)) {
name = 'IE';
fullVersion = '11;';
}
// MSIE
else if ((verOffset=nAgt.indexOf('MSIE')) !== -1) {
name = 'IE';
fullVersion = nAgt.substring(verOffset + 5);
}
// Chrome
else if ((verOffset=nAgt.indexOf('Chrome')) !== -1) {
name = 'Chrome';
fullVersion = nAgt.substring(verOffset + 7);
}
// Safari
else if ((verOffset=nAgt.indexOf('Safari')) !== -1) {
name = '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) {
name = '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('/'))) {
name = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.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,
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform),
touch: '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;
// Only check video types for video players
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/, ''));
}
}
// Only check audio types for audio players
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);
}
}
}
// 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, (typeof attributes[key] === 'boolean' && attributes[key]) ? '' : attributes[key]);
}
}
// Insert a HTML element
function _insertElement(type, parent, attributes) {
// Create a new
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;
}
// Bind event
function _on(element, events, callback) {
if (element) {
_toggleListener(element, events, callback, true);
}
}
// Unbind event
function _off(element, events, callback) {
if (element) {
_toggleListener(element, events, callback, false);
}
}
// Bind along with custom handler
function _proxyListener(element, eventName, userListener, defaultListener) {
_on(element, eventName, function(event) {
if(userListener) {
userListener.apply(element, [event]);
}
defaultListener.apply(element, [event]);
});
}
// Toggle event listener
function _toggleListener(element, events, callback, toggle) {
var eventList = events.split(' ');
// 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, false);
}
}
// Trigger event
function _triggerEvent(element, eventName, properties) {
// Bail if no element
if(!element || !eventName) {
return;
}
// create and dispatch the event
var event = new CustomEvent(eventName, properties);
// Dispatch the event
element.dispatchEvent(event);
}
// Toggle aria-pressed state on a toggle button
function _toggleState(target, state) {
// Bail if no target
if(!target) {
return;
}
// Get state
state = (typeof state === 'boolean' ? 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 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;
}
}
}
// 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 (typeof element === 'undefined') {
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 (typeof element === 'undefined') {
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
function _storage() {
var storage = {
supported: (function() {
if(!('localStorage' in window)) {
return false;
}
// Try to use it (it might be disabled, e.g. user is in private/porn mode)
// see: https://github.com/Selz/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;
})()
};
return storage;
}
// Player instance
function Plyr(container) {
var plyr = this;
plyr.container = container;
// Captions functions
// Seek the manual caption time and update UI
function _seekManualCaptions(time) {
// 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 = typeof time === 'number' ? 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];
// Trim caption text
var content = plyr.currentCaption.trim();
// Render the caption (only if changed)
if (plyr.captionsContainer.innerHTML != content) {
// Empty caption
// Otherwise NVDA reads it twice
plyr.captionsContainer.innerHTML = '';
// Set new caption text
plyr.captionsContainer.innerHTML = content;
}
}
else {
plyr.captionsContainer.innerHTML = '';
}
// Force redraw
// var redraw = plyr.captionsContainer.offsetHeight;
}
// 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);
if (config.captions.defaultActive) {
_toggleClass(plyr.container, config.classes.captions.active, true);
_toggleState(plyr.buttons.captions, true);
}
}
// 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 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) {
// Move focus to first element that can be tabbed if Shift isn't used
if (event.target === last && !event.shiftKey) {
event.preventDefault();
first.focus();
}
// Move focus to last element that can be tabbed if Shift is used
else if (event.target === first && event.shiftKey) {
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 (typeof attributes === 'string') {
_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() {
// 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 container;
// Inject to custom location
if (config.selectors.controls.container !== null) {
container = config.selectors.controls.container;
if(typeof selector === 'string') {
container = document.querySelector(container);
}
}
// Inject into the container by default
if (!(container instanceof HTMLElement)) {
container = plyr.container
}
// Inject controls HTML
container.insertAdjacentHTML('beforeend', html);
// Setup tooltips
if (config.tooltips) {
var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
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 = _getElement(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.volume = _getElement(config.selectors.buttons.volume);
plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
plyr.checkboxes = _getElements('[type="checkbox"]');
// 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 = {};
plyr.progress.played.bar = _getElement(config.selectors.progress.played);
plyr.progress.played.text = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0];
// Volume
plyr.volume = _getElement(config.selectors.buttons.volume);
// Timing
plyr.duration = _getElement(config.selectors.duration);
plyr.currentTime = _getElement(config.selectors.currentTime);
plyr.seekTime = _getElements(config.selectors.seekTime);
return true;
}
catch(e) {
_log('It looks like there is a problem with your controls html', true);
// Restore native video controls
_toggleControls(true);
return false;
}
}
// Toggle style hook
function _toggleStyleHook() {
_toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
}
// Toggle native controls
function _toggleControls(toggle) {
if(toggle) {
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 (typeof(config.title) !== 'undefined' && config.title.length) {
label += ', ' + config.title;
}
// If there's a play button, set label
if (plyr.supported.full && plyr.buttons.play) {
plyr.buttons.play.setAttribute('aria-label', label);
}
// Set iframe title
// https://github.com/Selz/plyr/issues/124
if (iframe instanceof HTMLElement) {
iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
}
}
// Setup media
function _setupMedia() {
// If there's no media, bail
if (!plyr.media) {
_log('No audio or video element found', true);
return false;
}
if (plyr.supported.full) {
// Add type class
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), 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.ios);
// Add touch class
_toggleClass(plyr.container, config.classes.isTouch, plyr.browser.touch);
// 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();
// Clean up
plyr.embedId = null;
}
else {
// Autoplay
if (config.autoplay) {
_play();
}
}
}
// Setup YouTube/Vimeo
function _setupEmbed() {
var container = document.createElement('div'),
videoId = plyr.embedId,
id = plyr.type + '-' + Math.floor(Math.random() * (10000));
// 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);
// YouTube
if (plyr.type === 'youtube') {
// Create the YouTube container
plyr.media.appendChild(container);
// Set ID
container.setAttribute('id', id);
// Setup API
if (typeof YT === 'object') {
_youTubeReady(videoId, 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(videoId, container) });
// Set callback to process queue
window.onYouTubeIframeAPIReady = function () {
window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
};
}
}
// Vimeo
else if (plyr.type === 'vimeo') {
// Inject the iframe
var iframe = document.createElement('iframe');
// Watch for iframe load
iframe.loaded = false;
_on(iframe, 'load', function() { iframe.loaded = true; });
_setAttributes(iframe, {
'src': 'https://player.vimeo.com/video/' + videoId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0',
'id': id,
'webkitallowfullscreen': '',
'mozallowfullscreen': '',
'allowfullscreen': '',
'frameborder': 0
});
// If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo
if(plyr.supported.full) {
container.appendChild(iframe);
plyr.media.appendChild(container);
}
else {
plyr.media.appendChild(iframe);
}
// Load the API
if (!('$f' in window)) {
_injectScript(config.urls.vimeo.api);
}
// Wait for fragaloop load
var timer = window.setInterval(function() {
if ('$f' in window && iframe.loaded) {
window.clearInterval(timer);
_vimeoReady.call(iframe);
}
}, 50);
}
}
// When embeds are ready
function _embedReady() {
// Setup the UI
_setupInterface();
// Set title
_setTitle(_getElement('iframe'));
}
// Handle YouTube API ready
function _youTubeReady(videoId, container) {
// Setup timers object
// We have to poll YouTube for updates
if (!('timer' in plyr)) {
plyr.timer = {};
}
// Setup instance
// https://developers.google.com/youtube/iframe_api_reference
plyr.embed = new YT.Player(container.id, {
videoId: videoId,
playerVars: {
autoplay: 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: {
'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 = instance.getCurrentTime();
plyr.media.muted = instance.isMuted();
// Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate');
// Reset timer
window.clearInterval(plyr.timer.buffering);
// Setup buffering
plyr.timer.buffering = window.setInterval(function() {
// Get loaded % from YouTube
plyr.media.buffered = instance.getVideoLoadedFraction();
// Trigger progress
_triggerEvent(plyr.media, 'progress');
// Bail if we're at 100%
if (plyr.media.buffered === 1) {
window.clearInterval(plyr.timer.buffering);
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
}, 200);
// Update UI
_embedReady();
// Display duration if available
_displayDuration();
},
'onStateChange': function(event) {
// Get the instance
var instance = event.target;
// Reset timer
window.clearInterval(plyr.timer.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;
plyr.media.seeking = false;
_triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing');
// Poll to get playback progress
plyr.timer.playing = window.setInterval(function() {
// Set the current time
plyr.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate');
}, 100);
break;
case 2:
plyr.media.paused = true;
_triggerEvent(plyr.media, 'pause');
break;
}
}
}
});
}
// Vimeo ready
function _vimeoReady() {
/* jshint validthis: true */
plyr.embed = $f(this);
// Setup on ready
plyr.embed.addEvent('ready', function() {
// Create a faux HTML5 API using the Vimeo API
plyr.media.play = function() {
plyr.embed.api('play');
plyr.media.paused = false;
};
plyr.media.pause = function() {
plyr.embed.api('pause');
plyr.media.paused = true;
};
plyr.media.stop = function() {
plyr.embed.api('stop');
plyr.media.paused = true;
};
plyr.media.paused = true;
plyr.media.currentTime = 0;
// Update UI
_embedReady();
plyr.embed.api('getCurrentTime', function (value) {
plyr.media.currentTime = value;
// Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate');
});
plyr.embed.api('getDuration', function(value) {
plyr.media.duration = value;
// Display duration if available
_displayDuration();
});
plyr.embed.addEvent('play', function() {
plyr.media.paused = false;
_triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing');
});
plyr.embed.addEvent('pause', function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, 'pause');
});
plyr.embed.addEvent('playProgress', function(data) {
plyr.media.seeking = false;
plyr.media.currentTime = data.seconds;
_triggerEvent(plyr.media, 'timeupdate');
});
plyr.embed.addEvent('loadProgress', function(data) {
plyr.media.buffered = data.percent;
_triggerEvent(plyr.media, 'progress');
if(parseInt(data.percent) === 1) {
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
});
plyr.embed.addEvent('finish', function() {
plyr.media.paused = true;
_triggerEvent(plyr.media, 'ended');
});
// Always seek to 0
//plyr.embed.api('seekTo', 0);
// Prevent autoplay if needed (seek will play)
//if (!config.autoplay) {
// plyr.embed.api('pause');
//}
});
}
// Setup captions
function _setupCaptions() {
if (plyr.type !== 'video') {
return;
}
// Inject the container
if (!_getElement(config.selectors.captions)) {
plyr.videoContainer.insertAdjacentHTML('afterbegin', '
');
}
// Cache selector
plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
// 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);
}
// 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