video.js icon indicating copy to clipboard operation
video.js copied to clipboard

Captions added dynamically via addTextTrack and addCue do not display in Safari.

Open peranderson opened this issue 8 years ago • 3 comments

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

  1. Add a
  2. Init via Videojs.
  3. Dynamically add a text track.
  4. Dynamically add a cue.
  5. 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 element sourced to an external WebVTT file.

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.

peranderson avatar Dec 14 '16 01:12 peranderson

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.

peranderson avatar Dec 17 '16 03:12 peranderson

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.

mkalygin avatar Sep 14 '17 11:09 mkalygin

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?

tsi avatar Dec 12 '23 12:12 tsi