我是新手,在
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.
