html5-audio – 加载VTT文件时出现Crossorigin错误

我是新手,在 HTML 5中使用音频标签,并希望建立一个播放器.我想在轨道标签中使用VTT文件进行测试,以查看隐藏式字幕的工作原理.

这是我的代码：

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kink="caption" src="myaudio.vtt" srclang="en" label="English">
</audio>

根据我所读到的,跟踪应该适用于音频和视频,这从可访问性的角度来看是有意义的.什么是没有意义的是我试图加载它的错误：

"Text track from origin 'file://' has been blocked from loading: Not at same origin as the document,and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access."

在查看crossorigin属性时,我收到很多关于CORS和“匿名”和“用户证书”的预期值的令人困惑的文章.尝试要么导致类似的错误.

关于为什么这不起作用的任何想法？

解决方法

有关具有本机WebVTT支持的浏览器的更新列表,请参阅 here.如果您的浏览器不支持将本机CC作为WebVTT,则必须在JavaScript中构建自己的解析器以显示它们(请注意,还有其他CC格式,如SRT和TTML / DFXP).

您可以找到有关轨道元素here和here的可靠信息.请注意,所谓的字幕,标题和说明之间存在差异.

当与音频标签一起使用时,大多数浏览器都不支持音轨标签 – 虽然理论上它们应该 – 但实际上它会发现它在今天不起作用.也许它与WebVTT有关,意味着Web Video Text Tracks.这描述于here.

如果要沿音频标签显示隐藏式字幕,则必须构建自己的解析器.我建议你看看mediaelementjs的来源,以了解如何解决这个问题.

仅当您请求与托管音频/视频标记的页面不在同一域中的CC文件时,才需要CORS.在您的情况下,它不应该是必要的.更多关于CORS.

您的错误消息似乎表明您的系统中某处存在配置错误(可能您的vtt文件位于NFS上？).

原文地址：https://www.jb51.cc/html5/168087.html