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

跨域

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

匿名

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

使用凭证

发送带有凭证的跨域请求。换句话说，它发送带有Cookie，证书或执行HTTP Basic身份验证的Origin：HTTP标头。如果服务器未（通过Access-Control-Allow-Credentials：HTTP标头）向原始站点提供凭据，则该图像将被污染并且其使用受到限制。

如果不存在，则在没有CORS请求的情况下（即在不发送Origin：HTTP标头的情况下）获取资源，以防止在元素中使用未污染的资源。如果无效，则将其视为使用了枚举关键字匿名。有关其他信息，请参见CORS设置属性。

Answer 2

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

crossorigin

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

尽管正确设置了anonymous属性（请参见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes），但在客户端，您不能强制改写-在这种情况下，{{1}}确实可以帮助浏览器进行协商请求正确

从跨域加载vtt的问题

2 个答案: