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

[featheast]

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]

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]

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

[robwalch]

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