Video pauses itself when 2 tabs are opened on the same stream

[dmail]

Edit:

This bug is on browser side, likely introduced by https://developer.chrome.com/blog/media-updates-in-chrome-63-64/#background-video-track-optimizations
Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1432833
Firefox bug tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1828431

What version of Hls.js are you using?

1.3.4

What browser (including version) are you using?

Chrome android 111.0.5563.58

What OS (including version) are you using?

Android 10

Test stream

https://hls-js-73965559-fca4-40e5-9cde-d90859bfc224.netlify.app/demo/?src=https%3A%2F%2Fmoctobpltc-i.akamaihd.net%2Fhls%2Flive%2F571329%2Feight%2Fplaylist.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Use an android device, or an android device emulator
2. Open google chrome
3. Navigate to https://hls-js-73965559-fca4-40e5-9cde-d90859bfc224.netlify.app/demo/?src=https%3A%2F%2Fmoctobpltc-i.akamaihd.net%2Fhls%2Flive%2F571329%2Feight%2Fplaylist.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==
4. Play the video
5. Open a new tab on the same url
6. Play the video

Expected behaviour

Video plays normally in the second tab

What actually happened?

Video pauses by itself. When playing, it plays a few video fragments and pause by itself again.

Console output

Buffer stalled error

Chrome media internals output

No response

[dmail]

Reproductible with HLS 0.14.0.
Reproductible with a VOD.
Reproductible without any "buffer staled error" in logs.
Reproductible on Firefox android.
Not reproductible on chrome Desktop.
May be related to #5303.

[robwalch]

Sounds like it could be an Android Chrome issue. Have you tried reporting this to Google?

There's nothing in HLS.js that interacts with multiple tabs in browser directly.

[dmail]

I can reproduce as well on Firefox android by the way.
I'll open an issue on Google Monday to see what they have to say about it.

[robwalch]

Can you provide complete console log output from a session that displaying this issue (one for each tab)?

[robwalch]

I have noticed that live playlist refresh is delayed after level switch. It doesn't match what you've described but it could result in stalls if a lot of live level switching occurs on start (unless the live stream uses low latency blocking reload).

[robwalch]

Hi @dmail,

I created #5317 which addresses the reload delay after level switch. Can you take a look and let me know if it improves the behavior you are seeing?

[robwalch]

#5317 has been merged. You can test the changes on dev at https://hlsjs-dev.video-dev.org/demo/

• Live reload level switch and error handling improvements #5317

[dmail]

Hello, I have just tried hls demo page on my android with v1.3.5-0.canary.8996. Unfortunately the video is sill pausing itself when there is 2 tabs opened.

https://hlsjs-dev.video-dev.org/demo/?src=https%3A%2F%2Fmoctobpltc-i.akamaihd.net%2Fhls%2Flive%2F571329%2Feight%2Fplaylist.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

[dmail]

More info:

1. Cannot reproduce with 2 video tags in a single tab

Codepen
https://codepen.io/dmail/pen/poOxGmb

Seps to reproduce

1. Open codepen on an android browser (chrome or firefox)
2. Play first video
3. Play second video

Result

Both videos are playing normally

Notes

The bug can be reproduced by opening a second tab on the same codepen

2. Destroying hls and loading an other m3u8 does not fix

Codepen

https://codepen.io/dmail/pen/WNgamxw

Seps to reproduce

1. Open codepen on an android browser (chrome or firefox)
2. Play video
3. Open a second tab on that codepen
4. Play video in the second tab
5. Observe the bug (video will shortly pause by itself)
6. Click Load VOD m3u8 button (under the hood it will destroy hls + attach a new hls to the video tag)

Result

The VOD loads and starts to play.
After a short time, max a few seconds, video pauses itself

3. Does not happen with mp4

Playing the same mp4 url in two tabs works fine (video play in the second tab, it does not pause itself)

[robwalch]

Which tab does it pause in? Can you clarify?

I would expect a majority of mobile devices or browsers to only allow one active media source for audio, otherwise you would hear strange mixes of audio when backgrounding apps or tabs.

If the background tab is playing and the foreground is pausing, that is odd, but still an Android issue and not an HLS.js issue.

[dmail]

Unfortunately it's the foreground tab that is pausing. I'll open an issue on chrome tracker and link it here

[Akifumiiida]

Is there any progress on this case?
I am also having trouble with the same situation.

I have also looked for chrome tracker but could not find the corresponding issue.

If you have found another solution, I would like to know how to do that.
If you have not found a solution, I would like to know what happened after that.

By the way, when I fall into the event reported by @dmail, even native apps such as Youtube App and Spotify App play for a few seconds and stop playing on their own.

Translated with www.DeepL.com/Translator (free version)

[dmail]

Issue opened on chromium at https://bugs.chromium.org/p/chromium/issues/detail?id=1432833

[Akifumiiida]

@dmail,

Thanks for the information.

[dmail]

Bug opened on firefox too at https://bugzilla.mozilla.org/show_bug.cgi?id=1828431

[papan01]

Is there any progress on this case? I am also having trouble with the same situation.

I have also looked for chrome tracker but could not find the corresponding issue.

If you have found another solution, I would like to know how to do that. If you have not found a solution, I would like to know what happened after that.

By the way, when I fall into the event reported by @dmail, even native apps such as Youtube App and Spotify App play for a few seconds and stop playing on their own.

Translated with www.DeepL.com/Translator (free version)

I have same issue on Android, when play the streaming, other native apps or new tab player are auto paused.

When I destory hls player and stay on my production tab(Chrome browser), then switch to youtube and play any video that will auto pause. But when I switch to other tab, youtube could play normally.

[dioramayuanito]

https://developer.chrome.com/blog/media-updates-in-chrome-63-64/#background-video-track-optimizations

[robwalch]

From https://bugs.chromium.org/p/chromium/issues/detail?id=1432833

The root issue is that the duration changing is activating the media session of the background tab even though it is paused.

HLS.js updates the duration as new segments are parsed and appended whose duration exceed their playlist duration. The chromium issue acknowledges that this is something MSE players do commonly. It is not something that HLS.js should have to change.

The duration is updated as necessary as media is streamed to ensure that after the last segment is appended, when played to the end, the video can end correctly (rather than stall), loop if set to do so, all while providing an accurate duration for the media appended. And that's just for VOD. With live the duration and seekable range are constantly updated unless liveDurationInfinity is enabled. Even if HLS.js only used playlist duration, for VOD there would still be at least one duration update once the source is closed after the last segents are appended and the stream is marked as ended.

There is a way to workaround this issue. If the media is paused and the tab backgrounded (visibilitychange event), hls.stopLoad() can be called to stop network activity. When the tab is foregrounded, use hls.startLoad() to resume network activity. Suspending the loading of segments will ultimately prevent the update of media.duration.

[tahirQaiser]

In a Vue.js application, I have logic to open HLS Video Streaming same video in two different browser tabs simultaneously. How would this functionality translate when converting the application into an Android application? Can the concept of 'new tabs' exist in an Android WebView? ( Considering same vuejs code is converted to Android App )

I'm actually able to reproduce the error even when it's opened in Android application ( Where I feel there is no concept of tabs )