从跨域加载 vtt 的问题

Question

我在从跨域加载 vtt 时遇到问题：“加载 URL 域的尝试不安全...协议和端口必须匹配。” 我尝试将 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>

Answer 1

上的crossorigin属性video需要是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 的解释

跨域

此枚举属性指示是否使用 CORS 来获取相关图像。启用 CORS 的资源可以在元素中重用而不会被污染。允许的值为：

匿名的

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

使用凭证

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

如果不存在，则在没有 CORS 请求的情况下获取资源（即，不发送 Origin: HTTP 标头），防止在元素中使用其未受污染的资源。如果无效，则按照使用枚举关键字anonymous 进行处理。有关其他信息，请参阅 CORS 设置属性。

Answer 2

您需要在请求 vtt 文件时在响应中包含以下标头，从而在原始服务器上设置跨域策略：

Access-Control-Allow-Origin: *

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

从客户端来看，尽管正确设置了属性，但您无法强制覆盖crossorigin（请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes） - 在这种情况下确实anonymous有帮助浏览器正确协商请求