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.