web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-04 06:48:49 +02:00
Code Releases Activity

fix: clear progress control related rAFs when tab is hidden (#7099)

Browse Source 
The progress control is updated inside of requestAnimationFrames (rAFs). Normally, this is fine. However, when a tab is hidden, rAFs are generally not triggered. So, what happens is that we get a cached rAF from the last time the tab was active. When we come back to be active, we update again, but because we already have a named rAF, we don't clear it out and instead that one gets triggered. This isn't an issue if the video is still playing, because in a second, another rAF will be triggered which will update things. However, if the video has ended, we won't get any more updated and the progress bar will still be in the old position.

Instead, when the document becomes hidden, we should clear out both the SeekBar#update and the Slider#update rAFs. Doing just one, unfortunately, isn't enough. In addition, we also only re-enable the interval if we aren't ended or paused and ignore the update method if the tab is hidden.

Fixes #7086
This commit is contained in:
Gary Katsevman 2021-02-18 09:58:40 -05:00 committed by GitHub
parent 948fd2c26a
commit 134f039573
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,10 +73,14 @@ class SeekBar extends Slider {
}
toggleVisibility_(e) {
if (document.hidden) {
if (document.visibilityState === 'hidden') {
this.cancelNamedAnimationFrame('SeekBar#update');
this.cancelNamedAnimationFrame('Slider#update');
this.disableInterval_(e);
} else {
this.enableInterval_();
if (!this.player_.ended() && !this.player_.paused()) {
this.enableInterval_();
}
// we just switched back to the page and someone may be looking, so, update ASAP
this.update();
@ -131,6 +135,11 @@ class SeekBar extends Slider {
* The current percent at a number from 0-1
*/
update(event) {
// ignore updates while the tab is hidden
if (document.visibilityState === 'hidden') {
return;
}
const percent = super.update();
this.requestNamedAnimationFrame('SeekBar#update', () => {