如何为 html5 视频加载 vtt 文件启用 CORS？答案

【问题标题】：How to enable CORS for html5 video loading vtt file?如何为 html5 视频加载 vtt 文件启用 CORS？
【发布时间】：2017-08-27 06:32:56
【问题描述】：

我的需要

html5 视频元素加载保存在不同域中的视频和 vtt 文件。

问题

vtt 未加载，错误Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.

我的调查

我知道需要使用 CORS 才能在 html5 中成功加载 vtt。

我已在服务器端为来自任何域的请求启用 CORS。

有些文章说在`元素中添加crossorigin或crossorigin="anonymous"可以完成这项工作，但它不起作用。视频根本没有加载或出现不同的错误

我把我的代码放在下面

<body>
  <div class="container">
    <video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
      <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
    </video>
</body>

【问题讨论】：

标签： html5-video webvtt vtt

【解决方案1】：

希望这有助于下一个人偶然发现这个 SO 问题。我发现 IE（10 和 11）不支持为 <track> 加载跨域 VTT 文件，即使启用了 CORS。为了添加 IE 对字幕的支持，我不得不使用如下脚本。

此脚本通过 AJAX 下载每个 VTT 文件，创建一个 blob URL，并将每个 <track> src 替换为其各自的 blob URL。

window.addEventListener("load", function() {
  if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
    // Not IE, do nothing.
    return;
  }

  var tracks = document.querySelectorAll("track")

  for (var i = 0; i < tracks.length; i++) {
    loadTrackWithAjax(tracks[i]);
  }
});

function loadTrackWithAjax(track) {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && this.responseText) {
      // If VTT fetch succeeded, replace the src with a BLOB URL.
      var blob = new Blob([this.responseText], { type: 'text/vtt' });
      track.setAttribute("src", URL.createObjectURL(blob));
    }
  };
  xhttp.open("GET", track.src, true);
  xhttp.send();
}

<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>

【讨论】：

我不确定我是否想在我的产品中为 vtt 文件添加这么多代码，但这很聪明……干得好。
好吧，你可以缩小它:)

【解决方案2】：

我可以确认video 元素上的crossorigin=anonymous 属性确实按预期加载了文本轨道。

试一下这段代码：

<video id="myvideo" controls preload="auto" width="640" height="264" autoplay crossorigin="anonymous">
      <source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>

最后，请记住，您必须使用网络服务器来提供此截断的 HTML - 这不能在本地完成（即。file//）。

如果您熟悉 node - 安装 http-server，使用 --cors 运行并使用 ngrok。

【讨论】：

您好，例如，当我将代码放在 jsfiddle 中时，它不会运行。我也在节点服务器中尝试过相同的操作。在这里查看jsfiddle.net/zbg8b0bj