HTML5视频不能与crossOrigin =""anonymous&" [英] HTML5 video doesn't play with crossOrigin="anonymous"

问题描述

我正在尝试将HTML5视频播放器集成到我的应用程序中.我的视频源和字幕(用于跟踪标记)来自不同的域.

I am trying to integrate the HTML5 video player in my application. My video sources and the caption (for track tag) are coming from a different domain.

当我使用

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

以上所有代码在Chrome不安全模式(禁用网络安全性)下对我来说都可以正常运行.使用常规Chrome时，如果我未指定crossOrigin属性，则会收到一条错误消息

All of the above code works fine for me in Chrome insecure mode(disabled web security). With regular Chrome, if I don't specify the crossOrigin attribute, I get an error saying

来自原点'...'的文本轨道已被禁止加载:与文档的原点不在同一位置，并且轨道元素的父级没有'crossorigin'属性.因此，不允许访问来源" http://localhost ...".

指定crossOrigin属性后，字幕API成功获取数据.但是视频无法播放.谁能建议我如何使用crossOrigin属性集来播放视频?

After specifying the crossOrigin attribute, the caption API fetches the data successfully. But the video won't play. Can anyone suggest how can I make the video play with crossOrigin attribute set?

推荐答案

设置了crossorigin ="anonymous"后，结果又变了，我还需要在视频源URL上启用CORS.视频网址需要返回以下响应标头:

Turned out after setting crossorigin="anonymous", I needed to enable CORS on the video source URLs as well. The video URL needs to return the following response header:

Access-Control-Allow-Origin:*(或要列入白名单的域)

Access-Control-Allow-Origin: * (or the domain to whitelist)

使用此扩展程序可以帮助我模拟该问题的修复方法: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl = zh-CN

Using this extension helped me simulate the fix for the issue: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

这篇关于HTML5视频不能与crossOrigin =""anonymous&"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！