在 IE 中加载 webvtt 轨道答案

【问题标题】：Loading webvtt track in IE在 IE 中加载 webvtt 轨道
【发布时间】：2015-08-07 08:45:35
【问题描述】：

我正在加载一个 webvtt 文件。工作正常，但在 IE11 中没有提示。

            WEBVTT FILE

            00:00:01.000 --> 00:00:04.000
            Let's take a look at the 4th platform preview of IE10

            00:00:04.000 --> 00:00:06.000
            running on the Windows 8 Developer Preview

代码内部：

            var trackNode = jQuery("<track default>");
            // videoNode is just a <video> with <source> child
            videoNode.append(trackNode);
            trackNode.attr({
                label: "Captions",
                kind: "metadata",
                src: "localhost:1234/example&output=vtt"
            });
            trackNode.on("load", function() { // I have also tried using "loadedmetadata" instead of load, but nothing changed
                console.log(this.track.cues.length);
            });

在 Chrome 中我可以看到有 2 个提示，但在 IE11 中我看到 0

即使所有内容都加载完毕并将其放入控制台：

            jQuery("track").track.cues.length

我仍然在 IE 中得到 0，在 Chrome 中得到 2

我错过了什么吗？

更新 1：

在做了一些重构之后，我在控制台中看到了这个错误： MEDIA12604：文本轨道：未知的 MIME 类型。 hr=8007000b。

然后我发现了这个帖子： HTTP subtitles in WinJS video element

我认为这可能是服务器问题。

更新 2：

MEDIA12604：文本轨道：未知的 MIME 类型。小时=8007000b。已排序，但曲目提示仍未在 IE 中加载

【问题讨论】：

标签： javascript html5-video metadata internet-explorer-11 webvtt

【解决方案1】：

在 IE11 中，您需要在服务器上为 WebVTT 定义 MIME 类型。那将是文本/vtt。请注意，IE 仍然不支持 WebVTT 功能，例如 ::cue 或位置标记。 JW Player等一些第三方播放器对它们都有不同程度的支持。

【讨论】：

【解决方案2】：

这个问题已经有一个公认的答案，但我希望能为下一个开发者节省一些时间。

我发现 IE10 和 IE11 不支持为 <track> 加载跨域 VTT 文件，即使启用了 CORS（Access-Control-Allow-Origin: * 响应标头）。为了添加 IE 对字幕的支持，我不得不使用如下脚本。

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

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>

【讨论】：

【解决方案3】：

想在这里补充一点，在解决了 IE11 中的 MIME 类型问题后，我仍然收到错误代码：MEDIA12608: Timestamp should be '-->'. hr=80004004。修复是删除时间戳中的第 100 位数字。例如更改：00:00:00.000 --> 00:01:10.000 到 00:00:00.00 --> 00:01:10.00

【讨论】：