No tracks in Safari

[ksheurs]

I am trying to upgrade to 4.12.2 (from 4.10.2) and finding subtitles are not working in Safari. Below are the two issues I am seeing:

On Safari desktop (v 6.0.5) there are no specific JavaScript errors, they just seem to silently not load. I am able to reproduce on www.videojs.com.

On Safari iOS they properly show in the native menu (http://cl.ly/image/0M180Y0t2Y3n), but selecting them does nothing. The only way I've been able to get subtitles working on iOS is to not initialize VideoJS and rely on native video + crossorigin="anonymous" on the video tag.

[gkatsev]

Hm... safari 6 I think has some issues with running vtt files natively. You also need to make sure that captions are enabled at the OS-level.
The crossorigin issue is something that we need to fix but yes, that is the workaround.

[ksheurs]

Any idea why subtitles would be working in Safari for VideoJS version 4.10.2?

[gkatsev]

We changed the way we're doing captions in 4.12. Unfortunately, we don't have a safari 6 desktop device to test with.

[heff]

I can confirm that captions do not work in iOS on videojs.com. Shouldn't that work now?

[gkatsev]

It fell through the crack. Opened a new issue for the work needed to be done: #1941. The workaround is to add the attribute yourself.

[gkatsev]

This is because #1888 hasn't been implemented.

[EZWrighter]

Wanted to add a note on this in Safari, I got captions working, but they display under the control bar by default. Which normally wouldn't be an issue if the controlbar disappears on mouse out, but in my case I needed to have the controlbar present all the time.

[heff]

Could we style the shadow dom and make the captions move
up when the controls are showing?

On Tue, Apr 21, 2015 at 12:07 PM, Eric Zimmerman notifications@github.com
wrote:

Wanted to add a note on this in Safari, I got captions working, but they
display under the control bar by default. Which normally wouldn't be an
issue if the controlbar disappears on mouse out, but in my case I needed to
have the controlbar present all the time.

—
Reply to this email directly or view it on GitHub
#1904 (comment).

[EZWrighter]

Thanks for the idea Heff, but I don't think that will work on newer safari. Which is the place it is having problems. Tested safari 5 and the captions display in the right place. Safari 6 they display under the control bar. I know Safari removed a lot of the shadow dom functionality in newer releases.

[EZWrighter]

Ok...I tested Safari 6 and got the captions above controls with this css:

video::-webkit-media-text-track-container { bottom: 1.5em; }

makes it look a little higher in chrome on my machine, but an ok compromise.

Still need to check how this looks in Safari 5 though. I will update after testing.

[heff]

I know Safari removed a lot of the shadow dom functionality in newer releases

Wow, lame.

[EZWrighter]

A quick update on this in Safari 5,6,8...the shadow dom CSS hack works fine to make captions display in an acceptable location in those browsers. I do only use this CSS in Safari.

[heff]

Nice. Want to make a PR to add that?

On Fri, Apr 24, 2015 at 2:20 PM, Eric Zimmerman notifications@github.com
wrote:

A quick update on this in Safari 5,6,8...the shadow dom CSS hack works
fine to make captions display in an acceptable location in those browsers.
I do only use this CSS in Safari.

—
Reply to this email directly or view it on GitHub
#1904 (comment).

[gkatsev]

So, we've decided that the best course of action is for users to either load in the text tracks from the same domain as the page its hosted on or to also enable CORS for the video files themselves and then add the crossorigin attribute themselves. See #1888 for the details around it.
Going to close this now since there isn't anything we're going to do directly for this issue and there's #1888.
The safari/chrome shadow dom thing should go into another issue.