Loading webvtt track in IE

Question

I'm loading a webvtt file. Works fine but in IE11 no cues are present.

            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

Inside the code:

            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);
            });

In Chrome I can see that there are 2 cues, but in IE11 I see 0

Even after everything is loaded and I put this into console:

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

I still get 0 in IE and 2 in Chrome

Am I missing something?

UPDATE 1:

After doing a bit of refactoring I saw this error in console: MEDIA12604: Text Track: Unknown MIME type. hr=8007000b.

and then I found this post: HTTP subtitles in WinJS video element

I think this might be a server issue.

UPDATE 2:

MEDIA12604: Text Track: Unknown MIME type. hr=8007000b. is sorted but track cues are still not loading in IE

Answer 1

In IE11, you need to define the MIME type for WebVTT on the server. That would be text/vtt. Note that IE still does not support WebVTT features like ::cue or position markups. Some third-party players like JW Player have support for them in varying degrees.

Answer 2

This question already has an accepted answer, but I'm hoping to save the next developer some time.

I discovered that IE10 and IE11 do not support loading cross-origin VTT files for a <track>, even if CORS is enabled (Access-Control-Allow-Origin: * response header). In order to add IE support for captions, I had to use a script like the one below.

This script downloads each VTT file via AJAX, creates a blob URL, and replaces each <track> src with its respective blob URL. This only runs in 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>