Custom TextTrackDisplay components not working in Safari about video.js

[welcome]

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