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'
});
}