aboutsummaryrefslogtreecommitdiffstats
path: root/dist/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/plyr.js')
-rw-r--r--dist/plyr.js1121
1 files changed, 983 insertions, 138 deletions
diff --git a/dist/plyr.js b/dist/plyr.js
index 06c14ab5..031ccb1e 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -303,20 +303,22 @@ typeof navigator === "object" && (function (global, factory) {
} // Bind once-only event handler
function once(element) {
+ var _this2 = this;
+
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var callback = arguments.length > 2 ? arguments[2] : undefined;
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
- function onceCallback() {
+ var onceCallback = function onceCallback() {
off(element, events, onceCallback, passive, capture);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
- callback.apply(this, args);
- }
+ callback.apply(_this2, args);
+ };
toggleListener.call(this, element, events, onceCallback, true, passive, capture);
} // Trigger event
@@ -356,10 +358,10 @@ typeof navigator === "object" && (function (global, factory) {
} // Run method when / if player is ready
function ready() {
- var _this2 = this;
+ var _this3 = this;
return new Promise(function (resolve) {
- return _this2.ready ? setTimeout(resolve, 0) : on.call(_this2, _this2.elements.container, 'ready', resolve);
+ return _this3.ready ? setTimeout(resolve, 0) : on.call(_this3, _this3.elements.container, 'ready', resolve);
}).then(function () {});
}
@@ -675,6 +677,7 @@ typeof navigator === "object" && (function (global, factory) {
isIE:
/* @cc_on!@ */
!!document.documentMode,
+ isEdge: window.navigator.userAgent.includes('Edge'),
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
@@ -733,12 +736,16 @@ typeof navigator === "object" && (function (global, factory) {
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplayer.com/test/h5mt.html
- mime: function mime(inputType) {
- var _inputType$split = inputType.split('/'),
- _inputType$split2 = _slicedToArray(_inputType$split, 1),
- mediaType = _inputType$split2[0];
+ mime: function mime(input) {
+ if (is.empty(input)) {
+ return false;
+ }
- var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
+ var _input$split = input.split('/'),
+ _input$split2 = _slicedToArray(_input$split, 1),
+ mediaType = _input$split2[0];
+
+ var type = input; // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) {
return false;
@@ -746,7 +753,7 @@ typeof navigator === "object" && (function (global, factory) {
if (Object.keys(defaultCodecs).includes(type)) {
- type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
+ type += "; codecs=\"".concat(defaultCodecs[input], "\"");
}
try {
@@ -782,10 +789,16 @@ typeof navigator === "object" && (function (global, factory) {
return [];
}
- var sources = Array.from(this.media.querySelectorAll('source')); // Filter out unsupported sources
+ var sources = Array.from(this.media.querySelectorAll('source')); // Filter out unsupported sources (if type is specified)
return sources.filter(function (source) {
- return support.mime.call(_this, source.getAttribute('type'));
+ var type = source.getAttribute('type');
+
+ if (is.empty(type)) {
+ return true;
+ }
+
+ return support.mime.call(_this, type);
});
},
// Get quality levels
@@ -1238,13 +1251,13 @@ typeof navigator === "object" && (function (global, factory) {
// ==========================================================================
var getHours = function getHours(value) {
- return parseInt(value / 60 / 60 % 60, 10);
+ return Math.trunc(value / 60 / 60 % 60, 10);
};
var getMinutes = function getMinutes(value) {
- return parseInt(value / 60 % 60, 10);
+ return Math.trunc(value / 60 % 60, 10);
};
var getSeconds = function getSeconds(value) {
- return parseInt(value % 60, 10);
+ return Math.trunc(value % 60, 10);
}; // Format time to UI friendly string
function formatTime() {
@@ -2713,10 +2726,10 @@ typeof navigator === "object" && (function (global, factory) {
addProperty(button);
}
});
- } // Edge sometimes doesn't finish the paint so force a redraw
+ } // Edge sometimes doesn't finish the paint so force a repaint
- if (window.navigator.userAgent.includes('Edge')) {
+ if (browser.isEdge) {
repaint(target);
} // Setup tooltips
@@ -3227,7 +3240,7 @@ typeof navigator === "object" && (function (global, factory) {
enabled: true,
// Allow fullscreen?
fallback: true,
- // Fallback for vintage browsers
+ // Fallback using full viewport/window
iosNative: false // Use the native fullscreen in iOS (disables custom controls)
},
@@ -3428,7 +3441,17 @@ typeof navigator === "object" && (function (global, factory) {
supported: 'plyr--airplay-supported',
active: 'plyr--airplay-active'
},
- tabFocus: 'plyr__tab-focus'
+ tabFocus: 'plyr__tab-focus',
+ previewThumbnails: {
+ // Tooltip thumbs
+ thumbContainer: 'plyr__preview-thumb',
+ thumbContainerShown: 'plyr__preview-thumb--is-shown',
+ imageContainer: 'plyr__preview-thumb__image-container',
+ timeContainer: 'plyr__preview-thumb__time-container',
+ // Scrubbing
+ scrubbingContainer: 'plyr__preview-scrubbing',
+ scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown'
+ }
},
// Embed attributes
attributes: {
@@ -3445,7 +3468,34 @@ typeof navigator === "object" && (function (global, factory) {
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
ads: {
enabled: false,
- publisherId: ''
+ publisherId: '',
+ tagUrl: ''
+ },
+ // Preview Thumbnails plugin
+ previewThumbnails: {
+ enabled: false,
+ src: ''
+ },
+ // Vimeo plugin
+ vimeo: {
+ byline: false,
+ portrait: false,
+ title: false,
+ speed: true,
+ transparent: false
+ },
+ // YouTube plugin
+ youtube: {
+ noCookie: false,
+ // Whether to use an alternative version of YouTube without cookies
+ rel: 0,
+ // No related vids
+ showinfo: 0,
+ // Hide info
+ iv_load_policy: 3,
+ // Hide annotations
+ modestbranding: 1 // Hide logos as much as possible (they still show one in the corner when paused)
+
}
};
@@ -3476,7 +3526,7 @@ typeof navigator === "object" && (function (global, factory) {
function getProviderByUrl(url) {
// YouTube
- if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(url)) {
+ if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) {
return providers.youtube;
} // Vimeo
@@ -3622,7 +3672,9 @@ typeof navigator === "object" && (function (global, factory) {
this.scrollPosition = {
x: 0,
y: 0
- }; // Register event listeners
+ }; // Force the use of 'full window/browser' rather than fullscreen
+
+ this.forceFallback = player.config.fullscreen.fallback === 'force'; // Register event listeners
// Handle event (incase user presses escape etc)
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
@@ -3648,7 +3700,17 @@ typeof navigator === "object" && (function (global, factory) {
// Update UI
value: function update() {
if (this.enabled) {
- this.player.debug.log("".concat(Fullscreen.native ? 'Native' : 'Fallback', " fullscreen enabled"));
+ var mode;
+
+ if (this.forceFallback) {
+ mode = 'Fallback (forced)';
+ } else if (Fullscreen.native) {
+ mode = 'Native';
+ } else {
+ mode = 'Fallback';
+ }
+
+ this.player.debug.log("".concat(mode, " fullscreen enabled"));
} else {
this.player.debug.log('Fullscreen not supported and fallback disabled');
} // Add styling hook to show button
@@ -3667,7 +3729,7 @@ typeof navigator === "object" && (function (global, factory) {
if (browser.isIos && this.player.config.fullscreen.iosNative) {
this.target.webkitEnterFullscreen();
- } else if (!Fullscreen.native) {
+ } else if (!Fullscreen.native || this.forceFallback) {
toggleFallback.call(this, true);
} else if (!this.prefix) {
this.target.requestFullscreen();
@@ -3687,7 +3749,7 @@ typeof navigator === "object" && (function (global, factory) {
if (browser.isIos && this.player.config.fullscreen.iosNative) {
this.target.webkitExitFullscreen();
this.player.play();
- } else if (!Fullscreen.native) {
+ } else if (!Fullscreen.native || this.forceFallback) {
toggleFallback.call(this, false);
} else if (!this.prefix) {
(document.cancelFullScreen || document.exitFullscreen).call(document);
@@ -3707,6 +3769,13 @@ typeof navigator === "object" && (function (global, factory) {
}
}
}, {
+ key: "usingNative",
+ // If we're actually using native
+ get: function get() {
+ return Fullscreen.native && !this.forceFallback;
+ } // Get the prefix for handlers
+
+ }, {
key: "enabled",
// Determine if fullscreen is enabled
get: function get() {
@@ -3721,7 +3790,7 @@ typeof navigator === "object" && (function (global, factory) {
} // Fallback using classname
- if (!Fullscreen.native) {
+ if (!Fullscreen.native || this.forceFallback) {
return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
}
@@ -3738,8 +3807,7 @@ typeof navigator === "object" && (function (global, factory) {
key: "native",
get: function get() {
return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
- } // Get the prefix for handlers
-
+ }
}, {
key: "prefix",
get: function get() {
@@ -4006,6 +4074,44 @@ typeof navigator === "object" && (function (global, factory) {
}
};
+ /* function reduceAspectRatio(width, height) {
+ const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
+ const ratio = getRatio(width, height);
+ return `${width / ratio}:${height / ratio}`;
+ } */
+ // Set aspect ratio for responsive container
+
+ function setAspectRatio(input) {
+ var ratio = input;
+
+ if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) {
+ ratio = this.embed.ratio;
+ }
+
+ if (!is.string(ratio)) {
+ ratio = this.config.ratio;
+ }
+
+ var _ratio$split$map = ratio.split(':').map(Number),
+ _ratio$split$map2 = _slicedToArray(_ratio$split$map, 2),
+ x = _ratio$split$map2[0],
+ y = _ratio$split$map2[1];
+
+ var padding = 100 / x * y;
+ this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
+
+ if (this.isVimeo && this.supported.ui) {
+ var height = 240;
+ var offset = (height - padding) / (height / 50);
+ this.media.style.transform = "translateY(-".concat(offset, "%)");
+ }
+
+ return {
+ padding: padding,
+ ratio: ratio
+ };
+ }
+
var Listeners =
/*#__PURE__*/
function () {
@@ -4166,7 +4272,7 @@ typeof navigator === "object" && (function (global, factory) {
// So we only need to worry about non native
- if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) {
+ if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) {
player.fullscreen.toggle();
} // Store last code for next cycle
@@ -4259,9 +4365,11 @@ typeof navigator === "object" && (function (global, factory) {
key: "container",
value: function container() {
var player = this.player;
- var elements = player.elements; // Keyboard shortcuts
+ var config = player.config,
+ elements = player.elements,
+ timers = player.timers; // Keyboard shortcuts
- if (!player.config.keyboard.global && player.config.keyboard.focused) {
+ if (!config.keyboard.global && config.keyboard.focused) {
on.call(player, elements.container, 'keydown keyup', this.handleKey, false);
} // Toggle controls on mouse events and entering fullscreen
@@ -4285,17 +4393,92 @@ typeof navigator === "object" && (function (global, factory) {
} // Clear timer
- clearTimeout(player.timers.controls); // Set new timer to prevent flicker when seeking
+ clearTimeout(timers.controls); // Set new timer to prevent flicker when seeking
- player.timers.controls = setTimeout(function () {
+ timers.controls = setTimeout(function () {
return ui.toggleControls.call(player, false);
}, delay);
+ }); // Force edge to repaint on exit fullscreen
+ // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
+
+ /* if (browser.isEdge) {
+ on.call(player, elements.container, 'exitfullscreen', () => {
+ setTimeout(() => repaint(elements.container), 100);
+ });
+ } */
+ // Set a gutter for Vimeo
+
+ var setGutter = function setGutter(ratio, padding, toggle) {
+ if (!player.isVimeo) {
+ return;
+ }
+
+ var target = player.elements.wrapper.firstChild;
+
+ var _ratio$split$map = ratio.split(':').map(Number),
+ _ratio$split$map2 = _slicedToArray(_ratio$split$map, 2),
+ height = _ratio$split$map2[1];
+
+ var _player$embed$ratio$s = player.embed.ratio.split(':').map(Number),
+ _player$embed$ratio$s2 = _slicedToArray(_player$embed$ratio$s, 2),
+ videoWidth = _player$embed$ratio$s2[0],
+ videoHeight = _player$embed$ratio$s2[1];
+
+ target.style.maxWidth = toggle ? "".concat(height / videoHeight * videoWidth, "px") : null;
+ target.style.margin = toggle ? '0 auto' : null;
+ }; // Resize on fullscreen change
+
+
+ var setPlayerSize = function setPlayerSize(measure) {
+ // If we don't need to measure the viewport
+ if (!measure) {
+ return setAspectRatio.call(player);
+ }
+
+ var rect = elements.container.getBoundingClientRect();
+ var width = rect.width,
+ height = rect.height;
+ return setAspectRatio.call(player, "".concat(width, ":").concat(height));
+ };
+
+ var resized = function resized() {
+ window.clearTimeout(timers.resized);
+ timers.resized = window.setTimeout(setPlayerSize, 50);
+ };
+
+ on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
+ var _player$fullscreen = player.fullscreen,
+ target = _player$fullscreen.target,
+ usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
+
+ if (!player.isEmbed || target !== elements.container) {
+ return;
+ }
+
+ var isEnter = event.type === 'enterfullscreen'; // Set the player size when entering fullscreen to viewport size
+
+ var _setPlayerSize = setPlayerSize(isEnter),
+ padding = _setPlayerSize.padding,
+ ratio = _setPlayerSize.ratio; // Set Vimeo gutter
+
+
+ setGutter(ratio, padding, isEnter); // If not using native fullscreen, we need to check for resizes of viewport
+
+ if (!usingNative) {
+ if (isEnter) {
+ on.call(player, window, 'resize', resized);
+ } else {
+ off.call(player, window, 'resize', resized);
+ }
+ }
});
} // Listen for media events
}, {
key: "media",
value: function media() {
+ var _this = this;
+
var player = this.player;
var elements = player.elements; // Time change on media
@@ -4376,10 +4559,11 @@ typeof navigator === "object" && (function (global, factory) {
}
if (player.ended) {
- player.restart();
- player.play();
+ _this.proxy(event, player.restart, 'restart');
+
+ _this.proxy(event, player.play, 'play');
} else {
- player.togglePlay();
+ _this.proxy(event, player.togglePlay, 'play');
}
});
} // Disable right click
@@ -4454,21 +4638,21 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "bind",
value: function bind(element, type, defaultHandler, customHandlerKey) {
- var _this = this;
+ var _this2 = this;
var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
var player = this.player;
var customHandler = player.config.listeners[customHandlerKey];
var hasCustomHandler = is.function(customHandler);
on.call(player, element, type, function (event) {
- return _this.proxy(event, defaultHandler, customHandlerKey);
+ return _this2.proxy(event, defaultHandler, customHandlerKey);
}, passive && !hasCustomHandler);
} // Listen for control events
}, {
key: "controls",
value: function controls$$1() {
- var _this2 = this;
+ var _this3 = this;
var player = this.player;
var elements = player.elements; // IE doesn't support input event, so we fallback to change
@@ -4477,7 +4661,7 @@ typeof navigator === "object" && (function (global, factory) {
if (elements.buttons.play) {
Array.from(elements.buttons.play).forEach(function (button) {
- _this2.bind(button, 'click', player.togglePlay, 'play');
+ _this3.bind(button, 'click', player.togglePlay, 'play');
});
} // Pause
@@ -4584,7 +4768,7 @@ typeof navigator === "object" && (function (global, factory) {
if (browser.isIos) {
var inputs = getElements.call(player, 'input[type="range"]');
Array.from(inputs).forEach(function (input) {
- return _this2.bind(input, inputEvent, function (event) {
+ return _this3.bind(input, inputEvent, function (event) {
return repaint(event.target);
});
});
@@ -4606,11 +4790,43 @@ typeof navigator === "object" && (function (global, factory) {
this.bind(elements.progress, 'mouseenter mouseleave mousemove', function (event) {
return controls.updateSeekTooltip.call(player, event);
+ }); // Preview thumbnails plugin
+ // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this
+
+ this.bind(elements.progress, 'mousemove touchmove', function (event) {
+ var previewThumbnails = player.previewThumbnails;
+
+ if (previewThumbnails && previewThumbnails.loaded) {
+ previewThumbnails.startMove(event);
+ }
+ }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
+
+ this.bind(elements.progress, 'mouseleave click', function () {
+ var previewThumbnails = player.previewThumbnails;
+
+ if (previewThumbnails && previewThumbnails.loaded) {
+ previewThumbnails.endMove(false, true);
+ }
+ }); // Show scrubbing preview
+
+ this.bind(elements.progress, 'mousedown touchstart', function (event) {
+ var previewThumbnails = player.previewThumbnails;
+
+ if (previewThumbnails && previewThumbnails.loaded) {
+ previewThumbnails.startScrubbing(event);
+ }
+ });
+ this.bind(elements.progress, 'mouseup touchend', function (event) {
+ var previewThumbnails = player.previewThumbnails;
+
+ if (previewThumbnails && previewThumbnails.loaded) {
+ previewThumbnails.endScrubbing(event);
+ }
}); // Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
Array.from(getElements.call(player, 'input[type="range"]')).forEach(function (element) {
- _this2.bind(element, 'input', function (event) {
+ _this3.bind(element, 'input', function (event) {
return controls.updateRangeFill.call(player, event.target);
});
});
@@ -4657,7 +4873,7 @@ typeof navigator === "object" && (function (global, factory) {
toggleClass(elements.controls, config.classNames.noTransition, false);
}, 0); // Delay a little more for mouse users
- var delay = _this2.touch ? 3000 : 4000; // Clear timer
+ var delay = _this3.touch ? 3000 : 4000; // Clear timer
clearTimeout(timers.controls); // Hide again after delay
@@ -5014,16 +5230,6 @@ typeof navigator === "object" && (function (global, factory) {
var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
return url.match(regex) ? RegExp.$2 : url;
- } // Get aspect ratio for dimensions
-
-
- function getAspectRatio(width, height) {
- var getRatio = function getRatio(w, h) {
- return h === 0 ? w : getRatio(h, w % h);
- };
-
- var ratio = getRatio(width, height);
- return "".concat(width / ratio, ":").concat(height / ratio);
} // Set playback state and trigger change (only on actual change)
@@ -5045,7 +5251,7 @@ typeof navigator === "object" && (function (global, factory) {
// Add embed class for responsive
toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio
- vimeo.setAspectRatio.call(this); // Load the API if not already
+ setAspectRatio.call(this); // Load the API if not already
if (!is.object(window.Vimeo)) {
loadScript(this.config.urls.vimeo.sdk).then(function () {
@@ -5057,43 +5263,20 @@ typeof navigator === "object" && (function (global, factory) {
vimeo.ready.call(this);
}
},
- // Set aspect ratio
- // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
- setAspectRatio: function setAspectRatio(input) {
- var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
- _split$map2 = _slicedToArray(_split$map, 2),
- x = _split$map2[0],
- y = _split$map2[1];
-
- var padding = 100 / x * y;
- vimeo.padding = padding;
- this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
-
- if (this.supported.ui) {
- var height = 240;
- var offset = (height - padding) / (height / 50);
- this.media.style.transform = "translateY(-".concat(offset, "%)");
- }
- },
// API Ready
ready: function ready$$1() {
var _this2 = this;
- var player = this; // Get Vimeo params for the iframe
+ var player = this;
+ var config = player.config.vimeo; // Get Vimeo params for the iframe
- var options = {
+ var params = buildUrlParams(extend({}, {
loop: player.config.loop.active,
autoplay: player.autoplay,
- // muted: player.muted,
- byline: false,
- portrait: false,
- title: false,
- speed: true,
- transparent: 0,
+ muted: player.muted,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative
- };
- var params = buildUrlParams(options); // Get the source URL or ID
+ }, config)); // Get the source URL or ID
var source = player.media.getAttribute('src'); // Get from <div> if needed
@@ -5270,8 +5453,12 @@ typeof navigator === "object" && (function (global, factory) {
}); // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
- vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
- vimeo.setAspectRatio.call(_this2, vimeo.ratio);
+ var _dimensions = _slicedToArray(dimensions, 2),
+ width = _dimensions[0],
+ height = _dimensions[1];
+
+ player.embed.ratio = "".concat(width, ":").concat(height);
+ setAspectRatio.call(_this2, player.embed.ratio);
}); // Set autopause
player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5362,24 +5549,6 @@ typeof navigator === "object" && (function (global, factory) {
player.embed.on('error', function (detail) {
player.media.error = detail;
triggerEvent.call(player, player.media, 'error');
- }); // Set height/width on fullscreen
-
- player.on('enterfullscreen exitfullscreen', function (event) {
- var target = player.fullscreen.target; // Ignore for iOS native
-
- if (target !== player.elements.container) {
- return;
- }
-
- var toggle = event.type === 'enterfullscreen';
-
- var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
- _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
- x = _vimeo$ratio$split$ma2[0],
- y = _vimeo$ratio$split$ma2[1];
-
- var dimension = x > y ? 'width' : 'height';
- target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
}); // Rebuild UI
setTimeout(function () {
@@ -5418,7 +5587,7 @@ typeof navigator === "object" && (function (global, factory) {
// Add embed class for responsive
toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set aspect ratio
- youtube.setAspectRatio.call(this); // Setup API
+ setAspectRatio.call(this); // Setup API
if (is.object(window.YT) && is.function(window.YT.Player)) {
youtube.ready.call(this);
@@ -5473,11 +5642,6 @@ typeof navigator === "object" && (function (global, factory) {
}).catch(function () {});
}
},
- // Set aspect ratio
- setAspectRatio: function setAspectRatio() {
- var ratio = this.config.ratio.split(':');
- this.elements.wrapper.style.paddingBottom = "".concat(100 / ratio[0] * ratio[1], "%");
- },
// API ready
ready: function ready$$1() {
var player = this; // Ignore already setup (race condition)
@@ -5526,37 +5690,30 @@ typeof navigator === "object" && (function (global, factory) {
if (!posterSrc.includes('maxres')) {
player.elements.poster.style.backgroundSize = 'cover';
}
- }).catch(function () {}); // Setup instance
+ }).catch(function () {});
+ var config = player.config.youtube; // Setup instance
// https://developers.google.com/youtube/iframe_api_reference
player.embed = new window.YT.Player(id, {
videoId: videoId,
- playerVars: {
+ host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
+ playerVars: extend({}, {
autoplay: player.config.autoplay ? 1 : 0,
// Autoplay
hl: player.config.hl,
// iframe interface language
controls: player.supported.ui ? 0 : 1,
// Only show controls if not fully supported
- rel: 0,
- // No related vids
- showinfo: 0,
- // Hide info
- iv_load_policy: 3,
- // Hide annotations
- modestbranding: 1,
- // Hide logos as much as possible (they still show one in the corner when paused)
disablekb: 1,
// Disable keyboard as we handle it
- playsinline: 1,
+ playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
// Allow iOS inline playback
- // Tracking for stats
- // origin: window ? `${window.location.protocol}//${window.location.host}` : null,
- widget_referrer: window ? window.location.href : null,
// Captions are flaky on YouTube
cc_load_policy: player.captions.active ? 1 : 0,
- cc_lang_pref: player.config.captions.language
- },
+ cc_lang_pref: player.config.captions.language,
+ // Tracking for stats
+ widget_referrer: window ? window.location.href : null
+ }, config),
events: {
onError: function onError(event) {
// YouTube may fire onError twice, so only handle it once
@@ -5855,7 +6012,7 @@ typeof navigator === "object" && (function (global, factory) {
_classCallCheck(this, Ads);
this.player = player;
- this.publisherId = player.config.ads.publisherId;
+ this.config = player.config.ads;
this.playing = false;
this.initialized = false;
this.elements = {
@@ -5922,7 +6079,7 @@ typeof navigator === "object" && (function (global, factory) {
this.listeners(); // Setup the IMA SDK
this.setupIMA();
- } // Build the default tag URL
+ } // Build the tag URL
}, {
key: "setupIMA",
@@ -6091,7 +6248,8 @@ typeof navigator === "object" && (function (global, factory) {
var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated
- var ad = event.getAd(); // Proxy event
+ var ad = event.getAd();
+ var adData = event.getAdData(); // Proxy event
var dispatchEvent = function dispatchEvent(type) {
var event = "ads".concat(type.replace(/_/g, '').toLowerCase());
@@ -6173,6 +6331,13 @@ typeof navigator === "object" && (function (global, factory) {
dispatchEvent(event.type);
break;
+ case google.ima.AdEvent.Type.LOG:
+ if (adData.adError) {
+ this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage()));
+ }
+
+ break;
+
default:
break;
}
@@ -6205,9 +6370,8 @@ typeof navigator === "object" && (function (global, factory) {
this.player.on('ended', function () {
_this8.loader.contentComplete();
});
- this.player.on('seeking', function () {
+ this.player.on('timeupdate', function () {
time = _this8.player.currentTime;
- return time;
});
this.player.on('seeked', function () {
var seekedTime = _this8.player.currentTime;
@@ -6425,11 +6589,18 @@ typeof navigator === "object" && (function (global, factory) {
}, {
key: "enabled",
get: function get() {
- return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+ var config = this.config;
+ return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is.empty(config.publisherId) || is.url(config.tagUrl));
}
}, {
key: "tagUrl",
get: function get() {
+ var config = this.config;
+
+ if (is.url(config.tagUrl)) {
+ return config.tagUrl;
+ }
+
var params = {
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
AV_CHANNELID: '5a0458dc28a06145e4519d21',
@@ -6447,6 +6618,671 @@ typeof navigator === "object" && (function (global, factory) {
return Ads;
}();
+ var parseVtt = function parseVtt(vttDataString) {
+ var processedList = [];
+ var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
+ frames.forEach(function (frame) {
+ var result = {};
+ var lines = frame.split(/\r\n|\n|\r/);
+ lines.forEach(function (line) {
+ if (!is.number(result.startTime)) {
+ // The line with start and end times on it is the first line of interest
+ var matchTimes = line.match(/([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})/); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
+
+ if (matchTimes) {
+ result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0.".concat(matchTimes[4]));
+ result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0.".concat(matchTimes[9]));
+ }
+ } else if (!is.empty(line.trim()) && is.empty(result.text)) {
+ // If we already have the startTime, then we're definitely up to the text line(s)
+ var lineSplit = line.trim().split('#xywh=');
+
+ var _lineSplit = _slicedToArray(lineSplit, 1);
+
+ result.text = _lineSplit[0];
+
+ // If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image
+ if (lineSplit[1]) {
+ var _lineSplit$1$split = lineSplit[1].split(',');
+
+ var _lineSplit$1$split2 = _slicedToArray(_lineSplit$1$split, 4);
+
+ result.x = _lineSplit$1$split2[0];
+ result.y = _lineSplit$1$split2[1];
+ result.w = _lineSplit$1$split2[2];
+ result.h = _lineSplit$1$split2[3];
+ }
+ }
+ });
+
+ if (result.text) {
+ processedList.push(result);
+ }
+ });
+ return processedList;
+ };
+ /**
+ * Preview thumbnails for seek hover and scrubbing
+ * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar
+ * Scrubbing: Click and drag the seek bar (desktop and mobile): shows the preview image over the entire video, as if the video is scrubbing at very high speed
+ *
+ * Notes:
+ * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole
+ * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails
+ * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
+ */
+
+
+ var PreviewThumbnails =
+ /*#__PURE__*/
+ function () {
+ /**
+ * PreviewThumbnails constructor.
+ * @param {Plyr} player
+ * @return {PreviewThumbnails}
+ */
+ function PreviewThumbnails(player) {
+ _classCallCheck(this, PreviewThumbnails);
+
+ this.player = player;
+ this.thumbnails = [];
+ this.loaded = false;
+ this.lastMouseMoveTime = Date.now();
+ this.mouseDown = false;
+ this.loadedImages = [];
+ this.elements = {
+ thumb: {},
+ scrubbing: {}
+ };
+ this.load();
+ }
+
+ _createClass(PreviewThumbnails, [{
+ key: "load",
+ value: function load() {
+ var _this = this;
+
+ // Togglethe regular seek tooltip
+ if (this.player.elements.display.seekTooltip) {
+ this.player.elements.display.seekTooltip.hidden = this.enabled;
+ }
+
+ if (!this.enabled) {
+ return;
+ }
+
+ this.getThumbnails().then(function () {
+ // Render DOM elements
+ _this.render(); // Check to see if thumb container size was specified manually in CSS
+
+
+ _this.determineContainerAutoSizing();
+
+ _this.loaded = true;
+ });
+ } // Download VTT files and parse them
+
+ }, {
+ key: "getThumbnails",
+ value: function getThumbnails() {
+ var _this2 = this;
+
+ return new Promise(function (resolve) {
+ var src = _this2.player.config.previewThumbnails.src;
+
+ if (is.empty(src)) {
+ throw new Error('Missing previewThumbnails.src config attribute');
+ } // If string, convert into single-element list
+
+
+ var urls = is.string(src) ? [src] : src; // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
+
+ var promises = urls.map(function (u) {
+ return _this2.getThumbnail(u);
+ });
+ Promise.all(promises).then(function () {
+ // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
+ _this2.thumbnails.sort(function (x, y) {
+ return x.height - y.height;
+ });
+
+ _this2.player.debug.log('Preview thumbnails', _this2.thumbnails);
+
+ resolve();
+ });
+ });
+ } // Process individual VTT file
+
+ }, {
+ key: "getThumbnail",
+ value: function getThumbnail(url) {
+ var _this3 = this;
+
+ return new Promise(function (resolve) {
+ fetch(url).then(function (response) {
+ var thumbnail = {
+ frames: parseVtt(response),
+ height: null,
+ urlPrefix: ''
+ }; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file
+ // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank
+
+ if (!thumbnail.frames[0].text.startsWith('/')) {
+ thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);
+ } // Download the first frame, so that we can determine/set the height of this thumbnailsDef
+
+
+ var tempImage = new Image();
+
+ tempImage.onload = function () {
+ thumbnail.height = tempImage.naturalHeight;
+ thumbnail.width = tempImage.naturalWidth;
+
+ _this3.thumbnails.push(thumbnail);
+
+ resolve();
+ };
+
+ tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
+ });
+ });
+ }
+ }, {
+ key: "startMove",
+ value: function startMove(event) {
+ if (!this.loaded) {
+ return;
+ }
+
+ if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
+ return;
+ } // Wait until media has a duration
+
+
+ if (!this.player.media.duration) {
+ return;
+ }
+
+ if (event.type === 'touchmove') {
+ // Calculate seek hover position as approx video seconds
+ this.seekTime = this.player.media.duration * (this.player.elements.inputs.seek.value / 100);
+ } else {
+ // Calculate seek hover position as approx video seconds
+ var clientRect = this.player.elements.progress.getBoundingClientRect();
+ var percentage = 100 / clientRect.width * (event.pageX - clientRect.left);
+ this.seekTime = this.player.media.duration * (percentage / 100);
+
+ if (this.seekTime < 0) {
+ // The mousemove fires for 10+px out to the left
+ this.seekTime = 0;
+ }
+
+ if (this.seekTime > this.player.media.duration - 1) {
+ // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video
+ this.seekTime = this.player.media.duration - 1;
+ }
+
+ this.mousePosX = event.pageX; // Set time text inside image container
+
+ this.elements.thumb.time.innerText = formatTime(this.seekTime);
+ } // Download and show image
+
+
+ this.showImageAtCurrentTime();
+ }
+ }, {
+ key: "endMove",
+ value: function endMove() {
+ this.toggleThumbContainer(false, true);
+ }
+ }, {
+ key: "startScrubbing",
+ value: function startScrubbing(event) {
+ // Only act on left mouse button (0), or touch device (event.button is false)
+ if (event.button === false || event.button === 0) {
+ this.mouseDown = true; // Wait until media has a duration
+
+ if (this.player.media.duration) {
+ this.toggleScrubbingContainer(true);
+ this.toggleThumbContainer(false, true); // Download and show image
+
+ this.showImageAtCurrentTime();
+ }
+ }
+ }
+ }, {
+ key: "finishScrubbing",
+ value: function finishScrubbing() {
+ var _this4 = this;
+
+ this.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
+
+ if (Math.ceil(this.lastTime) === Math.ceil(this.player.media.currentTime)) {
+ // The video was already seeked/loaded at the chosen time - hide immediately
+ this.toggleScrubbingContainer(false);
+ } else {
+ // The video hasn't seeked yet. Wait for that
+ once.call(this.player, this.player.media, 'timeupdate', function () {
+ // Re-check mousedown - we might have already started scrubbing again
+ if (!_this4.mouseDown) {
+ _this4.toggleScrubbingContainer(false);
+ }
+ });
+ }
+ }
+ /**
+ * Setup hooks for Plyr and window events
+ */
+
+ }, {
+ key: "listeners",
+ value: function listeners() {
+ var _this5 = this;
+
+ // Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering
+ this.player.on('play', function () {
+ _this5.toggleThumbContainer(false, true);
+ });
+ this.player.on('seeked', function () {
+ _this5.toggleThumbContainer(false);
+ });
+ this.player.on('timeupdate', function () {
+ _this5.lastTime = _this5.player.media.currentTime;
+ });
+ }
+ /**
+ * Create HTML elements for image containers
+ */
+
+ }, {
+ key: "render",
+ value: function render() {
+ // Create HTML element: plyr__preview-thumbnail-container
+ this.elements.thumb.container = createElement('div', {
+ class: this.player.config.classNames.previewThumbnails.thumbContainer
+ }); // Wrapper for the image for styling
+
+ this.elements.thumb.imageContainer = createElement('div', {
+ class: this.player.config.classNames.previewThumbnails.imageContainer
+ });
+ this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer); // Create HTML element, parent+span: time text (e.g., 01:32:00)
+
+ var timeContainer = createElement('div', {
+ class: this.player.config.classNames.previewThumbnails.timeContainer
+ });
+ this.elements.thumb.time = createElement('span', {}, '00:00');
+ timeContainer.appendChild(this.elements.thumb.time);
+ this.elements.thumb.container.appendChild(timeContainer); // Inject the whole thumb
+
+ this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container
+
+ this.elements.scrubbing.container = createElement('div', {
+ class: this.player.config.classNames.previewThumbnails.scrubbingContainer
+ });
+ this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
+ }
+ }, {
+ key: "showImageAtCurrentTime",
+ value: function showImageAtCurrentTime() {
+ var _this6 = this;
+
+ if (this.mouseDown) {
+ this.setScrubbingContainerSize();
+ } else {
+ this.toggleThumbContainer(true);
+ this.setThumbContainerSizeAndPos();
+ } // Find the desired thumbnail index
+ // TODO: Handle a video longer than the thumbs where thumbNum is null
+
+
+ var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
+ return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;
+ });
+ var hasThumb = thumbNum >= 0;
+ var qualityIndex = 0;
+ this.toggleThumbContainer(hasThumb); // No matching thumb found
+
+ if (!hasThumb) {
+ return;
+ } // Check to see if we've already downloaded higher quality versions of this image
+
+
+ this.thumbnails.forEach(function (thumbnail, index) {
+ if (_this6.loadedImages.includes(thumbnail.frames[thumbNum].text)) {
+ qualityIndex = index;
+ }
+ }); // Only proceed if either thumbnum or thumbfilename has changed
+
+ if (thumbNum !== this.showingThumb) {
+ this.showingThumb = thumbNum;
+ this.loadImage(qualityIndex);
+ }
+ } // Show the image that's currently specified in this.showingThumb
+
+ }, {
+ key: "loadImage",
+ value: function loadImage() {
+ var _this7 = this;
+
+ var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+ var thumbNum = this.showingThumb;
+ var thumbnail = this.thumbnails[qualityIndex];
+ var urlPrefix = thumbnail.urlPrefix;
+ var frame = thumbnail.frames[thumbNum];
+ var thumbFilename = thumbnail.frames[thumbNum].text;
+ var thumbUrl = urlPrefix + thumbFilename;
+
+ if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {
+ // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one
+ // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort
+ if (this.loadingImage && this.usingSprites) {
+ this.loadingImage.onload = null;
+ } // We're building and adding a new image. In other implementations of similar functionality (YouTube), background image
+ // is instead used. But this causes issues with larger images in Firefox and Safari - switching between background
+ // images causes a flicker. Putting a new image over the top does not
+
+
+ var previewImage = new Image();
+ previewImage.src = thumbUrl;
+ previewImage.dataset.index = thumbNum;
+ previewImage.dataset.filename = thumbFilename;
+ this.showingThumbFilename = thumbFilename;
+ this.player.debug.log("Loading image: ".concat(thumbUrl)); // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
+
+ previewImage.onload = function () {
+ return _this7.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
+ };
+
+ this.loadingImage = previewImage;
+ this.removeOldImages(previewImage);
+ } else {
+ // Update the existing image
+ this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);
+ this.currentImageElement.dataset.index = thumbNum;
+ this.removeOldImages(this.currentImageElement);
+ }
+ }
+ }, {
+ key: "showImage",
+ value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) {
+ var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+ this.player.debug.log("Showing thumb: ".concat(thumbFilename, ". num: ").concat(thumbNum, ". qual: ").concat(qualityIndex, ". newimg: ").concat(newImage));
+ this.setImageSizeAndOffset(previewImage, frame);
+
+ if (newImage) {
+ this.currentImageContainer.appendChild(previewImage);
+ this.currentImageElement = previewImage;
+
+ if (!this.loadedImages.includes(thumbFilename)) {
+ this.loadedImages.push(thumbFilename);
+ }
+ } // Preload images before and after the current one
+ // Show higher quality of the same frame
+ // Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading
+
+
+ this.preloadNearby(thumbNum, true).then(this.preloadNearby(thumbNum, false)).then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));
+ } // Remove all preview images that aren't the designated current image
+
+ }, {
+ key: "removeOldImages",
+ value: function removeOldImages(currentImage) {
+ var _this8 = this;
+
+ // Get a list of all images, convert it from a DOM list to an array
+ Array.from(this.currentImageContainer.children).forEach(function (image) {
+ if (image.tagName.toLowerCase() !== 'img') {
+ return;
+ }
+
+ var removeDelay = _this8.usingSprites ? 500 : 1000;
+
+ if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {
+ // Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
+ // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
+ image.dataset.deleting = true; // This has to be set before the timeout - to prevent issues switching between hover and scrub
+
+ var currentImageContainer = _this8.currentImageContainer;
+ setTimeout(function () {
+ currentImageContainer.removeChild(image);
+
+ _this8.player.debug.log("Removing thumb: ".concat(image.dataset.filename));
+ }, removeDelay);
+ }
+ });
+ } // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
+ // This will only preload the lowest quality
+
+ }, {
+ key: "preloadNearby",
+ value: function preloadNearby(thumbNum) {
+ var _this9 = this;
+
+ var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+ return new Promise(function (resolve) {
+ setTimeout(function () {
+ var oldThumbFilename = _this9.thumbnails[0].frames[thumbNum].text;
+
+ if (_this9.showingThumbFilename === oldThumbFilename) {
+ // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of sprites, it might be 100+ away
+ var thumbnailsClone;
+
+ if (forward) {
+ thumbnailsClone = _this9.thumbnails[0].frames.slice(thumbNum);
+ } else {
+ thumbnailsClone = _this9.thumbnails[0].frames.slice(0, thumbNum).reverse();
+ }
+
+ var foundOne = false;
+ thumbnailsClone.forEach(function (frame) {
+ var newThumbFilename = frame.text;
+
+ if (newThumbFilename !== oldThumbFilename) {
+ // Found one with a different filename. Make sure it hasn't already been loaded on this page visit
+ if (!_this9.loadedImages.includes(newThumbFilename)) {
+ foundOne = true;
+
+ _this9.player.debug.log("Preloading thumb filename: ".concat(newThumbFilename));
+
+ var urlPrefix = _this9.thumbnails[0].urlPrefix;
+ var thumbURL = urlPrefix + newThumbFilename;
+ var previewImage = new Image();
+ previewImage.src = thumbURL;
+
+ previewImage.onload = function () {
+ _this9.player.debug.log("Preloaded thumb filename: ".concat(newThumbFilename));
+
+ if (!_this9.loadedImages.includes(newThumbFilename)) _this9.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded
+
+ resolve();
+ };
+ }
+ }
+ }); // If there are none to preload then we want to resolve immediately
+
+ if (!foundOne) {
+ resolve();
+ }
+ }
+ }, 300);
+ });
+ } // If user has been hovering current image for half a second, look for a higher quality one
+
+ }, {
+ key: "getHigherQuality",
+ value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) {
+ var _this10 = this;
+
+ if (currentQualityIndex < this.thumbnails.length - 1) {
+ // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container
+ var previewImageHeight = previewImage.naturalHeight;
+
+ if (this.usingSprites) {
+ previewImageHeight = frame.h;
+ }
+
+ if (previewImageHeight < this.thumbContainerHeight) {
+ // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while
+ setTimeout(function () {
+ // Make sure the mouse hasn't already moved on and started hovering at another image
+ if (_this10.showingThumbFilename === thumbFilename) {
+ _this10.player.debug.log("Showing higher quality thumb for: ".concat(thumbFilename));
+
+ _this10.loadImage(currentQualityIndex + 1);
+ }
+ }, 300);
+ }
+ }
+ }
+ }, {
+ key: "toggleThumbContainer",
+ value: function toggleThumbContainer() {
+ var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+ var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ var className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
+ this.elements.thumb.container.classList.toggle(className, toggle);
+
+ if (!toggle && clearShowing) {
+ this.showingThumb = null;
+ this.showingThumbFilename = null;
+ }
+ }
+ }, {
+ key: "toggleScrubbingContainer",
+ value: function toggleScrubbingContainer() {
+ var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+ var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
+ this.elements.scrubbing.container.classList.toggle(className, toggle);
+
+ if (!toggle) {
+ this.showingThumb = null;
+ this.showingThumbFilename = null;
+ }
+ }
+ }, {
+ key: "determineContainerAutoSizing",
+ value: function determineContainerAutoSizing() {
+ if (this.elements.thumb.imageContainer.clientHeight > 20) {
+ // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
+ this.sizeSpecifiedInCSS = true;
+ }
+ } // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
+
+ }, {
+ key: "setThumbContainerSizeAndPos",
+ value: function setThumbContainerSizeAndPos() {
+ if (!this.sizeSpecifiedInCSS) {
+ var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
+ this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
+ this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
+ }
+
+ this.setThumbContainerPos();
+ }
+ }, {
+ key: "setThumbContainerPos",
+ value: function setThumbContainerPos() {
+ var seekbarRect = this.player.elements.progress.getBoundingClientRect();
+ var plyrRect = this.player.elements.container.getBoundingClientRect();
+ var container = this.elements.thumb.container; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
+
+ var minVal = plyrRect.left - seekbarRect.left + 10;
+ var maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
+
+ var previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
+
+ if (previewPos < minVal) {
+ previewPos = minVal;
+ }
+
+ if (previewPos > maxVal) {
+ previewPos = maxVal;
+ }
+
+ container.style.left = "".concat(previewPos, "px");
+ } // Can't use 100% width, in case the video is a different aspect ratio to the video container
+
+ }, {
+ key: "setScrubbingContainerSize",
+ value: function setScrubbingContainerSize() {
+ this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
+
+ this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
+ } // Sprites need to be offset to the correct location
+
+ }, {
+ key: "setImageSizeAndOffset",
+ value: function setImageSizeAndOffset(previewImage, frame) {
+ if (!this.usingSprites) {
+ return;
+ } // Find difference between height and preview container height
+
+
+ var multiplier = this.thumbContainerHeight / frame.h;
+ previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px");
+ previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px");
+ previewImage.style.left = "-".concat(frame.x * multiplier, "px");
+ previewImage.style.top = "-".concat(frame.y * multiplier, "px");
+ }
+ }, {
+ key: "enabled",
+ get: function get() {
+ return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
+ }
+ }, {
+ key: "currentImageContainer",
+ get: function get() {
+ if (this.mouseDown) {
+ return this.elements.scrubbing.container;
+ }
+
+ return this.elements.thumb.imageContainer;
+ }
+ }, {
+ key: "usingSprites",
+ get: function get() {
+ return Object.keys(this.thumbnails[0].frames[0]).includes('w');
+ }
+ }, {
+ key: "thumbAspectRatio",
+ get: function get() {
+ if (this.usingSprites) {
+ return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;
+ }
+
+ return this.thumbnails[0].width / this.thumbnails[0].height;
+ }
+ }, {
+ key: "thumbContainerHeight",
+ get: function get() {
+ if (this.mouseDown) {
+ // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
+ return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+ }
+
+ return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
+ }
+ }, {
+ key: "currentImageElement",
+ get: function get() {
+ if (this.mouseDown) {
+ return this.currentScrubbingImageElement;
+ }
+
+ return this.currentThumbnailImageElement;
+ },
+ set: function set(element) {
+ if (this.mouseDown) {
+ this.currentScrubbingImageElement = element;
+ } else {
+ this.currentThumbnailImageElement = element;
+ }
+ }
+ }]);
+
+ return PreviewThumbnails;
+ }();
+
var source = {
// Add elements to HTML5 media (source, tracks, etc)
insertElements: function insertElements(type, attributes) {
@@ -6566,11 +7402,16 @@ typeof navigator === "object" && (function (global, factory) {
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
// Setup interface
ui.build.call(_this2);
- }
+ } // Load HTML5 sources
+
if (_this2.isHTML5) {
- // Load HTML5 sources
_this2.media.load();
+ } // Reload thumbnails
+
+
+ if (_this2.previewThumbnails) {
+ _this2.previewThumbnails.load();
} // Update the fullscreen support
@@ -6721,7 +7562,7 @@ typeof navigator === "object" && (function (global, factory) {
if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
- this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
+ this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
} else {
this.config.playsinline = true;
}
@@ -6792,7 +7633,9 @@ typeof navigator === "object" && (function (global, factory) {
this.media.plyr = this; // Wrap media
if (!is.element(this.elements.container)) {
- this.elements.container = createElement('div');
+ this.elements.container = createElement('div', {
+ tabindex: 0
+ });
wrap(this.media, this.elements.container);
} // Add style hook
@@ -6830,7 +7673,11 @@ typeof navigator === "object" && (function (global, factory) {
} // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
- this.lastSeekTime = 0;
+ this.lastSeekTime = 0; // Setup preview thumbnails if enabled
+
+ if (this.config.previewThumbnails.enabled) {
+ this.previewThumbnails = new PreviewThumbnails(this);
+ }
} // ---------------------------------------
// API
// ---------------------------------------
@@ -7752,5 +8599,3 @@ typeof navigator === "object" && (function (global, factory) {
return Plyr;
})));
-
-//# sourceMappingURL=plyr.js.map
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-06 15:23:55 +0000