ARIA and Vimeo fixes
This commit is contained in:
20
src/js/controls.js
vendored
20
src/js/controls.js
vendored
@ -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,
|
||||
),
|
||||
|
@ -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', () => {
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user