Html5视频轨道数据uri

Question

我想将<track src设置为“data：”URI。

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

然而，我得到了

  

跨源资源共享策略拒绝跨源文本跟踪加载。

Chrome和Safari都会出错。

如果我将track src设置为“/foo.vtt”，它就可以了。数据URI的“Origin”不是当前页面uri？

Jsfiddle example here.（查看控制台中的错误输出。）

Answer 1

通过数据URI设置轨道数据的浏览器支持似乎是不完整和错误的。 Here是每个浏览器的错误报告列表。

Firefox似乎支持使用base64编码数据URI（jsfiddle）直接在HTML中设置跟踪。通过JavaScript更新曲目src似乎有效，但似乎不会影响正在使用的实际曲目数据。

如果您确实需要通过JavaScript更新曲目数据，您可以手动解析WEBVTT文本并一次添加一个Cue。 This页面描述了直接在页面中包含VTT数据不起作用的所有方法，并给出了最后解析和Cue加载的示例。