Html5视频跟踪数据uri

Question

我希望将<track src设置为"data:“URI。

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

然而，我得到

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

这个错误发生在Chrome和Safari中。

如果我将磁道src设置为"/foo.vtt"，它就能工作。数据uri的“起源”不是当前的页URI吗？

这里的例子。 (查看控制台中的错误输出)。

Answer 1

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

Firefox似乎支持使用base64编码的数据URI (小提琴)直接在HTML中设置跟踪。通过src更新轨道JavaScript似乎有效，但似乎不会影响正在使用的实际轨道数据。

如果您确实需要通过JavaScript更新跟踪数据，您可以手动解析WEBVTT文本并在时间上添加一个Cue。这页面描述了所有不适用于将VTT数据直接包含在页面中的方法，并给出了最后解析和Cue加载的示例。