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.96k stars 2.59k forks source link

Question with loading a different m3u8 source will make the 608 caption button disappear #6606

Open featheast opened 3 months ago

featheast commented 3 months ago

What do you want to do with Hls.js?

We are using hls.js (1.4.X) together with VideoJS (7.18.X) for video playback, and the 2 is based on https://github.com/streamroot/videojs-hlsjs-plugin.

The question is about dynamically switch source via code, causing issues when sources have 608/708 closed captions.

Assume there are 2 sources available, source 1 and source 2. When the player initially loaded with source 1, the playback is fine, the caption selector loaded fine within the control bar, and caption renders fine within the player.

If the code logic to change the playback source from 1 to 2 via code similar as: player.src({ "src": url, "type": mimeType, });

The player will be using source 2, the playback is fine, it can also remember the caption choice prior so if the caption was on before it will be still on, and vice versa, with the previous selected language. The problem is the caption selector button now no longer available in the control bar, which stops viewers from changing the caption later on.

What have you tried so far?

I have tried my best to identify if the issue is actually related to hls.js, or within the scope of VideoJS, but I don't really have a conclusion so far. What I can definitely see is upon calling the player.src() method, both the old hls.js and videojs instances disposed, which is expected.

However, for the event "addtrack" which I believe achieve the purpose of loading caption button, is not triggered afterwards.

It will be great to get some guidance here as where to look into the issue, and thanks in advance.

robwalch commented 3 months ago

If you reuse the same video element, then existing text tracks will be reused for the same language. This is because there is no method to remove a track.

However, for the event "addtrack" which I believe achieve the purpose of loading caption button, is not triggered afterwards.

This sounds like an issue with videojs-hlsjs-plugin. Replacing the video element when loading a new src may be one way to work around it.

robwalch commented 3 months ago

It looks like even when hls.js reuses a TextTrack it tries to dispatch "addTrack" from the video element to address this issue (createNativeTrack (existingTrack === true) > sendAddTrackEvent):

https://github.com/video-dev/hls.js/blob/22481fb3e8ed6726cca8565deb69630236c088ea/src/controller/timeline-controller.ts#L225-L243

https://github.com/video-dev/hls.js/blob/22481fb3e8ed6726cca8565deb69630236c088ea/src/utils/texttrack-utils.ts#L3-L13

robwalch commented 3 months ago

Hi @featheast. Were you able to resolve this issue on your end?

featheast commented 1 month ago

Sorry didn't notice your reply earlier, and only found out when I am about to create another issue report (caption related as well). I did try to debug following the way you have suggested, but haven't really find out a workaround yet.