加载VTT文件时出现跨域错误 [英] Crossorigin errors when loading VTT file

问题描述

我是在HTML 5中使用音频标签的新手，并且想要构建一个播放器.我想在track标签中使用VTT文件进行测试，以了解隐藏式字幕的工作原理.

I'm new to using the audio tag in HTML 5 and wanted to build a player. I wanted to test using a VTT file in a track tag to see how closed captioning could work.

这是我的代码:

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

根据我所读的内容，轨道应该适用于音频和视频，这从可访问性的角度来看是有意义的.没有意义的是我尝试加载该错误:

According to what I've read, track is supposed to work for both audio and video, which makes sense from an accessibility stand-point. What doesn't make sense is the error I get trying to load it:

"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以及匿名"和用户证书"的期望值的令人困惑的文章.尝试任何一种都会导致类似的错误.

When looking up the crossorigin attribute, I get a lot of confusing articles about CORS and the expected values of "anonymous" and "user-certificate". Trying either results in a similar error.

关于为什么这种方法行不通的任何想法吗?

Any ideas as to why this won't work?

推荐答案

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

See here for an update list of browser with native WebVTT support. If your browser does not support native CC as WebVTT you have to construct your own parser in JavaScript to display them (note there are other CC format like SRT and TTML/DFXP).

您可以在此处和此处.请注意，字幕，标题和说明之间是有区别的.

You can find reliable information about the track element here and here. Note that there is a difference between what is referred to as subtitles, captions and descriptions.

大多数浏览器在与音频标签一起使用时均不支持跟踪标签-尽管从理论上讲，它们应支持-实际上，您会发现它迄今仍无法正常工作.也许与WebVTT有关，这意味着Web 视频文本轨道. 此处进行了描述.

Most browsers won't support a track tag when used with an audio tag - though in theory they should - you will find practically it does not work as of today. Maybe it has something to do with WebVTT meaning Web Video Text Tracks. This is described here.

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

You have to build your own parser if you want to display your closed captions along an audio tag. I would suggest you take a look at the source of mediaelementjs to get an idea on how to tackle this.

仅当您请求与承载音频/视频标签的页面不在同一域中的CC文件时，才需要使用CORS.在您的情况下，它没有必要.有关 CORS 的更多信息.

CORS is only required when you are requesting CC files that are not on the same domain as the page hosting the audio/video tag. It should not be necessary in your case. More about CORS.

您的错误消息似乎表明您在系统中的某个地方配置有误(也许您的vtt文件位于NFS上?).

Your error message seems to indicate you have a misconfiguration somewhere in your system (maybe your vtt file is on NFS?).

这篇关于加载VTT文件时出现跨域错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！