跨源视频无法在 Chrome 中加载

Posted 2023-03-04

【中文标题】跨源视频无法在 Chrome 中加载

【英文标题】：cross origin video does not load in Chrome

【发布时间】：2012-07-07 17:16:51

【问题描述】：

我正在尝试在 Chrome（版本 20.0.1132.47 m）中播放具有crossorigin 属性的视频。它甚至不加载。网络面板显示OPTIONS（所谓的“预检”）请求由于某种原因被浏览器中止。它在没有crossorigin 属性的情况下工作。 Firefox 加载并成功播放。如有任何建议，我将不胜感激。

<video
    id='vid'
    autoplay
    crossorigin
    src='http://videos-cdn.mozilla.net/serv/mozhacks/demos/resources/immersivevideo/dubai.r.webm'>
</video>

http://jsfiddle.net/ZVgr2/

【参考方案1】：

结果是缺少Access-Control-Allow-Headers 响应标头和与Access-Control-Request-Headers 请求标头中传递的列表匹配的HTTP 标头列表。

【讨论】：

能否分享一下具体是如何实现的？

这是一个 SO 帖子，其中有一个答案，将 Access-Control-Allow-Headers 实现为与 php 中的 Access-Control-Request-Headers 相同：***.com/a/9866124/410102

我不认为有任何“简单”的客户端解决方案 - 我只是想获得一个 videojs 实例来加载在 Chrome 中托管在localhost 上的标题.vtt 文件。跨度>

什么托管试图打开阳离子文件的javascript文件本身？

【参考方案2】：

在视频标签中将crossorigin 设置为"anonymous"，如下所示：

 <video crossorigin="anonymous"></video>

【讨论】：

天啊，我的 Chrome 扩展程序之一正在将它添加到我的所有视频中，并破坏了我的开发应用程序中的视频播放行为。花了很长时间才找到它！啊！在这种情况下，扩展程序是：Chrome 的音频 EQ 均衡器。

【参考方案3】：

如果这对其他人有帮助，我在修复源文件上的 CORS 设置后遇到了同样的问题。原来 Chrome 正在缓存 CORS 设置和文件，所以我必须清除缓存然后它才能工作。

【讨论】：

谢谢你，为我做了。我已将crossorigin="anonymous" 添加到我的<audio> 并收到错误消息。然后，感谢您的回答，我在 Mac 上的 Chrome 上按了 Command + Shift + R 并且错误消失了。