Regression starting with 1.2.1 -- Captions no longer show up

[dstreet26]

What version of Hls.js are you using?

1.1.5 but we want to upgrade to 1.3.4

What browser (including version) are you using?

Chrome 110

What OS (including version) are you using?

Windows 10

Test stream

https://kids.video.cdn.pbs.org/videos/wild-kratts/4d11149b-b667-4cd9-8d8f-4700749cf24f/271221/hd-1080p-mezzanine-16x9/5fd29d63_wilk303-ep-r_m1080-16x9-hls-400-2500k_421.m3u8

Configuration

{}

Additional player setup steps

No response

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 (latest release) on https://hls-js.netlify.com/demo and not just on my page
  - *currently down
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
  - *canary might be broken right now
• 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. Run permalink demo for v.1.2.0
2. Turn on "English" captions

---

1. Run permalink demo for v.1.2.1
2. Turn on "English" captions

---

v1.2.0
https://hls-js-bbdf933d-da48-407d-aaf3-68cc4ee058e7.netlify.app/demo/?src=https%3A%2F%2Fkids.video.cdn.pbs.org%2Fvideos%2Fwild-kratts%2F4d11149b-b667-4cd9-8d8f-4700749cf24f%2F271221%2Fhd-1080p-mezzanine-16x9%2F5fd29d63_wilk303-ep-r_m1080-16x9-hls-400-2500k_421.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

v1.2.1
https://hls-js-c682795c-032a-4c39-9374-225b776c04f6.netlify.app/demo/?src=https%3A%2F%2Fkids.video.cdn.pbs.org%2Fvideos%2Fwild-kratts%2F4d11149b-b667-4cd9-8d8f-4700749cf24f%2F271221%2Fhd-1080p-mezzanine-16x9%2F5fd29d63_wilk303-ep-r_m1080-16x9-hls-400-2500k_421.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Expected behaviour

Captions show up on screen and are available on the video's textTracks

What actually happened?

Captions are not showing up and are not accessible on the video element :(

I bisected it to this commit: 9e1a3aa

Our manifest does contain: CHARACTERISTICS="public.accessibility.describes-music-and-sound,public.accessibility.transcribes-spoken-dialog" for what it's worth.

Console output

N/A

Chrome media internals output

No response

[mtoczko]

Hi @dstreet26
Here is the bug:

hls.js/src/controller/subtitle-track-controller.ts

Line 428 in 3da6904

if (track.kind === 'subtitles' && track.label) {

    if ((track.kind === 'subtitles' || track.kind === 'captions' ) && track.label) {

[robwalch]

Here is the bug:

Thanks for the catch. Care to submit the fix as a PR?

It looks like the regression was introduced with #4850 where the track type is set to "captions" or "subtitles" based on the HLS CHARACTERISTICS attribute value in order to match TextTrack behavior with native HLS playback in Safari.

[dstreet26]

I implemented that change on master and it worked great. Thanks for the quick response!

I can make a PR for the fix that mtoczko posted.

[dstreet26]

@robwalch PR is up! Please let me know if there's anything else needed for the PR (like if I need to add reviewers or if tests are required for this fix)