从跨域加载vtt时出现问题

Question

我在跨域加载vtt时遇到了问题：“不安全的尝试加载URL域...协议和端口必须匹配。”我试图在视频中添加crossorigin="true“，它在chrome和firefox中工作，但在Is 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

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's explanation

crossorigin

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

匿名

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

use-credentials

使用凭据发送跨域请求。换句话说，它发送包含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可以帮助浏览器正确地协商请求