Html5视频轨道数据uri答案

【问题标题】：Html5 video track data uriHtml5视频轨道数据uri
【发布时间】：2013-07-03 01:01:05
【问题描述】：

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

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

但是，我明白了

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

Chrome 和 Safari 都会出现该错误。

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：