Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
featheast opened this issue Aug 2, 2024 · 2 comments
Open

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

featheast opened this issue Aug 2, 2024 · 2 comments
Labels
Question Third-party issue

Comments

@featheast
Copy link

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.
@featheast featheast added Needs Triage If there is a suspected stream issue, apply this label to triage if it is something we should fix. Question labels Aug 2, 2024
@robwalch
Copy link
Collaborator

robwalch commented Aug 2, 2024

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 robwalch removed the Needs Triage If there is a suspected stream issue, apply this label to triage if it is something we should fix. label Aug 2, 2024
@robwalch
Copy link
Collaborator

robwalch commented Aug 2, 2024 •
edited
Loading

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):

hls.js/src/controller/timeline-controller.ts

Lines 225 to 243 in 22481fb

private createNativeTrack(trackName: string) {
if (this.captionsTracks[trackName]) {
return;
}
const { captionsProperties, captionsTracks, media } = this;
const { label, languageCode } = captionsProperties[trackName];
// Enable reuse of existing text track.
const existingTrack = this.getExistingTrack(trackName);
if (!existingTrack) {
const textTrack = this.createTextTrack('captions', label, languageCode);
if (textTrack) {
// Set a special property on the track so we know it's managed by Hls.js
textTrack[trackName] = true;
captionsTracks[trackName] = textTrack;
}
} else {
captionsTracks[trackName] = existingTrack;
clearCurrentCues(captionsTracks[trackName]);
sendAddTrackEvent(captionsTracks[trackName], media as HTMLMediaElement);

hls.js/src/utils/texttrack-utils.ts

Lines 3 to 13 in 22481fb

export function sendAddTrackEvent(track: TextTrack, videoEl: HTMLMediaElement) {
let event: Event;
try {
event = new Event('addtrack');
} catch (err) {
// for IE11
event = document.createEvent('Event');
event.initEvent('addtrack', false, false);
}
(event as any).track = track;
videoEl.dispatchEvent(event);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Question Third-party issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@robwalch @featheast