html - Html5视频轨道数据uri

Question

我想设置<track src为“数据：”URI。

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

但是，我得到

跨域资源共享策略拒绝跨域文本轨道加载。

该错误发生在 Chrome 和 Safari 中。

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

Jsfiddle 示例在这里。（查看控制台中的错误输出。）

score 0 · Accepted Answer

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

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

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

1 回答 1