跨域加载vtt文件存在问题

Question

我在加载跨域vtt文件时遇到了问题："Unsafe attempt to load URL Domains... protocols and ports must match."

我尝试将crossorigin="true"添加到视频中，在Chrome和Firefox中可以工作，但在Internet Explorer 11中无法工作。

是否有其他方法可以从IE11获取跨域的vtt文件？

<video controls autoplay crossorigin="true">
     <source src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.mp4" type="video/mp4">
     <track label="Captions" kind="captions" srclang="en" src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.vtt" id="caption-change-track" default="">
  </video>

- Park

---

无论我遵循了什么建议，我都从未成功地使其正常工作。 - hernan43

Answer 1

video 上的 crossorigin 属性需要设置为 anonymous 或者 use-credentials

<video controls autoplay crossorigin="use-credentials">
  <source src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.mp4" type="video/mp4">
  <track label="Captions" kind="captions" srclang="en" src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.vtt" id="caption-change-track" default="">
</video>

Mozilla的解释

crossorigin

此枚举属性指示是否使用CORS来获取相关图像。启用CORS的资源可以在不被污染的情况下在 <img> 元素中重复使用。允许的值为:

anonymous

发送不带凭据的跨域请求。换句话说，它发送Origin: HTTP头而不带cookie、X.509证书或执行HTTP基本认证。如果服务器不向源站点提供凭据（通过不设置Access-Control-Allow-Origin: HTTP头），则图像将被污染，并限制其使用。

use-credentials

发送带凭据的跨域请求。换句话说，它发送Origin: HTTP头和cookie、证书或执行HTTP基本认证。如果服务器不向源站点提供凭据（通过Access-Control-Allow-Credentials: HTTP头），则图像将被污染并限制其使用。

如果未提供此属性，则该资源将被获取而没有CORS请求（即不发送Origin: HTTP头），从而防止其在<img>元素中被污染使用。如果无效，则会处理为使用了枚举关键字anonymous。有关更多信息，请参见CORS设置属性。

- Biotox

---

谢谢！添加 crossorigin="anonymous" 对我很有帮助。 - themarkappleby

Answer 2

当请求vtt文件时，您需要在源服务器上设置跨域策略，包括以下响应头：

Access-Control-Allow-Origin: *

如果需要的话，您还可以将允许的域限制为特定条目。

从客户端无法强制覆盖，但是正确设置crossorigin属性(参见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) - 在这种情况下设置为anonymous确实有助于浏览器正确处理请求

- Offbeatmammal