在IE中加载webvtt轨道

Loading webvtt track in IE

本文关键字：webvtt 轨道 加载 IE      更新时间：2023-09-26

我正在加载一个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

我仍然得到0在IE和2在Chrome

我错过了什么吗?

更新1:

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

然后我发现了这个帖子:WinJS视频元素中的HTTP字幕

我想这可能是服务器的问题。

更新2:

MEDIA12604:文本轨道:未知的MIME类型。hr = 8007000 b。已排序，但在IE

中仍未加载跟踪提示

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

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

我发现IE10和IE11不支持加载跨域VTT文件为<track>，即使CORS是启用的(Access-Control-Allow-Origin: *响应头)。为了添加IE对标题的支持，我必须使用如下所示的脚本。

此脚本通过AJAX下载每个VTT文件，创建blob URL，并用其各自的blob URL替换每个<track> src。这只在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>

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

相关文章：