aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2015-08-27 07:30:14 +1000
committerSam Potts <me@sampotts.me>2015-08-27 07:30:14 +1000
commit0785ca602400d92d6fe596cc7202d57d3b04d220 (patch)
treec20d4b62a3aeb55c4ba5d8284d2f24effe663aa2 /src
parentb39961ec49f6fc62e3807bb3b41e7e3c369eb26a (diff)
downloadplyr-0785ca602400d92d6fe596cc7202d57d3b04d220.tar.lz
plyr-0785ca602400d92d6fe596cc7202d57d3b04d220.tar.xz
plyr-0785ca602400d92d6fe596cc7202d57d3b04d220.zip
Vimeo
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js1243
-rw-r--r--src/less/plyr.less9
2 files changed, 724 insertions, 528 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 8f3f7573..b14f6964 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.2.0
+// plyr.js v1.3.4
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -8,66 +8,66 @@
// ==========================================================================
(function (api) {
- "use strict";
- /*global YT*/
+ 'use strict';
+ /*global YT,$f*/
// Globals
var fullscreen, config;
// Default config
var defaults = {
- enabled: true,
+ enabled: true,
debug: false,
seekTime: 10,
volume: 5,
click: true,
tooltips: false,
displayDuration: true,
- iconPrefix: "icon",
+ iconPrefix: 'icon',
selectors: {
- container: ".player",
- controls: ".player-controls",
- labels: "[data-player] .sr-only, label .sr-only",
+ container: '.player',
+ controls: '.player-controls',
+ labels: '[data-player] .sr-only, label .sr-only',
buttons: {
- seek: "[data-player='seek']",
- play: "[data-player='play']",
- pause: "[data-player='pause']",
- restart: "[data-player='restart']",
- rewind: "[data-player='rewind']",
- forward: "[data-player='fast-forward']",
- mute: "[data-player='mute']",
- volume: "[data-player='volume']",
- captions: "[data-player='captions']",
- fullscreen: "[data-player='fullscreen']"
+ seek: '[data-player="seek"]',
+ play: '[data-player="play"]',
+ pause: '[data-player="pause"]',
+ restart: '[data-player="restart"]',
+ rewind: '[data-player="rewind"]',
+ forward: '[data-player="fast-forward"]',
+ mute: '[data-player="mute"]',
+ volume: '[data-player="volume"]',
+ captions: '[data-player="captions"]',
+ fullscreen: '[data-player="fullscreen"]'
},
progress: {
- container: ".player-progress",
- buffer: ".player-progress-buffer",
- played: ".player-progress-played"
+ container: '.player-progress',
+ buffer: '.player-progress-buffer',
+ played: '.player-progress-played'
},
- captions: ".player-captions",
- currentTime: ".player-current-time",
- duration: ".player-duration"
+ captions: '.player-captions',
+ currentTime: '.player-current-time',
+ duration: '.player-duration'
},
classes: {
- videoWrapper: "player-video-wrapper",
- embedWrapper: "player-video-embed",
- type: "player-{0}",
- stopped: "stopped",
- playing: "playing",
- muted: "muted",
- loading: "loading",
- tooltip: "player-tooltip",
- hidden: "sr-only",
- hover: "hover",
+ videoWrapper: 'player-video-wrapper',
+ embedWrapper: 'player-video-embed',
+ type: 'player-{0}',
+ stopped: 'stopped',
+ playing: 'playing',
+ muted: 'muted',
+ loading: 'loading',
+ tooltip: 'player-tooltip',
+ hidden: 'sr-only',
+ hover: 'player-hover',
captions: {
- enabled: "captions-enabled",
- active: "captions-active"
+ enabled: 'captions-enabled',
+ active: 'captions-active'
},
fullscreen: {
- enabled: "fullscreen-enabled",
- active: "fullscreen-active",
- hideControls: "fullscreen-hide-controls"
+ enabled: 'fullscreen-enabled',
+ active: 'fullscreen-active',
+ hideControls: 'fullscreen-hide-controls'
}
},
captions: {
@@ -80,155 +80,167 @@
},
storage: {
enabled: true,
- key: "plyr_volume"
+ key: 'plyr_volume'
},
- controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"],
- onSetup: function() {}
+ controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', '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'
+ }
};
// Build the default HTML
function _buildControls() {
// Open and add the progress and seek elements
var html = [
- "<div class='player-controls'>",
- "<div class='player-progress'>",
- "<label for='seek{id}' class='sr-only'>Seek</label>",
- "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
- "<progress class='player-progress-played' max='100' value='0'>",
- "<span>0</span>% played",
- "</progress>",
- "<progress class='player-progress-buffer' max='100' value='0'>",
- "<span>0</span>% buffered",
- "</progress>",
- "</div>",
- "<span class='player-controls-left'>"];
+ '<div class="player-controls">',
+ '<div class="player-progress">',
+ '<label for="seek{id}" class="sr-only">Seek</label>',
+ '<input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">',
+ '<progress class="player-progress-played" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.played,
+ '</progress>',
+ '<progress class="player-progress-buffer" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.buffered,
+ '</progress>',
+ '</div>',
+ '<span class="player-controls-left">'];
// Restart button
- if(_inArray(config.controls, "restart")) {
+ if (_inArray(config.controls, 'restart')) {
html.push(
- "<button type='button' data-player='restart'>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>",
- "<span class='sr-only'>Restart</span>",
- "</button>"
+ '<button type="button" data-player="restart">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>',
+ '<span class="sr-only">' + config.i18n.restart + '</span>',
+ '</button>'
);
}
// Rewind button
- if(_inArray(config.controls, "rewind")) {
+ if (_inArray(config.controls, 'rewind')) {
html.push(
- "<button type='button' data-player='rewind'>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>",
- "<span class='sr-only'>Rewind {seektime} secs</span>",
- "</button>"
+ '<button type="button" data-player="rewind">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>',
+ '<span class="sr-only">' + config.i18n.rewind + '</span>',
+ '</button>'
);
}
// Play/pause button
- if(_inArray(config.controls, "play")) {
+ if (_inArray(config.controls, 'play')) {
html.push(
- "<button type='button' data-player='play'>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-play'></use></svg>",
- "<span class='sr-only'>Play</span>",
- "</button>",
- "<button type='button' data-player='pause'>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-pause'></use></svg>",
- "<span class='sr-only'>Pause</span>",
- "</button>"
+ '<button type="button" data-player="play">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+ '<span class="sr-only">' + config.i18n.play + '</span>',
+ '</button>',
+ '<button type="button" data-player="pause">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>',
+ '<span class="sr-only">' + config.i18n.pause + '</span>',
+ '</button>'
);
}
// Fast forward button
- if(_inArray(config.controls, "fast-forward")) {
+ if (_inArray(config.controls, 'fast-forward')) {
html.push(
- "<button type='button' data-player='fast-forward'>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-fast-forward'></use></svg>",
- "<span class='sr-only'>Forward {seektime} secs</span>",
- "</button>"
+ '<button type="button" data-player="fast-forward">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>',
+ '<span class="sr-only">' + config.i18n.forward + '</span>',
+ '</button>'
);
}
// Media current time display
- if(_inArray(config.controls, "current-time")) {
+ if (_inArray(config.controls, 'current-time')) {
html.push(
- "<span class='player-time'>",
- "<span class='sr-only'>Current time</span>",
- "<span class='player-current-time'>00:00</span>",
- "</span>"
+ '<span class="player-time">',
+ '<span class="sr-only">' + config.i18n.currentTime + '</span>',
+ '<span class="player-current-time">00:00</span>',
+ '</span>'
);
}
// Media duration display
- if(_inArray(config.controls, "duration")) {
+ if (_inArray(config.controls, 'duration')) {
html.push(
- "<span class='player-time'>",
- "<span class='sr-only'>Duration</span>",
- "<span class='player-duration'>00:00</span>",
- "</span>"
+ '<span class="player-time">',
+ '<span class="sr-only">' + config.i18n.duration + '</span>',
+ '<span class="player-duration">00:00</span>',
+ '</span>'
);
}
// Close left controls
html.push(
- "</span>",
- "<span class='player-controls-right'>"
+ '</span>',
+ '<span class="player-controls-right">'
);
// Toggle mute button
- if(_inArray(config.controls, "mute")) {
+ if (_inArray(config.controls, 'mute')) {
html.push(
- "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
- "<label id='mute{id}' for='mute{id}'>",
- "<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>",
- "<span class='sr-only'>Toggle Mute</span>",
- "</label>"
+ '<button type="button" data-player="mute">',
+ '<svg class="icon-muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>',
+ '<span class="sr-only">' + config.i18n.toggleMute + '</span>',
+ '</button>'
);
}
// Volume range control
- if(_inArray(config.controls, "volume")) {
+ if (_inArray(config.controls, 'volume')) {
html.push(
- "<label for='volume{id}' class='sr-only'>Volume</label>",
- "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>"
+ '<label for="volume{id}" class="sr-only">' + config.i18n.volume + '</label>',
+ '<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">'
);
}
// Toggle captions button
- if(_inArray(config.controls, "captions")) {
+ if (_inArray(config.controls, 'captions')) {
html.push(
- "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
- "<label for='captions{id}'>",
- "<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>",
- "<span class='sr-only'>Toggle Captions</span>",
- "</label>"
+ '<button type="button" data-player="captions">',
+ '<svg class="icon-captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>',
+ '<span class="sr-only">' + config.i18n.toggleCaptions + '</span>',
+ '</button>'
);
}
// Toggle fullscreen button
- if(_inArray(config.controls, "fullscreen")) {
+ if (_inArray(config.controls, 'fullscreen')) {
html.push(
- "<button type='button' data-player='fullscreen'>",
- "<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>",
- "<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>",
- "<span class='sr-only'>Toggle Fullscreen</span>",
- "</button>"
+ '<button type="button" data-player="fullscreen">',
+ '<svg class="icon-exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>',
+ '<span class="sr-only">' + config.i18n.toggleFullscreen + '</span>',
+ '</button>'
);
}
// Close everything
html.push(
- "</span>",
- "</div>"
+ '</span>',
+ '</div>'
);
- return html.join("");
+ return html.join('');
}
// Debugging
function _log(text, error) {
- if(config.debug && window.console) {
- console[(error ? "error" : "log")](text);
+ if (config.debug && window.console) {
+ console[(error ? 'error' : 'log')](text);
}
}
@@ -237,42 +249,42 @@
function _browserSniff() {
var nAgt = navigator.userAgent,
name = navigator.appName,
- fullVersion = "" + parseFloat(navigator.appVersion),
+ 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;";
+ 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";
+ else if ((verOffset=nAgt.indexOf('MSIE')) !== -1) {
+ name = 'IE';
fullVersion = nAgt.substring(verOffset + 5);
}
// Chrome
- else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) {
- name = "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";
+ else if ((verOffset=nAgt.indexOf('Safari')) !== -1) {
+ name = 'Safari';
fullVersion = nAgt.substring(verOffset + 7);
- if ((verOffset=nAgt.indexOf("Version")) !== -1) {
+ if ((verOffset=nAgt.indexOf('Version')) !== -1) {
fullVersion = nAgt.substring(verOffset + 8);
}
}
// Firefox
- else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) {
- name = "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("/"))) {
+ // 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);
@@ -281,23 +293,23 @@
}
}
// Trim the fullVersion string at semicolon/space if present
- if ((ix = fullVersion.indexOf(";")) !== -1) {
+ if ((ix = fullVersion.indexOf(';')) !== -1) {
fullVersion = fullVersion.substring(0, ix);
}
- if ((ix = fullVersion.indexOf(" ")) !== -1) {
+ if ((ix = fullVersion.indexOf(' ')) !== -1) {
fullVersion = fullVersion.substring(0, ix);
}
// Get major version
- majorVersion = parseInt("" + fullVersion, 10);
+ majorVersion = parseInt('' + fullVersion, 10);
if (isNaN(majorVersion)) {
- fullVersion = "" + parseFloat(navigator.appVersion);
+ fullVersion = '' + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10);
}
// Return data
return {
- name: name,
- version: majorVersion,
+ name: name,
+ version: majorVersion,
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform)
};
}
@@ -305,26 +317,26 @@
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplayer.com/test/h5mt.html
- function _supportMime(player, mimeType) {
+ function _supportMime(player, mimeType) {
var media = player.media;
// Only check video types for video players
- if(player.type == "video") {
+ if (player.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/, ""));
+ 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(player.type == "audio") {
+ else if (player.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/, ""));
+ 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/, ''));
}
}
@@ -334,13 +346,13 @@
// Inject a script
function _injectScript(source) {
- if(document.querySelectorAll("script[src='" + source + "']").length) {
+ if (document.querySelectorAll('script[src="' + source + '"]').length) {
return;
}
- var tag = document.createElement("script");
+ var tag = document.createElement('script');
tag.src = source;
- var firstScriptTag = document.getElementsByTagName("script")[0];
+ var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
@@ -351,7 +363,7 @@
// Replace all
function _replaceAll(string, find, replace) {
- return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
+ return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
}
// Wrap an element
@@ -414,30 +426,30 @@
// Set attributes
function _setAttributes(element, attributes) {
- for(var key in attributes) {
+ for (var key in attributes) {
element.setAttribute(key, attributes[key]);
}
}
// Toggle class on an element
function _toggleClass(element, name, state) {
- if(element){
- if(element.classList) {
- element.classList[state ? "add" : "remove"](name);
+ if (element) {
+ if (element.classList) {
+ element.classList[state ? 'add' : 'remove'](name);
}
else {
- var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", "");
- element.className = className + (state ? " " + name : "");
+ var className = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + name + ' ', '');
+ element.className = className + (state ? ' ' + name : '');
}
}
}
// Toggle event
function _toggleHandler(element, events, callback, toggle) {
- var eventList = events.split(" ");
+ var eventList = events.split(' ');
// If a nodelist is passed, call itself on each node
- if(element instanceof NodeList) {
+ if (element instanceof NodeList) {
for (var x = 0; x < element.length; x++) {
if (element[x] instanceof Node) {
_toggleHandler(element[x], arguments[1], arguments[2], arguments[3]);
@@ -448,20 +460,20 @@
// 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);
+ element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, false);
}
}
// Bind event
function _on(element, events, callback) {
- if(element) {
+ if (element) {
_toggleHandler(element, events, callback, true);
}
}
// Unbind event
function _off(element, events, callback) {
- if(element) {
+ if (element) {
_toggleHandler(element, events, callback, false);
}
}
@@ -469,7 +481,7 @@
// Trigger event
function _triggerEvent(element, event) {
// Create faux event
- var fauxEvent = document.createEvent("MouseEvents");
+ var fauxEvent = document.createEvent('MouseEvents');
// Set the event type
fauxEvent.initEvent(event, true, true);
@@ -478,23 +490,20 @@
element.dispatchEvent(fauxEvent);
}
- // Toggle checkbox
- function _toggleCheckbox(event) {
- // Only listen for return key
- if(event.keyCode && event.keyCode != 13) {
- return true;
- }
-
- // Toggle the checkbox
- event.target.checked = !event.target.checked;
-
- // Trigger change event
- _triggerEvent(event.target, "change");
+ // Toggle aria-pressed state on a toggle button
+ function _toggleState(target, state) {
+ // 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)) {
+ if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
return 0;
}
return ((current / max) * 100).toFixed(2);
@@ -523,68 +532,64 @@
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
- fullScreenEventName: "",
+ fullScreenEventName: '',
element: null,
- prefix: ""
+ prefix: ''
},
- browserPrefixes = "webkit moz o ms khtml".split(" ");
+ browserPrefixes = 'webkit moz o ms khtml'.split(' ');
- // check for native support
- if (typeof document.cancelFullScreen != "undefined") {
+ // Check for native support
+ if (typeof document.cancelFullScreen !== 'undefined') {
fullscreen.supportsFullScreen = true;
}
else {
- // check for fullscreen support by vendor prefix
+ // 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") {
+ 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";
+ else if (typeof document.msExitFullscreen !== 'undefined' && document.msFullscreenEnabled) {
+ fullscreen.prefix = 'ms';
fullscreen.supportsFullScreen = true;
break;
}
}
}
- // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported
- // https://bugs.webkit.org/show_bug.cgi?id=121496
- if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
- fullscreen.supportsFullScreen = false;
- }
-
// Update methods to do something useful
if (fullscreen.supportsFullScreen) {
- // Yet again Microsoft awesomeness,
- // Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes
- fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange");
+ // 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;
+ if (typeof element === 'undefined') {
+ element = document.body;
}
-
switch (this.prefix) {
- case "":
+ case '':
return document.fullscreenElement == element;
- case "moz":
+ case 'moz':
return document.mozFullScreenElement == element;
default:
- return document[this.prefix + "FullscreenElement"] == element;
+ return document[this.prefix + 'FullscreenElement'] == element;
}
};
fullscreen.requestFullScreen = function(element) {
- return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+ 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")]();
+ 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"];
+ fullscreen.element = function() {
+ return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
};
}
@@ -596,13 +601,13 @@
var storage = {
supported: (function() {
try {
- return "localStorage" in window && window.localStorage !== null;
+ return 'localStorage' in window && window.localStorage !== null;
}
catch(e) {
return false;
}
})()
- }
+ };
return storage;
}
@@ -615,7 +620,7 @@
// Seek the manual caption time and update UI
function _seekManualCaptions(time) {
// If it's not video, or we're using textTracks, bail.
- if (player.usingTextTracks || player.type !== "video" || !player.supported.full) {
+ if (player.usingTextTracks || player.type !== 'video' || !player.supported.full) {
return;
}
@@ -625,7 +630,7 @@
// 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 : player.media.currentTime;
+ time = typeof time === 'number' ? time : player.media.currentTime;
while (_timecodeMax(player.captions[player.subcount][0]) < time.toFixed(1)) {
player.subcount++;
@@ -640,19 +645,28 @@
player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) {
player.currentCaption = player.captions[player.subcount][1];
- // Render the caption
- player.captionsContainer.innerHTML = player.currentCaption;
+ // Trim caption text
+ var content = player.currentCaption.trim();
+
+ // Render the caption (only if changed)
+ if (player.captionsContainer.innerHTML != content) {
+ // Empty caption
+ // Otherwise NVDA reads it twice
+ player.captionsContainer.innerHTML = '';
+
+ // Set new caption text
+ player.captionsContainer.innerHTML = content;
+ }
}
else {
- // Clear the caption
- player.captionsContainer.innerHTML = "";
+ player.captionsContainer.innerHTML = '';
}
}
// Display captions container and button (for initialization)
function _showCaptions() {
// If there's no caption toggle, bail
- if(!player.buttons.captions) {
+ if (!player.buttons.captions) {
return;
}
@@ -660,19 +674,19 @@
if (config.captions.defaultActive) {
_toggleClass(player.container, config.classes.captions.active, true);
- player.buttons.captions.checked = true;
+ _toggleState(player.buttons.captions, true);
}
}
// Utilities for caption time codes
function _timecodeMin(tc) {
var tcpair = [];
- tcpair = tc.split(" --> ");
+ tcpair = tc.split(' --> ');
return _subTcSecs(tcpair[0]);
}
function _timecodeMax(tc) {
var tcpair = [];
- tcpair = tc.split(" --> ");
+ tcpair = tc.split(' --> ');
return _subTcSecs(tcpair[1]);
}
function _subTcSecs(tc) {
@@ -683,8 +697,8 @@
var tc1 = [],
tc2 = [],
seconds;
- tc1 = tc.split(",");
- tc2 = tc1[0].split(":");
+ 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;
}
@@ -716,24 +730,24 @@
var html = config.html;
// Insert custom video controls
- _log("Injecting custom controls.");
+ _log('Injecting custom controls.');
// If no controls are specified, create default
- if(!html) {
+ if (!html) {
html = _buildControls();
}
// Replace seek time instances
- html = _replaceAll(html, "{seektime}", config.seekTime);
+ html = _replaceAll(html, '{seektime}', config.seekTime);
// Replace all id references with random numbers
- html = _replaceAll(html, "{id}", Math.floor(Math.random() * (10000)));
+ html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
// Inject into the container
- player.container.insertAdjacentHTML("beforeend", html);
+ player.container.insertAdjacentHTML('beforeend', html);
// Setup tooltips
- if(config.tooltips) {
+ if (config.tooltips) {
var labels = _getElements(config.selectors.labels);
for (var i = labels.length - 1; i >= 0; i--) {
@@ -763,7 +777,7 @@
// Inputs
player.buttons.mute = _getElement(config.selectors.buttons.mute);
player.buttons.captions = _getElement(config.selectors.buttons.captions);
- player.checkboxes = _getElements("[type='checkbox']");
+ player.checkboxes = _getElements('[type="checkbox"]');
// Progress
player.progress = {};
@@ -772,12 +786,12 @@
// Progress - Buffering
player.progress.buffer = {};
player.progress.buffer.bar = _getElement(config.selectors.progress.buffer);
- player.progress.buffer.text = player.progress.buffer.bar && player.progress.buffer.bar.getElementsByTagName("span")[0];
+ player.progress.buffer.text = player.progress.buffer.bar && player.progress.buffer.bar.getElementsByTagName('span')[0];
// Progress - Played
player.progress.played = {};
player.progress.played.bar = _getElement(config.selectors.progress.played);
- player.progress.played.text = player.progress.played.bar && player.progress.played.bar.getElementsByTagName("span")[0];
+ player.progress.played.text = player.progress.played.bar && player.progress.played.bar.getElementsByTagName('span')[0];
// Volume
player.volume = _getElement(config.selectors.buttons.volume);
@@ -790,61 +804,61 @@
return true;
}
catch(e) {
- _log("It looks like there's a problem with your controls html. Bailing.", true);
+ _log('It looks like there\'s a problem with your controls html. Bailing.', true);
// Restore native video controls
- player.media.setAttribute("controls", "");
+ player.media.setAttribute('controls', '');
return false;
}
}
- // Setup aria attributes
- function _setupAria() {
+ // Setup aria attribute for play
+ function _setupPlayAria() {
// If there's no play button, bail
- if(!player.buttons.play) {
+ if (!player.buttons.play) {
return;
}
// Find the current text
- var label = player.buttons.play.innerText || "Play";
+ var label = player.buttons.play.innerText || 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 (typeof(config.title) !== 'undefined' && config.title.length) {
+ label += ', ' + config.title;
}
- player.buttons.play.setAttribute("aria-label", label);
+ player.buttons.play.setAttribute('aria-label', label);
}
// Setup media
function _setupMedia() {
// If there's no media, bail
- if(!player.media) {
- _log("No audio or video element found!", true);
+ if (!player.media) {
+ _log('No audio or video element found!', true);
return false;
}
- if(player.supported.full) {
+ if (player.supported.full) {
// Remove native video controls
- player.media.removeAttribute("controls");
+ player.media.removeAttribute('controls');
// Add type class
- _toggleClass(player.container, config.classes.type.replace("{0}", player.type), true);
+ _toggleClass(player.container, config.classes.type.replace('{0}', player.type), true);
// If there's no autoplay attribute, assume the video is stopped and add state class
- _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
+ _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute('autoplay') === null));
// Add iOS class
- if(player.browser.ios) {
- _toggleClass(player.container, "ios", true);
+ if (player.browser.ios) {
+ _toggleClass(player.container, 'ios', true);
}
// Inject the player wrapper
- if(player.type === "video") {
+ if (player.type === 'video') {
// Create the wrapper div
- var wrapper = document.createElement("div");
- wrapper.setAttribute("class", config.classes.videoWrapper);
+ var wrapper = document.createElement('div');
+ wrapper.setAttribute('class', config.classes.videoWrapper);
// Wrap the video in a container
_wrap(player.media, wrapper);
@@ -852,75 +866,119 @@
// Cache the container
player.videoContainer = wrapper;
}
+ }
- // YouTube
- if(player.type == "youtube") {
- _setupYouTube(player.media.getAttribute("data-video-id"));
- }
+ // YouTube
+ if (player.type == 'youtube') {
+ _setupEmbed(player.media.getAttribute('data-video-id'), 0);
+ }
+
+ // Vimeo
+ if (player.type == 'vimeo') {
+ _setupEmbed(player.media.getAttribute('data-video-id'), 1);
}
// Autoplay
- if(player.media.getAttribute("autoplay") !== null) {
+ if (player.media.getAttribute('autoplay') !== null) {
_play();
}
}
- // Setup YouTube
- function _setupYouTube(id) {
+ // Setup YouTube/Vimeo
+ function _setupEmbed(videoId, type) {
+ var container = document.createElement('div'),
+ providers = ['youtube', 'vimeo'],
+ id = providers[type] + '-' + Math.floor(Math.random() * (10000));
+
// Remove old containers
- var containers = _getElements("[id^='youtube']");
+ var containers = _getElements('[id^="' + providers[type] + '-"]');
for (var i = containers.length - 1; i >= 0; i--) {
_remove(containers[i]);
}
- // Create the YouTube container
- var container = document.createElement("div");
- container.setAttribute("id", "youtube-" + Math.floor(Math.random() * (10000)));
- player.media.appendChild(container);
-
// Add embed class for responsive
_toggleClass(player.media, config.classes.videoWrapper, true);
_toggleClass(player.media, config.classes.embedWrapper, true);
- if(typeof YT === "object") {
- _YTReady(id, container);
+ // YouTube
+ if (type === 0) {
+ // Create the YouTube container
+ container.setAttribute('id', id);
+ player.media.appendChild(container);
+
+ // Setup API
+ if (typeof YT === 'object') {
+ _YouTubeReady(videoId, container);
+ }
+ else {
+ // Load the API
+ _injectScript('https://www.youtube.com/iframe_api');
+
+ // Setup callback for the API
+ window.onYouTubeIframeAPIReady = function () { _YouTubeReady(videoId, container); };
+ }
}
- else {
- // Load the API
- _injectScript("https://www.youtube.com/iframe_api");
+ else if (type === 1) {
+ // Inject the iframe
+ var iframe = document.createElement('iframe');
+ iframe.src = 'https://player.vimeo.com/video/' + videoId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0';
+ _setAttributes(iframe, {
+ 'id': id,
+ 'webkitallowfullscreen': '',
+ 'mozallowfullscreen': '',
+ 'allowfullscreen': '',
+ 'frameborder': 0
+ });
+ container.appendChild(iframe);
+ player.media.appendChild(container);
- // Setup callback for the API
- window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); }
+ // Setup API
+ if (typeof Froogaloop === 'function') {
+ _VimeoReady(id, iframe);
+ }
+ else {
+ // Load the API
+ _injectScript('https://f.vimeocdn.com/js/froogaloop2.min.js');
+
+ // Wait for fragaloop load
+ var timer = window.setInterval(function() {
+ if('$f' in window) {
+ window.clearInterval(timer);
+ _VimeoReady(id, iframe);
+ }
+ }, 50);
+ }
}
}
- // Handle API ready
- function _YTReady(id, container) {
- _log("YouTube API Ready");
+ // Handle YouTube API ready
+ function _YouTubeReady(videoId, container) {
+ _log('YouTube API Ready');
// Setup timers object
// We have to poll YouTube for updates
- if(!("timer" in player)) {
+ if (!('timer' in player)) {
player.timer = {};
}
// Setup instance
// https://developers.google.com/youtube/iframe_api_reference
player.embed = new YT.Player(container.id, {
- videoId: id,
+ videoId: videoId,
playerVars: {
autoplay: 0,
- controls: 0,
- vq: "hd720",
+ controls: (player.supported.full ? 0 : 1),
rel: 0,
showinfo: 0,
iv_load_policy: 3,
- cc_lang_pref: "en",
- wmode: "transparent",
- modestbranding: 1
+ cc_load_policy: (config.captions.defaultActive ? 1 : 0),
+ cc_lang_pref: 'en',
+ wmode: 'transparent',
+ modestbranding: 1,
+ disablekb: 1
},
events: {
- onReady: function(event) {
+ 'onReady': function(event) {
// Get the instance
var instance = event.target;
@@ -929,41 +987,43 @@
player.media.pause = function() { instance.pauseVideo(); };
player.media.stop = function() { instance.stopVideo(); };
player.media.duration = instance.getDuration();
- player.media.paused = (instance.getPlayerState() == 2);
+ player.media.paused = true;
player.media.currentTime = instance.getCurrentTime();
player.media.muted = instance.isMuted();
// Trigger timeupdate
- _triggerEvent(player.media, "timeupdate");
+ _triggerEvent(player.media, 'timeupdate');
// Reset timer
window.clearInterval(player.timer.buffering);
// Setup buffering
- player.timer.buffering = window.setInterval(function() {
+ player.timer.buffering = window.setInterval(function() {
// Get loaded % from YouTube
player.media.buffered = instance.getVideoLoadedFraction();
// Trigger progress
- _triggerEvent(player.media, "progress");
+ _triggerEvent(player.media, 'progress');
// Bail if we're at 100%
- if(player.media.buffered === 1) {
+ if (player.media.buffered === 1) {
window.clearInterval(player.timer.buffering);
}
}, 200);
- // Only setup controls once
- if(!player.container.querySelectorAll(config.selectors.controls).length) {
- _setupInterface();
- }
+ if (player.supported.full) {
+ // Only setup controls once
+ if (!player.container.querySelectorAll(config.selectors.controls).length) {
+ _setupInterface();
+ }
- // Display duration if available
- if(config.displayDuration) {
- _displayDuration();
+ // Display duration if available
+ if (config.displayDuration) {
+ _displayDuration();
+ }
}
},
- onStateChange: function(event) {
+ 'onStateChange': function(event) {
// Get the instance
var instance = event.target;
@@ -977,15 +1037,15 @@
// 2 Paused
// 3 Buffering
// 5 Video cued
- switch(event.data) {
+ switch (event.data) {
case 0:
player.media.paused = true;
- _triggerEvent(player.media, "ended");
+ _triggerEvent(player.media, 'ended');
break;
case 1:
player.media.paused = false;
- _triggerEvent(player.media, "play");
+ _triggerEvent(player.media, 'play');
// Poll to get playback progress
player.timer.playing = window.setInterval(function() {
@@ -993,29 +1053,97 @@
player.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
- _triggerEvent(player.media, "timeupdate");
+ _triggerEvent(player.media, 'timeupdate');
}, 200);
break;
case 2:
player.media.paused = true;
- _triggerEvent(player.media, "pause");
- break;
+ _triggerEvent(player.media, 'pause');
}
}
}
});
}
+ // Vimeo ready
+ function _VimeoReady(id, iframe) {
+ player.embed = $f(iframe);
+
+ player.embed.addEvent('ready', function() {
+ // Create a faux HTML5 API using the Vimeo API
+ player.media.play = function() { player.embed.api('play'); };
+ player.media.pause = function() { player.embed.api('pause'); };
+ player.media.stop = function() { player.embed.api('stop') };
+ player.media.paused = true;
+ player.media.currentTime = 0;
+ player.media.muted = false;
+
+ if (player.supported.full) {
+ // Only setup controls once
+ if (!player.container.querySelectorAll(config.selectors.controls).length) {
+ _setupInterface();
+ }
+ }
+
+ player.embed.api('getCurrentTime', function (value) {
+ player.media.currentTime = value;
+
+ // Trigger timeupdate
+ _triggerEvent(player.media, 'timeupdate');
+ });
+
+ player.embed.api('getDuration', function(value) {
+ player.media.duration = value;
+
+ // Display duration if available
+ if (player.supported.full && config.displayDuration) {
+ _displayDuration();
+ }
+ });
+
+ player.embed.addEvent('play', function() {
+ player.media.paused = false;
+ _triggerEvent(player.media, 'play');
+ });
+
+ player.embed.addEvent('pause', function() {
+ player.media.paused = true;
+ _triggerEvent(player.media, 'pause');
+ });
+
+ player.embed.addEvent('playProgress', function(data) {
+ // Set the current time
+ player.media.currentTime = data.seconds;
+
+ // Trigger timeupdate
+ _triggerEvent(player.media, 'timeupdate');
+ });
+
+ player.embed.addEvent('loadProgress', function(data) {
+ // Get loaded %
+ player.media.buffered = data.percent;
+
+ // Trigger progress
+ _triggerEvent(player.media, 'progress');
+ });
+
+ player.embed.addEvent('finish', function() {
+ player.media.paused = true;
+ _triggerEvent(player.media, 'ended');
+ });
+ });
+ }
+
// Setup captions
function _setupCaptions() {
- if(player.type === "video") {
+ if (player.type === 'video') {
// Inject the container
- player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>");
+ player.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + config.selectors.captions.replace('.', '') + '"><span></span></div>');
// Cache selector
- player.captionsContainer = _getElement(config.selectors.captions);
+ player.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
// Determine if HTML5 textTracks is supported
player.usingTextTracks = false;
@@ -1024,27 +1152,27 @@
}
// Get URL of caption file if exists
- var captionSrc = "",
+ var captionSrc = '',
kind,
children = player.media.childNodes;
for (var i = 0; i < children.length; i++) {
- if (children[i].nodeName.toLowerCase() === "track") {
- kind = children[i].getAttribute("kind");
- if (kind === "captions") {
- captionSrc = children[i].getAttribute("src");
+ 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
player.captionExists = true;
- if (captionSrc === "") {
+ if (captionSrc === '') {
player.captionExists = false;
- _log("No caption track found.");
+ _log('No caption track found.');
}
else {
- _log("Caption track found; URI: " + captionSrc);
+ _log('Caption track found; URI: ' + captionSrc);
}
// If no caption file exists, hide container for caption text
@@ -1056,41 +1184,41 @@
// 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 = player.media.textTracks;
- for (var x=0; x < tracks.length; x++) {
- tracks[x].mode = "hidden";
+ for (var x = 0; x < tracks.length; x++) {
+ tracks[x].mode = 'hidden';
}
// Enable UI
_showCaptions(player);
// Disable unsupported browsers than report false positive
- if ((player.browser.name === "IE" && player.browser.version >= 10) ||
- (player.browser.name === "Firefox" && player.browser.version >= 31) ||
- (player.browser.name === "Chrome" && player.browser.version >= 43) ||
- (player.browser.name === "Safari" && player.browser.version >= 7)) {
+ if ((player.browser.name === 'IE' && player.browser.version >= 10) ||
+ (player.browser.name === 'Firefox' && player.browser.version >= 31) ||
+ (player.browser.name === 'Chrome' && player.browser.version >= 43) ||
+ (player.browser.name === 'Safari' && player.browser.version >= 7)) {
// Debugging
- _log("Detected unsupported browser for HTML5 captions. Using fallback.");
+ _log('Detected unsupported browser for HTML5 captions. Using fallback.');
- // Set to false so skips to "manual" captioning
+ // Set to false so skips to 'manual' captioning
player.usingTextTracks = false;
}
// Rendering caption tracks
// Native support required - http://caniuse.com/webvtt
if (player.usingTextTracks) {
- _log("TextTracks supported.");
+ _log('TextTracks supported.');
- for (var y=0; y < tracks.length; y++) {
+ for (var y = 0; y < tracks.length; y++) {
var track = tracks[y];
- if (track.kind === "captions") {
- _on(track, "cuechange", function() {
+ if (track.kind === 'captions' || track.kind === 'subtitles') {
+ _on(track, 'cuechange', function() {
// Clear container
- player.captionsContainer.innerHTML = "";
+ player.captionsContainer.innerHTML = '';
// Display a cue, if there is one
- if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) {
- player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
+ if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
+ player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
}
});
}
@@ -1098,57 +1226,57 @@
}
// Caption tracks not natively supported
else {
- _log("TextTracks not supported so rendering captions manually.");
+ _log('TextTracks not supported so rendering captions manually.');
// Render captions from array at appropriate time
- player.currentCaption = "";
+ player.currentCaption = '';
player.captions = [];
- if (captionSrc !== "") {
+ if (captionSrc !== '') {
// Create XMLHttpRequest Object
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
- var records = [],
+ var records = [],
record,
req = xhr.responseText;
- records = req.split("\n\n");
+ records = req.split('\n\n');
- for (var r=0; r < records.length; r++) {
+ for (var r = 0; r < records.length; r++) {
record = records[r];
player.captions[r] = [];
- player.captions[r] = record.split("\n");
+ player.captions[r] = record.split('\n');
}
- // Remove first element ("VTT")
+ // Remove first element ('VTT')
player.captions.shift();
- _log("Successfully loaded the caption file via AJAX.");
+ _log('Successfully loaded the caption file via AJAX.');
}
else {
- _log("There was a problem loading the caption file via AJAX.", true);
+ _log('There was a problem loading the caption file via AJAX.', true);
}
}
- }
+ };
- xhr.open("get", captionSrc, true);
+ xhr.open('get', captionSrc, true);
xhr.send();
}
}
- // If Safari 7+, removing track from DOM [see "turn off native caption rendering" above]
- if (player.browser.name === "Safari" && player.browser.version >= 7) {
- _log("Safari 7+ detected; removing track from DOM.");
+ // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
+ if (player.browser.name === 'Safari' && player.browser.version >= 7) {
+ _log('Safari 7+ detected; removing track from DOM.');
// Find all <track> elements
- tracks = player.media.getElementsByTagName("track");
+ tracks = player.media.getElementsByTagName('track');
// Loop through and remove one by one
- for (var t=0; t < tracks.length; t++) {
+ for (var t = 0; t < tracks.length; t++) {
player.media.removeChild(tracks[t]);
}
}
@@ -1158,22 +1286,25 @@
// Setup fullscreen
function _setupFullscreen() {
- if(player.type != "audio" && config.fullscreen.enabled) {
+ if (player.type != 'audio' && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
- if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
- _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled.");
+ if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
+ _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled.');
// Add styling hook
_toggleClass(player.container, config.classes.fullscreen.enabled, true);
}
else {
- _log("Fullscreen not supported and fallback disabled.");
+ _log('Fullscreen not supported and fallback disabled.');
}
+ // Toggle state
+ _toggleState(player.buttons.fullscreen, false);
+
// Set control hide class hook
- if(config.fullscreen.hideControls) {
+ if (config.fullscreen.hideControls) {
_toggleClass(player.container, config.classes.fullscreen.hideControls, true);
}
}
@@ -1192,23 +1323,23 @@
// Toggle playback
function _togglePlay(toggle) {
// Play
- if(toggle === true) {
+ if (toggle === true) {
_play();
}
// Pause
- else if(toggle === false) {
+ else if (toggle === false) {
_pause();
}
// True toggle
else {
- player.media[player.media.paused ? "play" : "pause"]();
+ player.media[player.media.paused ? 'play' : 'pause']();
}
}
// Rewind
function _rewind(seekTime) {
// Use default if needed
- if(typeof seekTime !== "number") {
+ if (typeof seekTime !== 'number') {
seekTime = config.seekTime;
}
_seek(player.media.currentTime - seekTime);
@@ -1217,7 +1348,7 @@
// Fast forward
function _forward(seekTime) {
// Use default if needed
- if(typeof seekTime !== "number") {
+ if (typeof seekTime !== 'number') {
seekTime = config.seekTime;
}
_seek(player.media.currentTime + seekTime);
@@ -1226,14 +1357,15 @@
// Seek to time
// The input parameter can be an event or a number
function _seek(input) {
- var targetTime = 0;
+ var targetTime = 0,
+ paused = player.media.paused;
// Explicit position
- if (typeof input === "number") {
+ if (typeof input === 'number') {
targetTime = input;
}
// Event
- else if (typeof input === "object" && (input.type === "input" || input.type === "change")) {
+ else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) {
// It's the seek slider
// Seek to the selected time
targetTime = ((input.target.value / input.target.max) * player.media.duration);
@@ -1254,18 +1386,29 @@
}
catch(e) {}
- // YouTube
- if(player.type == "youtube") {
- player.embed.seekTo(player.media.currentTime);
+ // Trigger timeupdate for embed and restore pause state
+ if ('embed' in player) {
+ // YouTube
+ if (player.type === 'youtube') {
+ player.embed.seekTo(targetTime);
+ }
- // Trigger timeupdate
- _triggerEvent(player.media, "timeupdate");
+ // Vimeo
+ if (player.type === 'vimeo') {
+ player.embed.api('seekTo', targetTime);
+ }
+
+ _triggerEvent(player.media, 'timeupdate');
+
+ if (paused) {
+ _pause();
+ }
}
// Logging
- _log("Seeking to " + player.media.currentTime + " seconds");
+ _log('Seeking to ' + player.media.currentTime + ' seconds');
- // Special handling for "manual" captions
+ // Special handling for 'manual' captions
_seekManualCaptions(targetTime);
}
@@ -1281,13 +1424,13 @@
var nativeSupport = fullscreen.supportsFullScreen;
// If it's a fullscreen change event, it's probably a native close
- if(event && event.type === fullscreen.fullScreenEventName) {
+ if (event && event.type === fullscreen.fullScreenEventName) {
player.isFullscreen = fullscreen.isFullScreen(player.container);
}
// If there's native support, use it
- else if(nativeSupport) {
+ else if (nativeSupport) {
// Request fullscreen
- if(!fullscreen.isFullScreen(player.container)) {
+ if (!fullscreen.isFullScreen(player.container)) {
fullscreen.requestFullScreen(player.container);
}
// Bail from fullscreen
@@ -1303,18 +1446,21 @@
player.isFullscreen = !player.isFullscreen;
// Bind/unbind escape key
- if(player.isFullscreen) {
- _on(document, "keyup", _handleEscapeFullscreen);
- document.body.style.overflow = "hidden";
+ if (player.isFullscreen) {
+ _on(document, 'keyup', _handleEscapeFullscreen);
+ document.body.style.overflow = 'hidden';
}
else {
- _off(document, "keyup", _handleEscapeFullscreen);
- document.body.style.overflow = "";
+ _off(document, 'keyup', _handleEscapeFullscreen);
+ document.body.style.overflow = '';
}
}
// Set class hook
_toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
+
+ // Set button state
+ _toggleState(player.buttons.fullscreen, player.isFullscreen);
// Toggle controls visibility based on mouse movement and location
var hoverTimer, isMouseOver = false;
@@ -1322,49 +1468,49 @@
// Show the player controls
function _showControls() {
// Set shown class
- _toggleClass(player.controls, config.classes.hover, true);
+ _toggleClass(player.container, config.classes.hover, true);
// Clear timer every movement
window.clearTimeout(hoverTimer);
// If the mouse is not over the controls, set a timeout to hide them
- if(!isMouseOver) {
+ if (!isMouseOver) {
hoverTimer = window.setTimeout(function() {
- _toggleClass(player.controls, config.classes.hover, false);
+ _toggleClass(player.container, config.classes.hover, false);
}, 2000);
}
}
// Check mouse is over the controls
function _setMouseOver (event) {
- isMouseOver = (event.type === "mouseenter");
+ isMouseOver = (event.type === 'mouseenter');
}
- if(config.fullscreen.hideControls) {
+ if (config.fullscreen.hideControls) {
// Hide on entering full screen
_toggleClass(player.controls, config.classes.hover, false);
// Keep an eye on the mouse location in relation to controls
- _toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen);
+ _toggleHandler(player.controls, 'mouseenter mouseleave', _setMouseOver, player.isFullscreen);
// Show the controls on mouse move
- _toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen);
+ _toggleHandler(player.container, 'mousemove', _showControls, player.isFullscreen);
}
}
// Bail from faux-fullscreen
function _handleEscapeFullscreen(event) {
// If it's a keypress and not escape, bail
- if((event.which || event.charCode || event.keyCode) === 27 && player.isFullscreen) {
- _toggleFullscreen();
+ if ((event.which || event.charCode || event.keyCode) === 27 && player.isFullscreen) {
+ _toggleFullscreen();
}
}
// Set volume
function _setVolume(volume) {
// Use default if no value specified
- if(typeof volume === "undefined") {
- if(config.storage.enabled && _storage().supported) {
+ if (typeof volume === 'undefined') {
+ if (config.storage.enabled && _storage().supported) {
volume = window.localStorage[config.storage.key] || config.volume;
}
else {
@@ -1373,11 +1519,11 @@
}
// Maximum is 10
- if(volume > 10) {
+ if (volume > 10) {
volume = 10;
}
// Minimum is 0
- if(volume < 0) {
+ if (volume < 0) {
volume = 0;
}
@@ -1385,15 +1531,22 @@
player.media.volume = parseFloat(volume / 10);
// YouTube
- if(player.type == "youtube") {
+ if (player.type === 'youtube') {
player.embed.setVolume(player.media.volume * 100);
+ }
- // Trigger timeupdate
- _triggerEvent(player.media, "volumechange");
+ // Vimeo
+ if (player.type === 'vimeo') {
+ player.embed.api('setVolume', player.media.volume);
+ }
+
+ // Trigger volumechange for embeds
+ if ('embed' in player) {
+ _triggerEvent(player.media, 'volumechange');
}
// Toggle muted state
- if(player.media.muted && volume > 0) {
+ if (player.media.muted && volume > 0) {
_toggleMute();
}
}
@@ -1401,19 +1554,22 @@
// Mute
function _toggleMute(muted) {
// If the method is called without parameter, toggle based on current value
- if(typeof muted === "undefined") {
+ if (typeof muted !== 'boolean') {
muted = !player.media.muted;
}
+ // Set button state
+ _toggleState(player.buttons.mute, muted);
+
// Set mute on the player
player.media.muted = muted;
// YouTube
- if(player.type === "youtube") {
- player.embed[player.media.muted ? "mute" : "unMute"]();
+ if (player.type === 'youtube') {
+ player.embed[player.media.muted ? 'mute' : 'unMute']();
// Trigger timeupdate
- _triggerEvent(player.media, "volumechange");
+ _triggerEvent(player.media, 'volumechange');
}
}
@@ -1423,12 +1579,12 @@
var volume = player.media.muted ? 0 : (player.media.volume * 10);
// Update the <input type="range"> if present
- if(player.supported.full && player.volume) {
+ if (player.supported.full && player.volume) {
player.volume.value = volume;
}
// Store the volume in storage
- if(config.storage.enabled && _storage().supported) {
+ if (config.storage.enabled && _storage().supported) {
window.localStorage.setItem(config.storage.key, volume);
}
@@ -1436,30 +1592,33 @@
_toggleClass(player.container, config.classes.muted, (volume === 0));
// Update checkbox for mute state
- if(player.supported.full && player.buttons.mute) {
- player.buttons.mute.checked = (volume === 0);
+ if (player.supported.full && player.buttons.mute) {
+ _toggleState(player.buttons.mute, (volume === 0));
}
}
// Toggle captions
- function _toggleCaptions(show) {
+ function _toggleCaptions(show) {
// If there's no full support, or there's no caption toggle
- if(!player.supported.full || !player.buttons.captions) {
+ if (!player.supported.full || !player.buttons.captions) {
return;
}
// If the method is called without parameter, toggle based on current value
- if(typeof show === "undefined") {
+ if (typeof show !== 'boolean') {
show = (player.container.className.indexOf(config.classes.captions.active) === -1);
- player.buttons.captions.checked = show;
}
+ // Toggle state
+ _toggleState(player.buttons.captions, show);
+
+ // Add class hook
_toggleClass(player.container, config.classes.captions.active, show);
}
// Check if media is loading
function _checkLoading(event) {
- var loading = (event.type === "waiting");
+ var loading = (event.type === 'waiting');
// Clear timer
clearTimeout(player.loadingTimer);
@@ -1472,59 +1631,58 @@
// Update <progress> elements
function _updateProgress(event) {
- var progress = player.progress.played.bar,
- text = player.progress.played.text,
+ var progress = player.progress.played.bar,
+ text = player.progress.played.text,
value = 0;
- if(event) {
- switch(event.type) {
+ if (event) {
+ switch (event.type) {
// Video playing
- case "timeupdate":
- case "seeking":
+ case 'timeupdate':
+ case 'seeking':
value = _getPercentage(player.media.currentTime, player.media.duration);
- // Set seek range value only if it's a "natural" time event
- if(event.type == "timeupdate" && player.buttons.seek) {
+ // Set seek range value only if it's a 'natural' time event
+ if (event.type == 'timeupdate' && player.buttons.seek) {
player.buttons.seek.value = value;
}
break;
// Events from seek range
- case "change":
- case "input":
+ case 'change':
+ case 'input':
value = event.target.value;
break;
// Check buffer status
- case "playing":
- case "progress":
+ case 'playing':
+ case 'progress':
progress = player.progress.buffer.bar;
text = player.progress.buffer.text;
- value = (function() {
+ value = (function() {
var buffered = player.media.buffered;
// HTML5
- if(buffered && buffered.length) {
+ if (buffered && buffered.length) {
return _getPercentage(buffered.end(0), player.media.duration);
}
// YouTube returns between 0 and 1
- else if(typeof buffered == "number") {
+ else if (typeof buffered === 'number') {
return (buffered * 100);
}
- return 0;
+ return 0;
})();
- break;
}
}
// Set values
- if(progress) {
+ if (progress) {
progress.value = value;
}
- if(text) {
+ if (text) {
text.innerHTML = value;
}
}
@@ -1532,7 +1690,7 @@
// Update the displayed time
function _updateTimeDisplay(time, element) {
// Bail if there's no duration display
- if(!element) {
+ if (!element) {
return;
}
@@ -1541,14 +1699,14 @@
player.hours = parseInt(((time / 60) / 60) % 60);
// Do we need to display hours?
- var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0)
+ var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0);
- // Ensure it"s two digits. For example, 03 rather than 3.
- player.secs = ("0" + player.secs).slice(-2);
- player.mins = ("0" + player.mins).slice(-2);
+ // Ensure it's two digits. For example, 03 rather than 3.
+ player.secs = ('0' + player.secs).slice(-2);
+ player.mins = ('0' + player.mins).slice(-2);
// Render
- element.innerHTML = (displayHours ? player.hours + ":" : "") + player.mins + ":" + player.secs;
+ element.innerHTML = (displayHours ? player.hours + ':' : '') + player.mins + ':' + player.secs;
}
// Show the duration on metadataloaded
@@ -1556,12 +1714,12 @@
var duration = player.media.duration || 0;
// If there's only one time display, display duration there
- if(!player.duration && config.displayDuration && player.media.paused) {
+ if (!player.duration && config.displayDuration && player.media.paused) {
_updateTimeDisplay(duration, player.currentTime);
}
// If there's a duration element, update content
- if(player.duration) {
+ if (player.duration) {
_updateTimeDisplay(duration, player.duration);
}
}
@@ -1578,7 +1736,7 @@
// Remove <source> children and src attribute
function _removeSources() {
// Find child <source> elements
- var sources = player.media.querySelectorAll("source");
+ var sources = player.media.querySelectorAll('source');
// Remove each
for (var i = sources.length - 1; i >= 0; i--) {
@@ -1586,14 +1744,14 @@
}
// Remove src attribute
- player.media.removeAttribute("src");
+ player.media.removeAttribute('src');
}
// Inject a source
function _addSource(attributes) {
- if(attributes.src) {
+ if (attributes.src) {
// Create a new <source>
- var element = document.createElement("source");
+ var element = document.createElement('source');
// Set all passed attributes
_setAttributes(element, attributes);
@@ -1606,16 +1764,23 @@
// Update source
// Sources are not checked for support so be careful
function _parseSource(sources) {
- // YouTube
- if(player.type === "youtube" && typeof sources === "string") {
- // Destroy YouTube instance
- player.embed.destroy();
+ // Embed
+ if('embed' in player && typeof sources === 'string') {
+ // YouTube
+ if (player.type === 'youtube') {
+ // Destroy YouTube instance
+ player.embed.destroy();
+
+ // Re-setup YouTube
+ _setupEmbed(sources, 0);
+ }
- // Re-setup YouTube
- // We don't use loadVideoBy[x] here since it has issues
- _setupYouTube(sources);
+ // Vimeo
+ if(player.type === 'vimeo') {
+ _setupEmbed(sources, 1);
+ }
- // Update times
+ // Reset time display
_timeUpdate();
// Bail
@@ -1632,21 +1797,21 @@
_removeSources();
// If a single source is passed
- // .source("path/to/video.mp4")
- if(typeof sources === "string") {
- player.media.setAttribute("src", sources);
+ // .source('path/to/video.mp4')
+ if (typeof sources === 'string') {
+ _addSource({ src: sources });
}
// An array of source objects
- // Check if a source exists, use that or set the "src" attribute?
- // .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }])
+ // Check if a source exists, use that or set the 'src' attribute?
+ // .source([{ src: 'path/to/video.mp4', type: 'video/mp4' },{ src: 'path/to/video.webm', type: 'video/webm' }])
else if (sources.constructor === Array) {
- for (var index in sources) {
+ for (var index in sources) {
_addSource(sources[index]);
}
}
- if(player.supported.full) {
+ if (player.supported.full) {
// Reset time display
_timeUpdate();
@@ -1658,43 +1823,73 @@
player.media.load();
// Play if autoplay attribute is present
- if(player.media.getAttribute("autoplay") !== null) {
+ if (player.media.getAttribute('autoplay') !== null) {
_play();
}
}
// Update poster
function _updatePoster(source) {
- if(player.type === "video") {
- player.media.setAttribute("poster", source);
+ if (player.type === 'video') {
+ player.media.setAttribute('poster', source);
}
}
// Listen for events
function _listeners() {
// IE doesn't support input event, so we fallback to change
- var inputEvent = (player.browser.name == "IE" ? "change" : "input");
+ var inputEvent = (player.browser.name == 'IE' ? 'change' : 'input');
+
+ // Detect tab focus
+ function checkFocus() {
+ var focused = document.activeElement;
+ if (!focused || focused == document.body) {
+ focused = null;
+ }
+ else if (document.querySelector) {
+ focused = document.querySelector(':focus');
+ }
+ for (var button in player.buttons) {
+ var element = player.buttons[button];
+
+ _toggleClass(element, 'tab-focus', (element === focused));
+ }
+ }
+ _on(window, 'keyup', function(event) {
+ var code = (event.keyCode ? event.keyCode : event.which);
+
+ if (code == 9) {
+ checkFocus();
+ }
+ });
+ for (var button in player.buttons) {
+ var element = player.buttons[button];
+
+ _on(element, 'blur', function() {
+ _toggleClass(element, 'tab-focus', false);
+ });
+ }
// Play
- _on(player.buttons.play, "click", function() {
- _play();
+ _on(player.buttons.play, 'click', function() {
+ _play();
setTimeout(function() { player.buttons.pause.focus(); }, 100);
});
// Pause
- _on(player.buttons.pause, "click", function() {
- _pause();
+ _on(player.buttons.pause, 'click', function() {
+ _pause();
setTimeout(function() { player.buttons.play.focus(); }, 100);
});
// Restart
- _on(player.buttons.restart, "click", _seek);
+ _on(player.buttons.restart, 'click', _seek);
// Rewind
- _on(player.buttons.rewind, "click", _rewind);
+ _on(player.buttons.rewind, 'click', _rewind);
// Fast forward
- _on(player.buttons.forward, "click", _forward);
+ _on(player.buttons.forward, 'click', _forward);
// Seek
_on(player.buttons.seek, inputEvent, _seek);
@@ -1705,37 +1900,33 @@
});
// Mute
- _on(player.buttons.mute, "change", function() {
- _toggleMute(this.checked);
- });
+ _on(player.buttons.mute, 'click', _toggleMute);
// Fullscreen
- _on(player.buttons.fullscreen, "click", _toggleFullscreen);
+ _on(player.buttons.fullscreen, 'click', _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
- if(fullscreen.supportsFullScreen) {
+ if (fullscreen.supportsFullScreen) {
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
}
// Time change on media
- _on(player.media, "timeupdate seeking", _timeUpdate);
+ _on(player.media, 'timeupdate seeking', _timeUpdate);
// Update manual captions
- _on(player.media, "timeupdate", _seekManualCaptions);
+ _on(player.media, 'timeupdate', _seekManualCaptions);
// Display duration
- _on(player.media, "loadedmetadata", _displayDuration);
+ _on(player.media, 'loadedmetadata', _displayDuration);
// Captions
- _on(player.buttons.captions, "change", function() {
- _toggleCaptions(this.checked);
- });
+ _on(player.buttons.captions, 'click', _toggleCaptions);
// Handle the media finishing
- _on(player.media, "ended", function() {
+ _on(player.media, 'ended', function() {
// Clear
- if(player.type === "video") {
- player.captionsContainer.innerHTML = "";
+ if (player.type === 'video') {
+ player.captionsContainer.innerHTML = '';
}
// Reset UI
@@ -1743,32 +1934,29 @@
});
// Check for buffer progress
- _on(player.media, "progress playing", _updateProgress);
+ _on(player.media, 'progress playing', _updateProgress);
// Handle native mute
- _on(player.media, "volumechange", _updateVolume);
+ _on(player.media, 'volumechange', _updateVolume);
// Handle native play/pause
- _on(player.media, "play pause", _checkPlaying);
+ _on(player.media, 'play pause', _checkPlaying);
// Loading
- _on(player.media, "waiting canplay seeked", _checkLoading);
-
- // Toggle checkboxes on return key (as they look like buttons)
- _on(player.checkboxes, "keyup", _toggleCheckbox);
+ _on(player.media, 'waiting canplay seeked', _checkLoading);
// Click video
- if(player.type === "video" && config.click) {
- _on(player.videoContainer, "click", function() {
- if(player.media.paused) {
- _triggerEvent(player.buttons.play, "click");
+ if (player.type === 'video' && config.click) {
+ _on(player.videoContainer, 'click', function() {
+ if (player.media.paused) {
+ _triggerEvent(player.buttons.play, 'click');
}
- else if(player.media.ended) {
+ else if (player.media.ended) {
_seek();
- _triggerEvent(player.buttons.play, "click");
+ _triggerEvent(player.buttons.play, 'click');
}
else {
- _triggerEvent(player.buttons.pause, "click");
+ _triggerEvent(player.buttons.pause, 'click');
}
});
}
@@ -1779,12 +1967,12 @@
// http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
function _destroy() {
// Bail if the element is not initialized
- if(!player.init) {
+ if (!player.init) {
return null;
}
// Reset container classname
- player.container.setAttribute("class", config.selectors.container.replace(".", ""));
+ player.container.setAttribute('class', config.selectors.container.replace('.', ''));
// Remove init flag
player.init = false;
@@ -1793,13 +1981,13 @@
_remove(_getElement(config.selectors.controls));
// YouTube
- if(player.type === "youtube") {
+ if (player.type === 'youtube') {
player.embed.destroy();
return;
}
// If video, we need to remove some more
- if(player.type === "video") {
+ if (player.type === 'video') {
// Remove captions
_remove(_getElement(config.selectors.captions));
@@ -1808,7 +1996,7 @@
}
// Restore native video controls
- player.media.setAttribute("controls", "");
+ player.media.setAttribute('controls', '');
// Clone the media element to remove listeners
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
@@ -1819,7 +2007,7 @@
// Setup a player
function _init() {
// Bail if the element is initialized
- if(player.init) {
+ if (player.init) {
return null;
}
@@ -1830,38 +2018,35 @@
player.browser = _browserSniff();
// Get the media element
- player.media = player.container.querySelectorAll("audio, video, div")[0];
+ player.media = player.container.querySelectorAll('audio, video, div')[0];
// Set media type
var tagName = player.media.tagName.toLowerCase();
- switch(tagName) {
- case "div":
- player.type = player.media.getAttribute("data-type");
- break;
-
- default:
- player.type = tagName;
- break;
+ if (tagName === 'div') {
+ player.type = player.media.getAttribute('data-type');
+ }
+ else {
+ player.type = tagName;
}
// Check for full support
player.supported = api.supported(player.type);
// If no native support, bail
- if(!player.supported.basic) {
+ if (!player.supported.basic) {
return false;
}
// Debug info
- _log(player.browser.name + " " + player.browser.version);
+ _log(player.browser.name + ' ' + player.browser.version);
// Setup media
_setupMedia();
// Setup interface
- if(player.type == "video" || player.type == "audio") {
+ if (player.type == 'video' || player.type == 'audio') {
// Bail if no support
- if(!player.supported.full) {
+ if (!player.supported.full) {
return;
}
@@ -1869,12 +2054,12 @@
_setupInterface();
// Display duration if available
- if(config.displayDuration) {
+ if (config.displayDuration) {
_displayDuration();
}
// Set up aria-label for Play button with the title option
- _setupAria();
+ _setupPlayAria();
}
// Successful setup
@@ -1886,7 +2071,7 @@
_injectControls();
// Find the elements
- if(!_findElements()) {
+ if (!_findElements()) {
return false;
}
@@ -1908,7 +2093,7 @@
_init();
// If init failed, return an empty object
- if(!player.init) {
+ if (!player.init) {
return {};
}
@@ -1931,59 +2116,59 @@
support: function(mimeType) { return _supportMime(player, mimeType); },
destroy: _destroy,
restore: _init
- }
+ };
}
// Check for support
api.supported = function(type) {
var browser = _browserSniff(),
- oldIE = (browser.name === "IE" && browser.version <= 9),
+ oldIE = (browser.name === 'IE' && browser.version <= 9),
iPhone = /iPhone|iPod/i.test(navigator.userAgent),
- audio = !!document.createElement("audio").canPlayType,
- video = !!document.createElement("video").canPlayType,
+ audio = !!document.createElement('audio').canPlayType,
+ video = !!document.createElement('video').canPlayType,
basic, full;
switch (type) {
- case "video":
+ case 'video':
basic = video;
full = (basic && (!oldIE && !iPhone));
break;
- case "audio":
+ case 'audio':
basic = audio;
full = (basic && !oldIE);
- break;
+ break;
- case "youtube":
+ case 'vimeo':
+ case 'youtube':
basic = true;
- full = !oldIE;
- break;
+ full = (!oldIE && !iPhone);
+ break;
default:
basic = (audio && video);
full = (basic && !oldIE);
- break;
}
return {
basic: basic,
full: full
};
- }
+ };
// Expose setup function
- api.setup = function(options){
+ api.setup = function(options) {
// Extend the default options with user specified
config = _extend(defaults, options);
// Bail if disabled or no basic support
// You may want to disable certain UAs etc
- if(!config.enabled || !api.supported().basic) {
+ if (!config.enabled || !api.supported().basic) {
return false;
}
// Get the players
- var elements = document.querySelectorAll(config.selectors.container),
+ var elements = document.querySelectorAll(config.selectors.container),
players = [];
// Create a player instance for each element
@@ -1992,7 +2177,7 @@
var element = elements[i];
// Setup a player instance and add to the element
- if(typeof element.plyr === "undefined") {
+ if (typeof element.plyr === 'undefined') {
// Create new instance
var instance = new Plyr(element);
@@ -2000,7 +2185,9 @@
element.plyr = (Object.keys(instance).length ? instance : false);
// Callback
- config.onSetup.apply(element.plyr);
+ if (typeof config.onSetup === 'function') {
+ config.onSetup.apply(element.plyr);
+ }
}
// Add to return array even if it's already setup
@@ -2008,6 +2195,6 @@
}
return players;
- }
+ };
-}(this.plyr = this.plyr || {}));
+}(this.plyr = this.plyr || {})); \ No newline at end of file
diff --git a/src/less/plyr.less b/src/less/plyr.less
index ecc37e37..d6f5f800 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -170,6 +170,7 @@
&-video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
+ overflow: hidden;
iframe {
position: absolute;
@@ -178,6 +179,14 @@
width: 100%;
height: 100%;
border: 0;
+ user-select: none;
+ }
+
+ // Vimeo hack
+ > div {
+ position: relative;
+ padding-bottom: 200%;
+ transform: translateY(-35.95%);
}
}