6

我正在尝试将 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 属性集播放视频？

4

1 回答 1

11

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

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

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

于 2017-01-24T15:21:47.307 回答