Loading webvtt track in IE

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


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.

Using WebVTT files on Internet Explorer 11 : Amara Support Center, Cues that indicate positioning and additional headers aren't parsed and may stop the track from loading altogether. If the subtitles load on all� Internet Explorer 11 has limited support for WebVTT files. Cues that indicate positioning and additional headers aren't parsed and may stop the track from loading altogether. If the subtitles load on all other browsers, press F12 on IE11 a


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>

Help with WebVTT, If you want your text tracks to be turned on by default, add the default attribute to the support with regards to which track set they will attempt to load. on the server, so Internet Explorer knows how to interpret WebVTT files. Web Video Text Tracks Format (WebVTT) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element. The primary purpose of WebVTT files is to add text overlays to a <video>. WebVTT is a text based format, which must be encoded using UTF-8. Where you can use spaces you can also use tabs.


Would like to add here that after solving the MIME type issue in IE11 I was still getting error code: MEDIA12608: Timestamp should be '-->'. hr=80004004 . The fix was removing the thousandth digit in the time stamp. e.g changing: 00:00:00.000 --> 00:01:10.000 to 00:00:00.00 --> 00:01:10.00

WebVTT support in browsers, Microsoft provided <track> element support in the Internet Explorer 10 Platform Preview 4 to developers on 30th November 2011. IE 10� If you have multiple tracks defined, browsers have different support with regards to which track set they will attempt to load. Hosting WebVTT files on a different server If you want/have to host your WebVTT files on a different server to the one where your code resides, you can often run into CORS issues, where the browser refuses to serve


Loading webvtt track in IE, Loading webvtt track in IE. 发布于 2020-05-18 12:42:02. I'm loading a webvtt file. Works fine but in IE11 no cues are present. WEBVTT FILE 00:00:01.000� I discovered that IE (10 and 11) does not support loading a cross-origin VTT file for a <track>, even if CORS is enabled. 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.


Web Video Text Tracks Format (WebVTT), Web Video Text Tracks Format (WebVTT) is a format for displaying timed Must be an integer (i.e., no decimals) between 0 and 100 inclusive. Each track element has an attribute for kind, which can be subtitles, captions, descriptions, chapters or metadata. The track element src attribute points to a text file that holds data for timed track cues, which can potentially be in any format a browser can parse. Chrome supports WebVTT, which looks like this:


<track>: The Embed Text Track element, The HTML track element is used as a child of the media elements audio The tracks are formatted in WebVTT format (.vtt files) — Web Video� Add an HTML5 <audio>or <video>element to your web page, asfollows. Audio. Copy and paste the following code into your web page, replacing thesource files with the path to your own media files. Use both OGG and MP3to ensure cross-browser compatibility, since some browsers don’t supportMP3.