web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-29 11:23:10 +02:00
Code Releases Activity

fix: make the progress bar progress smoothly (#4591)

Browse Source 
Update the position of the seek bar in a 30ms interval and then redraw inside of a requestAnimationFrame.
This commit is contained in:
Vinay 2017-11-07 12:43:50 -08:00 committed by Gary Katsevman
parent c7ad7b31f0
commit acc641a8a2
1 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/js/control-bar/progress-control/seek-bar.js
View File

@ -15,6 +15,9 @@ import './mouse-time-display.js';
// The number of seconds the `step*` functions move the timeline.
const STEP_SECONDS = 5;
// The interval at which the bar should update as it progresses.
const UPDATE_REFRESH_INTERVAL = 30;
/**
* Seek bar and container for the progress bars. Uses {@link PlayProgressBar}
* as its `bar`.
@ -35,10 +38,30 @@ class SeekBar extends Slider {
constructor(player, options) {
super(player, options);
this.update = Fn.throttle(Fn.bind(this, this.update), 50);
this.update = Fn.throttle(Fn.bind(this, this.update), UPDATE_REFRESH_INTERVAL);
this.on(player, 'timeupdate', this.update);
this.on(player, 'ended', this.handleEnded);
// when playing, let's ensure we smoothly update the play progress bar
// via an interval
this.updateInterval = null;
this.on(player, ['playing'], () => {
this.clearInterval(this.updateInterval);
this.updateInterval = this.setInterval(() =>{
this.requestAnimationFrame(() => {
this.update();
});
}, UPDATE_REFRESH_INTERVAL);
});
this.on(player, ['ended', 'pause', 'waiting'], () => {
this.clearInterval(this.updateInterval);
});
this.on(player, ['timeupdate', 'ended'], this.update);
}
/**