加载VTT文件时出现Crossorigin错误

Question

我是新手,在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和"anonymous"和"user-certificate"的预期值的令人困惑的文章.尝试要么导致类似的错误.

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

Answer 1

这是一个老帖子,但是当谷歌搜索时我第一次点击 Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access.

OP似乎在本地遇到此问题,他可以通过禁用Chrome的网络安全性来解决这个问题,如上所示.但是,当访问来自不同域的文本轨道时,用户将更经常看到这一点.要在所有用户的生产环境中修复它,您需要做两件事:

1. 将正确的CORS标头添加到托管VTT文件的站点.
2. 将该crossorigin="anonymous"属性添加到您网站的音频/视频元素.

如果您无权访问托管视频文件的网站,则可能会遇到困难.但是如果你这样做,你应该添加标题Access-Control-Allow-Origin:'*'.我正在Node/Express服务器上处理它,如下所示:

   var app = express()
    app.use(function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*')
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
      next()
    })

音频/视频元素更容易修复.在您网站的HTML页面中,添加以下属性.

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

我希望这个答案对某人有帮助......排除故障是个烦人的问题.

Answer 2

请参阅此处以获取具有本机WebVTT支持的浏览器更新列表。如果您的浏览器不支持将本机CC用作WebVTT，则必须使用JavaScript构造自己的解析器以显示它们（请注意，还有其他CC格式，例如SRT和TTML / DFXP）。

您可以在此处和此处找到有关track元素的可靠信息。请注意，字幕，标题和说明之间是有区别的。

大多数浏览器在与音频标签一起使用时将不支持track标签-尽管从理论上讲，它们应支持-实际上，您会发现它至今仍无法使用。也许与WebVTT有关，这意味着Web Video Text Tracks。这在这里描述。

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

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

您的错误消息似乎表明您在系统中的某个地方配置有误（也许您的vtt文件位于NFS上？）。

Answer 3

https://github.com/videogular/videogular/issues/123

将 crossorigin="anonymous" 添加到视频标签以允许加载来自不同域的 VTT 文件。

这是一个奇怪的问题，即使您的 CORS 在服务器上设置正确，您也可能需要将 HTML 标记本身标记为匿名才能使 CORS 策略发挥作用。