aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/plyr.js')
-rw-r--r--src/js/plyr.js117
1 files changed, 71 insertions, 46 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index b7f59405..327cb9fa 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.8.2
+// plyr.js v1.8.3
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -44,7 +44,7 @@
displayDuration: true,
loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/1.8.2/plyr.svg',
+ iconUrl: 'https://cdn.plyr.io/1.8.3/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
@@ -253,8 +253,8 @@
isFirefox: isFirefox,
isChrome: isChrome,
isSafari: isSafari,
- ios: /(iPad|iPhone|iPod)/g.test(navigator.platform),
- touch: 'ontouchstart' in document.documentElement
+ isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
+ isTouch: 'ontouchstart' in document.documentElement
};
}
@@ -684,9 +684,14 @@
_log(config);
// Debugging
- function _log(text, warn) {
+ function _log() {
if (config.debug && window.console) {
- console[(warn ? 'warn' : 'log')](text);
+ console.log.apply(console, arguments);
+ }
+ }
+ function _warn() {
+ if (config.debug && window.console) {
+ console.warn.apply(console, arguments);
}
}
@@ -694,7 +699,7 @@
function _getIconUrl() {
return {
url: config.iconUrl,
- external: (config.iconUrl.indexOf("http") === 0)
+ absolute: (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE
};
}
@@ -703,7 +708,7 @@
// Create html array
var html = [],
iconUrl = _getIconUrl(),
- iconPath = (!iconUrl.external ? iconUrl.url : '') + '#' + config.iconPrefix;
+ iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
// Larger overlaid play button
if (_inArray(config.controls, 'play-large')) {
@@ -1013,7 +1018,7 @@
_log('Successfully loaded the caption file via AJAX');
}
else {
- _log('There was a problem loading the caption file via AJAX', true);
+ _warn('There was a problem loading the caption file via AJAX');
}
}
};
@@ -1206,12 +1211,11 @@
function _injectControls() {
// Sprite
if (config.loadSprite) {
- var iconUrl = _getIconUrl(),
- isExternal = iconUrl.external;
+ var iconUrl = _getIconUrl();
// Only load external sprite using AJAX
- if (isExternal || plyr.browser.isIE) {
- _log('AJAX loading external SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
+ if (iconUrl.absolute) {
+ _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
loadSprite(iconUrl.url, "sprite-plyr");
}
else {
@@ -1316,7 +1320,7 @@
return true;
}
catch(e) {
- _log('It looks like there is a problem with your controls html', true);
+ _warn('It looks like there is a problem with your controls HTML');
// Restore native video controls
_toggleNativeControls(true);
@@ -1332,7 +1336,7 @@
// Toggle native controls
function _toggleNativeControls(toggle) {
- if (toggle) {
+ if (toggle && _inArray(config.types.html5, plyr.type)) {
plyr.media.setAttribute('controls', '');
}
else {
@@ -1351,7 +1355,7 @@
}
// If there's a play button, set label
- if (plyr.supported.full && plyr.buttons && plyr.buttons.play) {
+ if (plyr.supported.full && plyr.buttons.play) {
for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
plyr.buttons.play[i].setAttribute('aria-label', label);
}
@@ -1368,8 +1372,8 @@
function _setupMedia() {
// If there's no media, bail
if (!plyr.media) {
- _log('No audio or video element found', true);
- return false;
+ _warn('No media element found!');
+ return;
}
if (plyr.supported.full) {
@@ -1386,10 +1390,10 @@
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
// Add iOS class
- _toggleClass(plyr.container, config.classes.isIos, plyr.browser.ios);
+ _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
// Add touch class
- _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.touch);
+ _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
// Inject the player wrapper
if (plyr.type === 'video') {
@@ -1533,8 +1537,10 @@
// Store reference to API
plyr.container.plyr.embed = plyr.embed;
- // Setup the UI
- _setupInterface();
+ // Setup the UI if full support
+ if (plyr.supported.full) {
+ _setupInterface();
+ }
// Set title
_setTitle(_getElement('iframe'));
@@ -1899,7 +1905,7 @@
targetTime = input;
}
// Event
- else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) {
+ else if (input.type && _inArray(['input', 'change'], input.type)) {
// It's the seek slider
// Seek to the selected time
targetTime = ((input.target.value / input.target.max) * duration);
@@ -2276,6 +2282,10 @@
// Video playing
case 'timeupdate':
case 'seeking':
+ if (plyr.controls.pressed) {
+ return;
+ }
+
value = _getPercentage(plyr.media.currentTime, duration);
// Set seek range value only if it's a 'natural' time event
@@ -2485,21 +2495,22 @@
if (!config.hideControls || plyr.type === 'audio') {
return;
}
+
var delay = 0,
isEnterFullscreen = false,
show = toggle;
// Default to false if no boolean
- if (typeof toggle !== "boolean") {
+ if (typeof toggle !== 'boolean') {
if (toggle && toggle.type) {
// Is the enter fullscreen event
isEnterFullscreen = (toggle.type === 'enterfullscreen');
// Whether to show controls
- show = _inArray(['mousemove', 'mouseenter', 'focus'], toggle.type);
+ show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
- // Delay hiding on mousemove events
- if (toggle.type === 'mousemove') {
+ // Delay hiding on move events
+ if (_inArray(['mousemove', 'touchmove'], toggle.type)) {
delay = 2000;
}
@@ -2509,7 +2520,7 @@
}
}
else {
- show = !_hasClass(plyr.container, config.classes.hideControls);
+ show = _hasClass(plyr.container, config.classes.hideControls);
}
}
@@ -2526,7 +2537,7 @@
}
// Delay for hiding on touch
- if (plyr.browser.touch) {
+ if (plyr.browser.isTouch) {
delay = 3000;
}
}
@@ -2536,7 +2547,7 @@
if (!show || !plyr.media.paused) {
plyr.timers.hover = window.setTimeout(function() {
// If the mouse is over the controls (and not entering fullscreen), bail
- if (plyr.controls.active && !isEnterFullscreen) {
+ if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
return;
}
@@ -2584,7 +2595,7 @@
// Sources are not checked for support so be careful
function _updateSource(source) {
if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) {
- _log('Invalid source format', true);
+ _warn('Invalid source format');
return;
}
@@ -2712,6 +2723,10 @@
// Display duration if available
_displayDuration();
}
+ // If embed but not fully supported, setupInterface now
+ else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) {
+ _setupInterface();
+ }
// Set aria title and iframe title
config.title = source.title;
@@ -2857,11 +2872,16 @@
// Toggle controls visibility based on mouse movement
if (config.hideControls) {
// Toggle controls on mouse events and entering fullscreen
- _on(plyr.container, 'mouseenter mouseleave mousemove enterfullscreen', _toggleControls);
+ _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
// Watch for cursor over controls so they don't hide when trying to interact
_on(plyr.controls, 'mouseenter mouseleave', function(event) {
- plyr.controls.active = (event.type === 'mouseenter');
+ plyr.controls.hover = event.type === 'mouseenter';
+ });
+
+ // Watch for cursor over controls so they don't hide when trying to interact
+ _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
+ plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
});
// Focus in/out on controls
@@ -2959,8 +2979,8 @@
// On click play, pause ore restart
_on(wrapper, 'click', function() {
- if (plyr.browser.touch && !plyr.media.paused) {
- _toggleControls(true);
+ // Touch devices will just show controls
+ if (plyr.browser.isTouch && !plyr.media.paused) {
return;
}
@@ -3144,6 +3164,10 @@
_play();
}
}
+ // If embed but not fully supported, setupInterface now (to avoid flash of controls)
+ else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) {
+ _setupInterface();
+ }
// Successful setup
plyr.init = true;
@@ -3152,7 +3176,7 @@
function _setupInterface() {
// Don't setup interface if no support
if (!plyr.supported.full) {
- _log('No full support for this media type (' + plyr.type + ')', true);
+ _warn('No full support for this media type (' + plyr.type + ')');
// Remove controls
_remove(_getElement(config.selectors.controls.wrapper));
@@ -3277,34 +3301,35 @@
// Check for support
function supported(type) {
- var browser = _browserSniff(),
- oldIE = (browser.isIE && browser.version <= 9),
- iPhone = /iPhone|iPod/i.test(navigator.userAgent),
- audio = !!document.createElement('audio').canPlayType,
- video = !!document.createElement('video').canPlayType,
+ var browser = _browserSniff(),
+ isOldIE = (browser.isIE && browser.version <= 9),
+ isIos = browser.isIos,
+ isIphone = /iPhone|iPod/i.test(navigator.userAgent),
+ audio = !!document.createElement('audio').canPlayType,
+ video = !!document.createElement('video').canPlayType,
basic, full;
switch (type) {
case 'video':
basic = video;
- full = (basic && (!oldIE && !iPhone));
+ full = (basic && (!isOldIE && !isIphone));
break;
case 'audio':
basic = audio;
- full = (basic && !oldIE);
+ full = (basic && !isOldIE);
break;
case 'vimeo':
case 'youtube':
case 'soundcloud':
basic = true;
- full = (!oldIE && !iPhone);
+ full = (!isOldIE && !isIos);
break;
default:
basic = (audio && video);
- full = (basic && !oldIE);
+ full = (basic && !isOldIE);
}
return {
@@ -3429,7 +3454,7 @@
return false;
}
- function CustomEvent (event, params) {
+ function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);