WebVTT subtitles broken when calling loadSource(..) inside MEDIA_ATTACHED-Event

[netTrekfd]

What version of Hls.js are you using?

The bug initially appeared in 0.14.8 and is reproducable in every release since then.

What browser and OS are you using?

Chrome and Firefox (latest) on macOS 10.15.5 and windows 10, but does not seam to be OS or browser related.

Test stream:

https://zdfhls20-i.akamaihd.net/hls/live/744753/none/high/master.m3u8

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 on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client 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. Go to https://clients.nettrek.de/hlsjs/demo/?src=https%3A%2F%2Fzdfhls20-i.akamaihd.net%2Fhls%2Flive%2F744753%2Fnone%2Fhigh%2Fmaster.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImR1bXBmTVA0IjpmYWxzZSwibGV2ZWxDYXBwaW5nIjotMSwibGltaXRNZXRyaWNzIjotMX0= built from the current master and updated the main.js as follows:

hls.attachMedia(video);    
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  hls.loadSource(url);
}

2. Select a captions track using the video controls
3. Click play
4. Observe vtt segments are not loaded in the network panel / timeline

Expected behavior

According to the API it should be ok to call hls.loadSource(...) inside the Hls.Events.MEDIA_ATTACHED event.
Subtitles should be showing up.

Actual behavior

Subtitles are not showing up, regardless which subtitle track is being selected.

Console output

The console output does not show up any errors.

[robwalch]

Hi @netTrekfd,

Do you ever call hls.startLoad()? Doing this following loadSource should fix the issue until a patch is made (or just load the manifest while the media is attaching - isn't that more performant?)

I don't know if your setup depends on config.autoStartLoad behavior and when that kicks in prior to and after the changes on #2909, or if you were calling it prior to loadSource.

[netTrekfd]

Hi @robwalch,
thanks for your quick reply!

Indeed our own setup is relying on config.autoStartLoad. The hls.startLoad(pos) is being called inside the Hls.Events.MANIFEST_PARSED event. Calling hls.startLoad(-1) following or before calling loadSource does not fix this issue.
We also tested different scenarios with config.autoStartLoad enabled or disabled, all without affect. The only way to workaround (or probably a good idea in general) is to call attachMedia and loadSource right inside the same callstack (the order does not matter).

[robwalch]

Thanks @netTrekfd,

Could you make the "Steps to reproduce" a little clearer? Example:

1. Go to https://clients.nettrek.de/hlsjs/demo/?src=https%3A%2F%2Fzdfhls20-i.akamaihd.net%2Fhls%2Flive%2F744753%2Fnone%2Fhigh%2Fmaster.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImR1bXBmTVA0IjpmYWxzZSwibGV2ZWxDYXBwaW5nIjotMSwibGltaXRNZXRyaWNzIjotMX0=
   built from the current master and updated the main.js as follows:

hls.attachMedia(video);    
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  hls.loadSource(url);
}

2. Select a captions track using the video controls
3. Click play
4. Observe vtt segments are not loaded in the network panel / timeline

I didn't realize you included a test page. Thank you. I can reproduce the issue.

[robwalch]

Looks like this issue is in subtitle-stream-controller. It only starts its tick interval in onSubtitleTrackLoaded and has no override for startLoad to restart the interval. So basically you can't call stopLoad and startLoad without breaking this controller. Sorry my change exposed that. Have a look at startLoad in audio-stream-controller. The elements of what we need to add to subtitle-stream-controller can be found there.

[netTrekfd]

Thanks @robwalch for your feedback, i updated the issue accordingly. I will have a look at the subtitle-stream-controller and prepare a fix.

[netTrekfd]

Hi @robwalch,

i just added a PR for this issue.

During my tests i found another issue related to the loading behaviour which was a little bit tricky to reproduce. Actually it only occurred in about 5% of all tests and depends on network speed/latency (it was easier to reproduce via LTE) and general system performance. The problem is, that the last loaded fragment was saved correctly ( this.fragPrevious ) to keep up the right order of loading the webvtt files, but was not resetted in case of media seeking. If the initial load starts the subtitle controller to load it's webvtt-file before seeking to the live position, the error occurs. As the fragPrevious reference was not deleted, the subtitle controller continued to load webvtt-files from the very beginning of the dvr window instead of the one related to the current position. I fixed this by also calling stopLoad() and startLoad() inside the seeking and seekend event and was not able to reproduce it afterwards.

I luckily was able to record it: https://clients.nettrek.de/hlsjs/issue3053.mp4

This is fixed with this commit: netTrekfd@2736608
Do you think it's better to add a separate issue for this?

Thanks!

[robwalch]

Hi @netTrekfd,

Great catch! I left you some feedback in the fix PR #3063 (comment)