aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/plyr.js353
1 files changed, 203 insertions, 150 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index c34a1070..d3fc3648 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.5.21
+// plyr.js v1.6.1
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -39,6 +39,7 @@
duration: null,
displayDuration: true,
iconPrefix: 'icon',
+ iconUrl: '',
clickToPlay: true,
hideControls: true,
tooltips: {
@@ -60,10 +61,13 @@
rewind: '[data-plyr="rewind"]',
forward: '[data-plyr="fast-forward"]',
mute: '[data-plyr="mute"]',
- volume: '[data-plyr="volume"]',
captions: '[data-plyr="captions"]',
fullscreen: '[data-plyr="fullscreen"]'
},
+ volume: {
+ input: '[data-plyr="volume"]',
+ display: '.plyr__volume--display'
+ },
progress: {
container: '.plyr__progress',
buffer: '.plyr__progress--buffer',
@@ -332,7 +336,7 @@
// Remove an element
function _remove(element) {
- if(!element) {
+ if (!element) {
return;
}
element.parentNode.removeChild(element);
@@ -393,58 +397,40 @@
return false;
}
- // Debounce
- // deBouncer by hnldesign.nl
- // based on code by Paul Irish and the original debouncing function from John Hann
- // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
- function _debounce(func, threshold, execAsap) {
- var timeout;
- return function debounced () {
- var obj = this, args = arguments;
- function delayed () {
- if (!execAsap) {
- func.apply(obj, args);
- }
- timeout = null;
- }
- if (timeout) {
- clearTimeout(timeout);
- }
- else if (execAsap) {
- func.apply(obj, args);
- }
- timeout = setTimeout(delayed, threshold || 100);
- };
- }
-
// Bind event
- function _on(element, events, callback) {
+ function _on(element, events, callback, useCapture) {
if (element) {
- _toggleListener(element, events, callback, true);
+ _toggleListener(element, events, callback, true, useCapture);
}
}
// Unbind event
- function _off(element, events, callback) {
+ function _off(element, events, callback, useCapture) {
if (element) {
- _toggleListener(element, events, callback, false);
+ _toggleListener(element, events, callback, false, useCapture);
}
}
// Bind along with custom handler
- function _proxyListener(element, eventName, userListener, defaultListener) {
+ function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
_on(element, eventName, function(event) {
- if(userListener) {
+ if (userListener) {
userListener.apply(element, [event]);
}
defaultListener.apply(element, [event]);
- });
+ }, useCapture);
}
// Toggle event listener
- function _toggleListener(element, events, callback, toggle) {
+ function _toggleListener(element, events, callback, toggle, useCapture) {
var eventList = events.split(' ');
+ // Whether the listener is a capturing listener or not
+ // Default to false
+ if (typeof useCapture !== 'boolean') {
+ useCapture = false;
+ }
+
// If a nodelist is passed, call itself on each node
if (element instanceof NodeList) {
for (var x = 0; x < element.length; x++) {
@@ -457,14 +443,14 @@
// 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, useCapture);
}
}
// Trigger event
function _triggerEvent(element, eventName, properties) {
// Bail if no element
- if(!element || !eventName) {
+ if (!element || !eventName) {
return;
}
@@ -479,7 +465,7 @@
// http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
function _toggleState(target, state) {
// Bail if no target
- if(!target) {
+ if (!target) {
return;
}
@@ -505,15 +491,15 @@
// Removed call to arguments.callee (used explicit function name instead)
function _extend() {
// Get arguments
- var objects = arguments;
+ var objects = arguments;
// Bail if nothing to merge
- if(!objects.length) {
+ if (!objects.length) {
return;
}
// Return first if specified but nothing to merge
- if(objects.lenth == 1) {
+ if (objects.lenth == 1) {
return objects[0];
}
@@ -614,15 +600,15 @@
function _storage() {
var storage = {
supported: (function() {
- if(!('localStorage' in window)) {
- return false;
- }
+ if (!('localStorage' in window)) {
+ return false;
+ }
- // Try to use it (it might be disabled, e.g. user is in private/porn mode)
+ // Try to use it (it might be disabled, e.g. user is in private/porn mode)
// see: https://github.com/Selz/plyr/issues/131
- try {
+ try {
// Add test item
- window.localStorage.setItem('___test', 'OK');
+ window.localStorage.setItem('___test', 'OK');
// Get the test item
var result = window.localStorage.getItem('___test');
@@ -632,12 +618,12 @@
// Check if value matches
return (result === 'OK');
- }
- catch (e) {
- return false;
- }
+ }
+ catch (e) {
+ return false;
+ }
- return false;
+ return false;
})()
};
return storage;
@@ -662,13 +648,14 @@
// Build the default HTML
function _buildControls() {
// Create html array
- var html = [];
+ var html = [],
+ iconPath = config.iconUrl + '#' + config.iconPrefix;
// Larger overlaid play button
if (_inArray(config.controls, 'play-large')) {
html.push(
'<button type="button" data-plyr="play" class="plyr__play-large">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>'
);
@@ -680,7 +667,7 @@
if (_inArray(config.controls, 'restart')) {
html.push(
'<button type="button" data-plyr="restart">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
'</button>'
);
@@ -690,7 +677,7 @@
if (_inArray(config.controls, 'rewind')) {
html.push(
'<button type="button" data-plyr="rewind">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
'</button>'
);
@@ -701,11 +688,11 @@
if (_inArray(config.controls, 'play')) {
html.push(
'<button type="button" data-plyr="play">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>',
'<button type="button" data-plyr="pause">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
'</button>'
);
@@ -715,7 +702,7 @@
if (_inArray(config.controls, 'fast-forward')) {
html.push(
'<button type="button" data-plyr="fast-forward">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
'</button>'
);
@@ -727,9 +714,7 @@
html.push('<span class="plyr__progress">',
'<label for="seek{id}" class="plyr__sr-only">Seek</label>',
'<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
- '<progress class="plyr__progress--played" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.played,
- '</progress>',
+ '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
'<progress class="plyr__progress--buffer" max="100" value="0">',
'<span>0</span>% ' + config.i18n.buffered,
'</progress>');
@@ -767,8 +752,8 @@
if (_inArray(config.controls, 'mute')) {
html.push(
'<button type="button" data-plyr="mute">',
- '<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>',
+ '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
'</button>'
);
@@ -777,8 +762,11 @@
// Volume range control
if (_inArray(config.controls, 'volume')) {
html.push(
- '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
- '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
+ '<span class="plyr__volume">',
+ '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
+ '<input id="volume{id}" class="plyr__volume--input" type="range" min="0" max="10" value="5" data-plyr="volume">',
+ '<progress class="plyr__volume--display" max="10" value="0" role="presentation"></progress>',
+ '</span>'
);
}
@@ -786,8 +774,8 @@
if (_inArray(config.controls, 'captions')) {
html.push(
'<button type="button" data-plyr="captions">',
- '<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>',
+ '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
+ '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
'</button>'
);
@@ -797,8 +785,8 @@
if (_inArray(config.controls, 'fullscreen')) {
html.push(
'<button type="button" data-plyr="fullscreen">',
- '<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>',
+ '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
'</button>'
);
@@ -958,7 +946,7 @@
index = 0;
// Incase caption numbers are added
- if(parts[index].indexOf(":") === -1) {
+ if (parts[index].indexOf(":") === -1) {
index = 1;
}
@@ -993,12 +981,12 @@
container.innerHTML = '';
// Default to empty
- if(typeof caption === 'undefined') {
+ if (typeof caption === 'undefined') {
caption = '';
}
// Set the span content
- if(typeof caption === 'string') {
+ if (typeof caption === 'string') {
content.innerHTML = caption.trim();
}
else {
@@ -1185,7 +1173,7 @@
if (config.selectors.controls.container !== null) {
container = config.selectors.controls.container;
- if(typeof selector === 'string') {
+ if (typeof selector === 'string') {
container = document.querySelector(container);
}
}
@@ -1227,10 +1215,8 @@
plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
// Inputs
- plyr.buttons.volume = _getElement(config.selectors.buttons.volume);
plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
- plyr.checkboxes = _getElements('[type="checkbox"]');
// Progress
plyr.progress = {};
@@ -1242,15 +1228,15 @@
plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
// Progress - Played
- plyr.progress.played = {};
- plyr.progress.played.bar = _getElement(config.selectors.progress.played);
- plyr.progress.played.text = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0];
+ plyr.progress.played = _getElement(config.selectors.progress.played);
// Seek tooltip
- plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
+ plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
// Volume
- plyr.volume = _getElement(config.selectors.buttons.volume);
+ plyr.volume = {};
+ plyr.volume.input = _getElement(config.selectors.volume.input);
+ plyr.volume.display = _getElement(config.selectors.volume.display);
// Timing
plyr.duration = _getElement(config.selectors.duration);
@@ -1276,7 +1262,7 @@
// Toggle native controls
function _toggleNativeControls(toggle) {
- if(toggle) {
+ if (toggle) {
plyr.media.setAttribute('controls', '');
}
else {
@@ -1421,7 +1407,7 @@
});
// If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo
- if(plyr.supported.full) {
+ if (plyr.supported.full) {
container.appendChild(iframe);
plyr.media.appendChild(container);
}
@@ -1674,7 +1660,7 @@
plyr.media.buffered = data.percent;
_triggerEvent(plyr.media, 'progress');
- if(parseInt(data.percent) === 1) {
+ if (parseInt(data.percent) === 1) {
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
@@ -1755,7 +1741,7 @@
plyr.media.buffered = data.loadProgress;
_triggerEvent(plyr.media, 'progress');
- if(parseInt(data.loadProgress) === 1) {
+ if (parseInt(data.loadProgress) === 1) {
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
@@ -1775,14 +1761,14 @@
// Play media
function _play() {
- if('play' in plyr.media) {
+ if ('play' in plyr.media) {
plyr.media.play();
}
}
// Pause media
function _pause() {
- if('pause' in plyr.media) {
+ if ('pause' in plyr.media) {
plyr.media.pause();
}
}
@@ -1847,6 +1833,11 @@
targetTime = duration;
}
+ // Update progress
+ if (plyr.progress && plyr.progress.played) {
+ plyr.progress.played.value = ((100 / duration) * targetTime);
+ }
+
// Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try {
@@ -1855,7 +1846,7 @@
catch(e) {}
// Embeds
- if(_inArray(config.types.embed, plyr.type)) {
+ if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch(plyr.type) {
case 'youtube':
@@ -1868,7 +1859,7 @@
break;
case 'soundcloud':
- plyr.embed.seekTo(targetTime*1000);
+ plyr.embed.seekTo(targetTime * 1000);
break;
}
@@ -1949,7 +1940,7 @@
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
// Trap focus
- if(plyr.isFullscreen) {
+ if (plyr.isFullscreen) {
plyr.container.setAttribute('tabindex', '-1');
}
else {
@@ -1987,8 +1978,13 @@
// Set mute on the player
plyr.media.muted = muted;
+ // If volume is 0 after unmuting, set to default
+ if (plyr.media.volume === 0) {
+ _setVolume(config.volume);
+ }
+
// Embeds
- if(_inArray(config.types.embed, plyr.type)) {
+ if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch(plyr.type) {
case 'youtube':
@@ -2025,7 +2021,7 @@
}
// Use config if all else fails
- if(volume === null || isNaN(volume)) {
+ if (volume === null || isNaN(volume)) {
volume = config.volume;
}
@@ -2041,11 +2037,13 @@
// Set the player volume
plyr.media.volume = parseFloat(volume / 10);
- // Store in config
- config.volume = volume;
+ // Set the display
+ if (plyr.volume.display) {
+ plyr.volume.display.value = volume;
+ }
// Embeds
- if(_inArray(config.types.embed, plyr.type)) {
+ if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch(plyr.type) {
case 'youtube':
@@ -2077,8 +2075,13 @@
var volume = plyr.media.muted ? 0 : (plyr.media.volume * 10);
// Update the <input type="range"> if present
- if (plyr.supported.full && plyr.volume) {
- plyr.volume.value = volume;
+ if (plyr.supported.full) {
+ if (plyr.volume.input) {
+ plyr.volume.input.value = volume;
+ }
+ if (plyr.volume.display) {
+ plyr.volume.display.value = volume;
+ }
}
// Store the volume in storage
@@ -2135,8 +2138,8 @@
// Update <progress> elements
function _updateProgress(event) {
- var progress = plyr.progress.played.bar,
- text = plyr.progress.played.text,
+ var progress = plyr.progress.played,
+ text = false,
value = 0,
duration = _getDuration();
@@ -2154,32 +2157,27 @@
break;
- // Events from seek range
- case 'change':
- case 'input':
- value = event.target.value;
- break;
-
-
// Check buffer status
case 'playing':
case 'progress':
progress = plyr.progress.buffer.bar;
text = plyr.progress.buffer.text;
value = (function() {
- var buffered = plyr.media.buffered;
+ var buffered = plyr.media.buffered;
- // HTML5
- if (buffered && buffered.length) {
- return _getPercentage(buffered.end(0), duration);
- }
- // YouTube returns between 0 and 1
- else if (typeof buffered === 'number') {
- return (buffered * 100);
- }
+ // HTML5
+ if (buffered && buffered.length) {
+ return _getPercentage(buffered.end(0), duration);
+ }
+ // YouTube returns between 0 and 1
+ else if (typeof buffered === 'number') {
+ return (buffered * 100);
+ }
+
+ return 0;
+ })();
- return 0;
- })();
+ break;
}
}
@@ -2248,7 +2246,7 @@
_updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
// Ignore updates while seeking
- if(event && event.type == 'timeupdate' && plyr.media.seeking) {
+ if (event && event.type == 'timeupdate' && plyr.media.seeking) {
return;
}
@@ -2259,7 +2257,7 @@
// Update hover tooltip for seeking
function _updateSeekTooltip(event) {
// Bail if setting not true
- if (!config.tooltips.seek || plyr.browser.touch) {
+ if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) {
return;
}
@@ -2270,7 +2268,7 @@
// Determine percentage, if already visible
if (!event) {
- if(_hasClass(plyr.progress.tooltip, visible)) {
+ if (_hasClass(plyr.progress.tooltip, visible)) {
percent = plyr.progress.tooltip.style.left.replace('%', '');
}
else {
@@ -2297,7 +2295,7 @@
// Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds
- if(event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
+ if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
_toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
}
}
@@ -2307,16 +2305,28 @@
if (!config.hideControls || plyr.type === 'audio') {
return;
}
- var delay = false,
+ var delay = 0,
isEnterFullscreen = false,
show = toggle;
// Default to false if no boolean
- if(typeof toggle !== "boolean") {
- if(toggle && toggle.type) {
- delay = (toggle.type === 'mousemove');
+ if (typeof toggle !== "boolean") {
+ if (toggle && toggle.type) {
+ // Is the enter fullscreen event
isEnterFullscreen = (toggle.type === 'enterfullscreen');
- show = _inArray(['mousemove','mouseenter'], toggle.type);
+
+ // Whether to show controls
+ show = _inArray(['mousemove', 'mouseenter', 'focus'], toggle.type);
+
+ // Delay hiding on mousemove events
+ if (toggle.type === 'mousemove') {
+ delay = 2000;
+ }
+
+ // Delay a little more for keyboard users
+ if (toggle.type === 'focus') {
+ delay = 3000;
+ }
}
else {
show = false;
@@ -2327,33 +2337,33 @@
window.clearTimeout(plyr.timers.hover);
// If the mouse is not over the controls, set a timeout to hide them
- if(show || plyr.media.paused) {
+ if (show || plyr.media.paused) {
_toggleClass(plyr.container, config.classes.hideControls, false);
// Always show controls when paused
- if(plyr.media.paused) {
+ if (plyr.media.paused) {
return;
}
}
// If toggle is false or if we're playing (regardless of toggle), then
// set the timer to hide the controls
- if(!show || !plyr.media.paused) {
+ if (!show || !plyr.media.paused) {
plyr.timers.hover = window.setTimeout(function() {
- // If the mouse is over the controls, bail
- if(plyr.controls.active && !isEnterFullscreen) {
+ // If the mouse is over the controls (and not entering fullscreen), bail
+ if (plyr.controls.active && !isEnterFullscreen) {
return;
}
_toggleClass(plyr.container, config.classes.hideControls, true);
- }, delay ? 2000 : 0);
+ }, delay);
}
}
// Add common function to retrieve media source
function _source(source) {
// If not null or undefined, parse it
- if(typeof source !== 'undefined') {
+ if (typeof source !== 'undefined') {
_updateSource(source);
return;
}
@@ -2397,9 +2407,12 @@
_pause();
// Set seek input to 0
- if(plyr.buttons.seek) {
+ if (plyr.buttons && plyr.buttons.seek) {
plyr.buttons.seek.value = 0;
}
+ if (plyr.progress && plyr.progress.played) {
+ plyr.progress.played.value = 0;
+ }
// Clean up YouTube stuff
if (plyr.type === 'youtube') {
@@ -2429,10 +2442,10 @@
plyr.type = source.type;
// Get child type for video (it might be an embed)
- if(plyr.type === 'video') {
+ if (plyr.type === 'video') {
var firstSource = source.sources[0];
- if('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
+ if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
plyr.type = firstSource.type;
}
}
@@ -2552,14 +2565,22 @@
var trigger = plyr.buttons[play ? 'play' : 'pause'],
target = plyr.buttons[play ? 'pause' : 'play'];
+ // Get the last play button to account for the large play button
+ if (target && target.length > 1) {
+ target = target[target.length - 1];
+ }
+ else {
+ target = target[0];
+ }
+
// Setup focus and tab focus
- if(target) {
+ if (target) {
var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
setTimeout(function() {
target.focus();
- if(hadTabFocus) {
+ if (hadTabFocus) {
_toggleClass(trigger, config.classes.tabFocus, false);
_toggleClass(target, config.classes.tabFocus, true);
}
@@ -2570,6 +2591,7 @@
// Detect tab focus
function checkFocus() {
var focused = document.activeElement;
+
if (!focused || focused == document.body) {
focused = null;
}
@@ -2579,7 +2601,14 @@
for (var button in plyr.buttons) {
var element = plyr.buttons[button];
- _toggleClass(element, config.classes.tabFocus, (element === focused));
+ if (element instanceof NodeList) {
+ for (var i = 0; i < element.length; i++) {
+ _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
+ }
+ }
+ else {
+ _toggleClass(element, config.classes.tabFocus, (element === focused));
+ }
}
}
_on(window, 'keyup', function(event) {
@@ -2619,8 +2648,8 @@
_proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
// Set volume
- _proxyListener(plyr.volume, inputEvent, config.listeners.volume, function() {
- _setVolume(plyr.volume.value);
+ _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
+ _setVolume(plyr.volume.input.value);
});
// Mute
@@ -2642,14 +2671,16 @@
// Toggle controls visibility based on mouse movement
if (config.hideControls) {
- _on(plyr.container, 'mouseenter mouseleave mousemove', _toggleControls);
- //_on(plyr.container, 'mousemove', _debounce(_toggleControls, 200, true));
- _on(plyr.container, 'enterfullscreen', _toggleControls);
+ // Toggle controls on mouse events and entering fullscreen
+ _on(plyr.container, 'mouseenter mouseleave mousemove 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');
});
+
+ // Focus in/out on controls
+ _on(plyr.controls, 'focus blur', _toggleControls, true);
}
}
@@ -2688,11 +2719,20 @@
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Click video
- if (config.clickToPlay) {
+ if (config.clickToPlay && plyr.type !== 'audio') {
+ // Re-fetch the wrapper
+ var wrapper = _getElement('.' + config.classes.videoWrapper);
+
+ // Bail if there's no wrapper (this should never happen)
+ if (!wrapper) {
+ return;
+ }
+
// Set cursor
- plyr.videoContainer.style.cursor = "pointer";
+ wrapper.style.cursor = "pointer";
- _on(plyr.media, 'click', function() {
+ // On click play, pause ore restart
+ _on(wrapper, 'click', function() {
if (plyr.media.paused) {
_play();
}
@@ -2715,7 +2755,7 @@
// Cancel current network requests
// See https://github.com/Selz/plyr/issues/174
function _cancelRequests() {
- if(!_inArray(config.types.html5, plyr.type)) {
+ if (!_inArray(config.types.html5, plyr.type)) {
return;
}
@@ -2793,7 +2833,17 @@
plyr.browser = _browserSniff();
// Get the media element
- plyr.media = plyr.container.querySelectorAll('audio, video, div')[0];
+ plyr.media = plyr.container.querySelectorAll('audio, video')[0];
+
+ // Get the div placeholder for YouTube and Vimeo
+ if (!plyr.media) {
+ plyr.media = plyr.container.querySelectorAll('div')[0];
+ }
+
+ // Bail if nothing to setup
+ if (!plyr.media) {
+ return;
+ }
// Get original classname
plyr.originalClassName = plyr.container.className;
@@ -2868,6 +2918,9 @@
// Remove controls
_remove(_getElement(config.selectors.controls.wrapper));
+ // Remove large play
+ _remove(_getElement(config.selectors.buttons.play));
+
// Restore native controls
_toggleNativeControls(true);
@@ -3031,7 +3084,7 @@
var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr")));
// Bail if not enabled
- if(!config.enabled) {
+ if (!config.enabled) {
return;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-19 10:03:48 +0000