search

video-dev / hls.js

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
https://hlsjs.video-dev.org/demo
Other
14.65k stars 2.56k forks source link

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

Open dmail opened 1 year ago

dmail commented 1 year ago

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

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 commented 1 year ago

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 https://github.com/video-dev/hls.js/issues/5303.

robwalch commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

robwalch commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

dmail commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Akifumiiida commented 1 year ago

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 commented 1 year ago

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

Akifumiiida commented 1 year ago

@dmail,

Thanks for the information.

dmail commented 1 year ago

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

papan01 commented 1 year ago

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 commented 1 year ago

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

robwalch commented 1 year ago

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 commented 1 year ago

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 )