Fix subtitle track selection when reusing media element with mismatched TextTracks

[robwalch]

This PR will...

Use subtitle track name and language to find and match subtitle/captions TextTrack rather than subtitleTrack index.

Logs a warning when loading a new source with subtitle options that do not completely overlap with the attached media element's existing TextTracks:

Media element contains unused subtitle tracks: {TRACK LABEL CSVs}.
Replace media element for each source to clear TextTracks and captions menu.

Default subtitle track selection is updated to pick first default | forced | autoselect track to more closely match default behavior with Safari HLS playback.

If the user sets hls.audioTrack to a valid index on AUDIO_TRACKS_UPDATED, that selection will not be replaced with the default audio track immediately after (similar to existing initial subtitle track selection logic).

Why is this Pull Request needed?

Lack of removeTextTrack in HTMLMediaElement standard (whatwg/html#1921).

Are there any points in the code the reviewer needs to double check?

Resolves issues:

Resolves #4571
Replaces #5371

Checklist

• changes have been done against master branch, and PR does not conflict
• new unit / functional tests have been added (whenever applicable)
• API or design changes are documented in API.md

[robwalch]

Hi @JudithDu,

Let me know how this fix works for you.

Keep in mind that if you are using HTMLMediaElement controls, you really should replace the video element when loading a new source that could have a different list of captions and subtitle options. If you are using your own controls, consider setting renderTextTracksNatively to false and using the API events to list subtitle options along with something like VTT.js to render them.

[JudithDu]

Hi @robwalch,
Thanks for the quick fix! 🙏
I tested it but encoutered a bug related to the function toggleTrackModes
In my manifest, the subtitles are defined like this
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subtitles",ASSOC-LANGUAGE="fr",NAME="Français (autogenerated)" ...
I have a ASSOC-LANGUAGE but no LANGUAGE (those 2 attributes are optionnal)
In the toggleTrackModes function you test track.language === lang which returns false so the subtitles aren't returned.
As the name is the only attribute required here, couldn't it be enough to test track.label === name?

[robwalch]

HI @JudithDu,

I have a ASSOC-LANGUAGE but no LANGUAGE (those 2 attributes are optionnal)
In the toggleTrackModes function you test track.language === lang which returns false so the subtitles aren't returned.
As the name is the only attribute required here, couldn't it be enough to test track.label === name?

Ah! Language is optional in HLS and the hls.js track, but not on HTMLMediaElement TextTracks. I just pushed a change that will handle empty TextTrack language, and also makes the name and language comparison case-insensitive.

While I was there I found some inconsistencies in initial track selection and made some updates to more closely match the initial default/forced/autoselect choice made when playing HLS in Safari.

[JudithDu]

Hello @robwalch
I just tested and it works perfectly fine on my side 👌
Thank you for your work! 🙏