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的"起源"不是当前页面uri？

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

Answer 1

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

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

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