Custom TextTrackDisplay components not working in Safari

[anthonyrivas]

Description

When creating and connecting a custom "TextTrackDisplay" component the captions are not showing as expected in Safari on Mac or iOS.

The new element is created but not populated or hidden / unhidden as captions are selected via the controls.

Reduced test case

https://codepen.io/kamikazebot/pen/xxBEeOW

Steps to reproduce

1. Create a player with text tracks available
2. Create a custom captions display using the getComponent method and append it to the page
3. Observe that in non-Webkit browsers captions display both in player, and in the custom element. Observe that in Webkit browsers they are only shown in the player, not the custom element.

Errors

No response

What version of Video.js are you using?

8.9.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Safari 17

What OS(es) and version(s) does this occur with?

Mac Ventura, IOS 16, IOS 17

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[rylanharper]

I am also having major issues with Hls and Safari the past few days as well.. captions included 😵‍💫

[darekkay]

I'm experiencing the same problem. The custom CC/AD tracks are loading fine on macOS Chrome and Firefox, but not on macOS Safari. I went down to version 7.0.0, with no difference, so it's probably not a new issue.

In this VideoJS demo, the CC/AD buttons work as they should, incl. Safari. But checking the properties, there is a difference in the textTracks.length: Chrome reports textTracks.length: 7, Safari reports textTracks.length: 0.

I have fixed the problem for me by following this documentation and disabling native text tracks (after a hint from #8556):

var player = videojs('myvideo', {
  html5: {
    nativeTextTracks: false
  }
});

[bruno-isoardi-kenility]

I'm experiencing the same problem. The custom CC/AD tracks are loading fine on macOS Chrome and Firefox, but not on macOS Safari. I went down to version 7.0.0, with no difference, so it's probably not a new issue.

In this VideoJS demo, the CC/AD buttons work as they should, incl. Safari. But checking the properties, there is a difference in the textTracks.length: Chrome reports textTracks.length: 7, Safari reports textTracks.length: 0.

I have fixed the problem for me by following this documentation and disabling native text tracks (after a hint from #8556):

var player = videojs('myvideo', {
  html5: {
    nativeTextTracks: false
  }
});

I'm having a similar issue: logging cues.length returns 7 on Chrome and 0 on Safari... even when the track object printed in console shows Safari has property length: 6! I tried with the nativeTextTracks: false, but it prints an enormous error log and does nothing in my case. I've been struggling with captions on Safari for weeks: that browser just doesn't seem to work with videojs. While Chrome works perfectly, Safari is not even close to work as expected :(