diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/js/controls.js | 20 | ||||
-rw-r--r-- | src/js/plugins/vimeo.js | 13 | ||||
-rw-r--r-- | src/js/plyr.js | 4 |
3 files changed, 30 insertions, 7 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index 05d98bab..ce4c17ee 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -15,10 +15,7 @@ const browser = utils.getBrowser(); const controls = { // Webkit polyfill for lower fill range updateRangeFill(target) { - // WebKit only - if (!browser.isWebkit) { - return; - } + // Get range from event if event passed const range = utils.is.event(target) ? target.target : target; @@ -28,6 +25,14 @@ const controls = { return; } + // Set aria value for https://github.com/sampotts/plyr/issues/905 + range.setAttribute('aria-valuenow', range.value); + + // WebKit only + if (!browser.isWebkit) { + return; + } + // Set CSS custom property range.style.setProperty('--value', `${range.value / range.max * 100}%`); }, @@ -238,6 +243,7 @@ const controls = { 'label', { for: attributes.id, + id: `${attributes.id}-label`, class: this.config.classNames.hidden, }, i18n.get(type, this.config), @@ -255,6 +261,12 @@ const controls = { step: 0.01, value: 0, autocomplete: 'off', + // A11y fixes for https://github.com/sampotts/plyr/issues/905 + role: 'slider', + 'aria-labelledby': `${attributes.id}-label`, + 'aria-valuemin': 0, + 'aria-valuemax': 100, + 'aria-valuenow': 0, }, attributes, ), diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index a250d096..24003d3f 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -134,7 +134,9 @@ const vimeo = { utils.dispatchEvent.call(player, player.media, 'seeking'); // Seek after events - player.embed.setCurrentTime(time); + player.embed.setCurrentTime(time).catch(() => { + // Do nothing + }); // Restore pause state if (paused) { @@ -320,6 +322,15 @@ const vimeo = { if (parseInt(data.percent, 10) === 1) { utils.dispatchEvent.call(player, player.media, 'canplaythrough'); } + + // Get duration as if we do it before load, it gives an incorrect value + // https://github.com/sampotts/plyr/issues/891 + player.embed.getDuration().then(value => { + if (value !== player.media.duration) { + player.media.duration = value; + utils.dispatchEvent.call(player, player.media, 'durationchange'); + } + }); }); player.embed.on('seeked', () => { diff --git a/src/js/plyr.js b/src/js/plyr.js index 181b4bf3..fe8049e1 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -452,7 +452,7 @@ class Plyr { } // Set - this.media.currentTime = parseFloat(targetTime.toFixed(4)); + this.media.currentTime = targetTime; // Logging this.debug.log(`Seeking to ${this.currentTime} seconds`); @@ -498,7 +498,7 @@ class Plyr { */ get duration() { // Faux duration set via config - const fauxDuration = parseInt(this.config.duration, 10); + const fauxDuration = parseFloat(this.config.duration); // True duration const realDuration = this.media ? Number(this.media.duration) : 0; |