video.js
video.js copied to clipboard
Captions added dynamically via addTextTrack and addCue do not display in Safari.
Description
Captions do not display when dynamically added using addTextTrack and addCue via Javascript in Safari. Chrome and Firefox work properly. https://jsfiddle.net/4utd9bwo/3/
Steps to reproduce
- Add a
- Init via Videojs.
- Dynamically add a text track.
- Dynamically add a cue.
- Play the video.
Results
Expected
I expect to see the caption displayed.
Actual
Track and cues are added to the native video object but captions are not displayed on screen.
Error output
No errors reported to the console.
Additional Information
Captions do work properly in Safari if and only if you add them by the
versions
videojs
5.8.8 in the fiddle. I'm currently using 5.13.2. Neither work.
browsers
I have Safari 10.0.1
OSes
OSX 10.10.5
plugins
None.
Safari requires at least one track element to be present. To fix this issue I simply added a default track with an empty.vtt file as the source. Once I did that, I could programmatically add cues and add other tracks via the API.
For those who has issues with tracks in Safari, make sure you have default
attribute set on one of the tracks. Without it Safari doesn't load vtt
file at all.
It seems like the original fiddle now works as expected. But I get the same issue with an up-to-date version of video.js Original fiddle with video.js 5.8.8 - https://jsfiddle.net/4utd9bwo/3/ text-track shows in Safari with video.js 8.7.0 - https://jsfiddle.net/tsish/dqseLznr/ text-track won't display in Safari Any hints? Am I missing something?