Cannot load VTT subtitles using custom manifest

[AKPWebDesign]

Website Problem

Please confirm whether you've tried the following debugging steps:

• Clearing cache and refreshing the page (On Firefox, press Ctrl+F5. On Chrome, press F12, then right click the refresh button and click "Empty Cache and Hard Reload")
• Disabling all browser extensions
• Using a clean channel with no customizations

Description of the Problem

• What triggers the problem? Adding a custom file manifest containing VTT subtitles.
• What happens? No subtitles can be shown, error in browser console.
• What do you expect to happen instead? To be able to use subtitles with my video.

System Information

• Operating System (Windows / Mac / Linux / Android / iOS): Windows 10
• Web Browser (Firefox / Chrome / Other): Chrome 60
• Error Messages Displayed:

Text track from origin 'https://akpwebdesign.com' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'https://cytu.be' is therefore not allowed access.

• Screenshot of JavaScript Console: https://i.imgur.com/fW3oUpi.png

Note: You can use the manifest I have for Sintel located on my server at https://akpwebdesign.com/wow/such/video/manifest.json

[calzoneman]

Please refer to the documentation:

By default, browsers block requests for WebVTT tracks hosted on different domains than the current page. In order for text tracks to work cross-origin, the Access-Control-Allow-Origin header needs to be set by the remote server when serving the VTT file. See MDN for more information about setting this header.

[calzoneman]

Interesting, I used your test link and it works fine on Firefox but not on Chromium. I guess they implement the spec slightly differently with respect to cross-origin-ness. Removing expected behavior tag, this needs investigation. Damn it google.

[calzoneman]

I'm seeing sites claiming that Chrome requires the crossorigin attribute on the <video> tag, but adding that seems to break the playback entirely.

[AKPWebDesign]

The closest thing I can find about the topic is videojs/video.js#1888:

More info: This is because native text tracks with VTT files on other origins require crossorigin="anonymous" on the video element to work but in some browsers if the crossorigin attribute is set but the video (mp4 in chrome, for example) doesn't have CORS headers set up as well then the video will fail.

When I attempt to access the .vtt files on my server, the CORS headers show up properly, but not when I attempt to access the .mp4 file, so it's very possible that this is an issue with the config of my server. I'm taking a closer look at that now.

[AKPWebDesign]

I fixed whatever issue with my server config was causing the CORS headers not to be properly sent with .mp4 files. The issue still persists with cytu.be.

[calzoneman]

Well, cytu.be still isn't setting crossorigin so that's expected on Chrome I suppose. I'll have to debug it locally and see what's going on.

[calzoneman]

It works locally after clearing my cache. So I guess the crossorigin attribute will need to be added for custom media and the docs will have to be updated accordingly. Probably the attribute should only be added for videos with text tracks because as you've discovered above it can cause issues with the video.

The nuclear option would be to mirror text tracks to avoid the crossorigin issue altogether.

[calzoneman]

I had pushed out some other broken changes to beta so I haven't been able to release this yet. I'll look into reviewing any remaning bugs tonight for a deployment, otherwise I can patch this live since it's a small clientside change.

[calzoneman]

Confirmed your test link is working now on live.