如何为HTML5视频加载VTT文件启用CORS？

Question

如何为HTML5视频加载VTT文件启用CORS？

html5-videowebvttvtt

10

我的需求

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

问题

vtt未被加载，出现错误：文本来源已被阻止加载：与文档不在同一起源，并且跨越元素的父级没有'crossorigin'属性。

我的调查

我知道必须使用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>

- Xi Xiao

2个回答

5

我可以确认，在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>

最后，记住，你必须使用web服务器来提供此HTML片段 - 不能在本地完成（例如file//）。

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

- Adrian CB

你好，当我在jsfiddle中输入代码时，它没有任何反应。我也在node服务器上尝试了相同的操作。请查看此处 https://jsfiddle.net/zbg8b0bj/ - Xi Xiao

在 CodePen 上对我有用。 - Dan Gayle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom Faltesek · Accepted Answer

希望这能帮助下一个遇到此问题的人。我发现 IE（10 和 11）不支持加载跨源 VTT 文件用于 <track>，即使启用了 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>