HTML5视频轨道数据URI

Question

10

我想将 <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吗？

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

- colder

你解决了这个问题吗？ - simoncereska

这是一个16个月的问题吗？为什么有人要编辑它？ - krzysiej

1

@krzysiej 因为SE不是一个论坛，它是一个问答网站！ - v010dya

1

@colder 尝试使用 <video crossorigin="anonymous" 看看是否有帮助。 - delete me

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kanaka · Answer 1

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

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

如果您确实需要通过JavaScript更新轨道数据，则可以手动解析WEBVTT文本并逐个添加Cue。此页面描述了所有无法直接包含VTT数据的方法，并在末尾提供了解析和Cue加载示例。