HTML5 视频无法使用 crossOrigin="anonymous" 播放答案

【问题标题】：HTML5 video doesn't play with crossOrigin="anonymous"HTML5 视频无法使用 crossOrigin="anonymous" 播放
【发布时间】：2017-06-08 22:36:01
【问题描述】：

我正在尝试将 HTML5 视频播放器集成到我的应用程序中。我的视频源和标题（用于轨道标签）来自不同的域。

当我使用

<video crossOrigin="anonymous">
   <source src="domain1Url"> ... </source>
   <track kind="captions" label="English Captions" src="domain2Url" srclang="en" default>
</video>

以上所有代码在 Chrome 不安全模式下都可以正常工作（禁用网络安全）。使用常规 Chrome，如果我不指定 crossOrigin 属性，我会收到一条错误消息

来自原点“...”的文本轨道已被阻止加载：与文档的原点不同，并且轨道元素的父级没有“跨域”属性。因此不允许访问 Origin 'http://localhost...'。

指定crossOrigin属性后，字幕API成功获取数据。但是视频不会播放。谁能建议我如何使用 crossOrigin 属性集播放视频？

【问题讨论】：

stackoverflow.com/questions/39294190/… 可能是相关的

标签： html video cross-domain cross-domain-policy closed-captions

【解决方案1】：

设置 crossorigin="anonymous" 后发现，我还需要在视频源 URL 上启用 CORS。视频URL需要返回如下响应头：

Access-Control-Allow-Origin：*（或要列入白名单的域）

使用这个扩展帮助我模拟了问题的修复： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

【讨论】：

但是如果您在其他浏览器或设备上打开该页面，视频将无法播放！！
为什么不呢？ CORS 标头适用于所有主流浏览器。