diff --git a/src/js/control-bar/progress-control/load-progress-bar.js b/src/js/control-bar/progress-control/load-progress-bar.js index 2b7971d8c..07a55e1d9 100644 --- a/src/js/control-bar/progress-control/load-progress-bar.js +++ b/src/js/control-bar/progress-control/load-progress-bar.js @@ -35,7 +35,7 @@ class LoadProgressBar extends Component { createEl() { return super.createEl('div', { className: 'vjs-load-progress', - innerHTML: `${this.localize('Loaded')}: 0%` + innerHTML: `${this.localize('Loaded')}: 0%` }); } @@ -59,18 +59,28 @@ class LoadProgressBar extends Component { const duration = liveTracker.isLive() ? liveTracker.seekableEnd() : this.player_.duration(); const bufferedEnd = this.player_.bufferedEnd(); const children = this.partEls_; + const controlTextPercentage = this.$('.vjs-control-text-loaded-percentage'); // get the percent width of a time compared to the total end - const percentify = function(time, end) { + const percentify = function(time, end, rounded) { // no NaN - const percent = (time / end) || 0; + let percent = (time / end) || 0; - return ((percent >= 1 ? 1 : percent) * 100) + '%'; + percent = (percent >= 1 ? 1 : percent) * 100; + + if (rounded) { + percent = percent.toFixed(2); + } + + return percent + '%'; }; // update the width of the progress bar this.el_.style.width = percentify(bufferedEnd, duration); + // update the control-text + Dom.textContent(controlTextPercentage, percentify(bufferedEnd, duration, true)); + // add child elements to represent the individual buffered time ranges for (let i = 0; i < buffered.length; i++) { const start = buffered.start(i); diff --git a/src/js/control-bar/progress-control/play-progress-bar.js b/src/js/control-bar/progress-control/play-progress-bar.js index a9fe86520..53283f09f 100644 --- a/src/js/control-bar/progress-control/play-progress-bar.js +++ b/src/js/control-bar/progress-control/play-progress-bar.js @@ -22,8 +22,9 @@ class PlayProgressBar extends Component { */ createEl() { return super.createEl('div', { - className: 'vjs-play-progress vjs-slider-bar', - innerHTML: `${this.localize('Progress')}: 0%` + className: 'vjs-play-progress vjs-slider-bar' + }, { + 'aria-hidden': 'true' }); } diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js index 0b2e42bfc..2f00fc043 100644 --- a/src/js/control-bar/progress-control/time-tooltip.js +++ b/src/js/control-bar/progress-control/time-tooltip.js @@ -21,6 +21,8 @@ class TimeTooltip extends Component { createEl() { return super.createEl('div', { className: 'vjs-time-tooltip' + }, { + 'aria-hidden': 'true' }); }