Background tab muted hangs after few minutes

misiek08 commented 1 year ago

Description

Setup basic live HLS+DASH player (I use it with DRM, but probably doesn't matter), start player muted and go to another tab. After 5+ minutes come back to this tab. Player will be downloading segments that passed and will report after while errors with each of the ABR playlists.

Looks very similar to https://github.com/videojs/http-streaming/issues/1196.

I think this is related to browsers killing chained timers in JS when tab is in background. Chrome is stopping such timers after 5 minutes by default. Probably global setInterval or requestAnimationFrame is a workaround.

I've tried plugin that is watching visibilitychange event and pausing player on leaving tab and then calling play()/currentTime(0) after coming back to tab again - seemed like it works, but it only prolonged the issue to 10+ minutes.

Sources

Doesn't matter, live HLS+DASH, with ABR should do.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

Start muted player with HLS+DASH ABR playlists. EDIT: it happens very easily with DASH playlists with $Number$ template
Leave the tab in background for 5+ minutes.
Come back to player tab.

Results

Expected

Player still working correctly.

Error output

VIDEOJS: WARN: Problem encountered with playlist 0-placeholder-uri-0. Playlist no longer updating. Switching to playlist 3-placeholder-uri-3. [player.js:226:49](https://static.hawecdn.com/hp/player.js)
VIDEOJS: WARN: Problem encountered with playlist 3-placeholder-uri-3. Playlist no longer updating. Switching to playlist 2-placeholder-uri-2. [player.js:226:49](https://static.hawecdn.com/hp/player.js)
VIDEOJS: WARN: Problem encountered with playlist 2-placeholder-uri-2. Excessive audio segment downloading detected. Switching to playlist 1-placeholder-uri-1. [player.js:226:49](https://static.hawecdn.com/hp/player.js)
VIDEOJS: WARN: Removing other playlists from the exclusion list because the last rendition is about to be excluded. [player.js:226:49](https://static.hawecdn.com/hp/player.js)
VIDEOJS: WARN: Problem encountered with playlist 1-placeholder-uri-1. Playlist no longer updating. Switching to playlist 0-placeholder-uri-0. [player.js:226:49](https://static.hawecdn.com/hp/player.js)
VIDEOJS: WARN: Problem encountered with playlist 0-placeholder-uri-0. Excessive main segment downloading detected. Switching to playlist 3-placeholder-uri-3.

Additional Information

After returning to the tab player is downloading all old video segments (for a few seconds it tried to download audio, but after returning above errors it is just following video segments). I've tested currentTime(0) and now liveTracker.seekToLiveEdge() - they are not helping.

videojs version

what version of videojs does this occur with? video.js 8.0.4

Browsers

newest Chrome and Firefox - really doesn't matter

Platforms

what platforms are affected? please include operating system and version or device and version for each

Windows and MacOS tested

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

contrib-eme 5.0.1

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

it happens with and without jQuery - used for getting DRM keys in one case

welcome[bot] commented 1 year ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

Essk commented 1 year ago

Thanks for the report! I wasn't able to reproduce but I think it would be interesting to know if the issue persists if the user overrides the "performance" setting of the browser.

lqminh268 commented 3 months ago

Hello, have you found a solution yet? I'm facing a similar issue when playing an m3u8 link. When I switch to another tab, Video.js only requests the m3u8 file but doesn't request any TS files. It only makes the request when I return to the tab, but it shows a rather annoying loading screen. :(

misiek08 commented 1 week ago

The only solution we had is to detect muted player and just force src() to reset whole player. Currently migrated to shaka, because video.js is getting worse every day, especially VHS was too unstable :(

videojs / http-streaming