Html5 video track data uri

Question

I want to set <track src to a "data:" URI.

<video>
    <source src="http://the.othersite/foo.mp4">
    <track src="data:text/vtt,WEBVTT">
</video>

However, I get

Cross-origin text track load denied by Cross-Origin Resource Sharing policy.

The error occurs in both Chrome and Safari.

If I set track src to "/foo.vtt", it works. The "Origin" of Data URI is not the current page uri?

Jsfiddle example here. (Look at the error output in the Console.)

Is this a 16 month old question? why would someone edit this — krzysiej, Dec 12 '14 at 12:23
@krzysiej Because SE is not a forum. It's a question and answer site! — v010dya, Apr 25 '15 at 13:00

score 0 · Answer 1 · answered Jul 07 '16 at 22:38

Browser support for setting the track data via data URIs appears to be incomplete and buggy. Here is a list of bug reports for each browser.

Firefox appears to support setting track directly in the HTML using base64 encoded data URIs (jsfiddle). Updating the track src via JavaScript appears to work but doesn't appear to affect that actual track data that is in use.

If you really need to update the track data via JavaScript, you can manually parse the WEBVTT text and add it a Cue at-a-time. This page describes all the methods that don't work for including VTT data directly in the page and gives an example of parsing and Cue loading at the end.

Html5 video track data uri

1 Answers1