Captions not working in IE9

[jeroenverfallie]

First of all, this issue occurs on the example video, on the frontpage of http://www.videojs.com/ - the subtitles do not load in IE9.

We load our captions using the <track> tag like this:

<track kind="captions" src="/path/to/caption.vtt" srclang="en" label="English" default>

After a lot of debugging, we found out that the dev tools in IE are unable to show the response body, even tho the response header shows the correct content-length.

Testcase on ie9:

Identical testcase on ie10:

Notes

VideoJS does create the html tags for the captions, but they remain empty throughout the playback. Important to note is that this issue does not occur on a local environment (grunt connect).

We tried the CR LF possible solution hinted in #156 to no success.

[vicrau]

+1

we have a site in production and an update would be welcome!

tnx

[jmwang-hh]

We have same issue. A fix would be appreciated.

[tanuu]

Open IE9, and go to this Microsoft Video Captioning demo, and your browser will display this error message: "This demo will not work in your browser, as it does not support the HTML5 element". http://ie.microsoft.com/testdrive/Graphics/VideoCaptions/

[Saint48198]

I have the issue as well in a production site.

[bschi]

Hey there,

I have a similar problem with our srt subtitles in IE8 & 9. The srt's are embedded in a structure attribute for our video options object.

structure: <video id="videod159e7648" width="910" height="513" class="video-js vjs-default-skin"> <source src="mediafile/250314_910x512.mp4" type="video/mp4"></source> <track kind="Subtitles" src="mediafile/250314_910x512.srt" label="On" default="default"></track> </video>

The following error MESSAGE only occurs in IE11 emulation mode as IE9 / 8: SEC7120: Origin http://localhost not found in Access-Control-Allow-Origin-Header.

In IE9 within a virtual machine no error is shown, but also no subtitles - So I guess it's the same problem.

If I add an .htaccess file to our project with the content: Header set Access-Control-Allow-Origin "*"

The Problem is solved - but this solution can only be used for apache machines.

A fix would be appreciated.

[Globulopolis]

@bschi look at the second post http://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx

[gkatsev]

Can you please retest with latest videojs? It has updated vtt text track support. As for the Access-Control-Allow-Origin issue: there's nothing we can do about that. If the server doesn't set the right headers, we cannot read the files.

[gkatsev]

Actually, I'm going to close this for now. Please let us know if the new version fixes it or not and if it didn't we can reopen and take another look.

[EZWrighter]

Same problem with latest code on IE9. Correct CORS Headers set as Chrome and other browsers work without issue. With the latest videojs CDN version, IE 9 gives the same network response that the original poster shows.

[EZWrighter]

My rough guess right now is that IE9 supports html5 video, but not vtt captions directly. That support did not come until IE10. If captions are present on IE9, they either need to be emulated or flash tech should be used instead of HTML5. VirtualBox and microsoft's free developer images are great for easy testing of any of the IE versions.

[EZWrighter]

Poking around in the source for videojs I noticed some examples with tracks and this following them: <!-- Tracks need an ending tag thanks to IE9 --> I am inserting tracks dynamically via javascript addRemoteTextTrack(track). Maybe the text track element is not getting inserted correctly from the html5 tech?

Pot shots I know...but hopefully something is helpful there.

[EZWrighter]

Ok, so I forced flash tech first on IE9 and I still get the same behavior. One thing I didn't mention is that it is really hit and miss on whether the captions work(vvt file loads) or not. Could their be some kind of timeout that would cause the caption file to load intermittently? Can you point me toward what script would be responsible for getting the vtt file in IE 9? Any other tests that might help to pinpoint the issue?

[heff]

@gkatsev could this be related to the track loading issue?

[gkatsev]

Actually, I wonder if it's related to the fact that IE8 and IE9's CORS don't work properly. If the caption file is hosted on the same domain as the page, does it work?

[EZWrighter]

It is and I have debugged enough to believe I know why. The dev version of the same build actually works flawlessly. I think that the minifier is removing the dummy/empty functions that are setup for IE9 on XHR requests. Line 100 & 101 in xhr.js.

I don't think it is CORS as it is intermittent timing kind of issue. Which is the same behavior being reported here: http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/ You guys reference that in the xhr page.

[gkatsev]

D'oh. Those lines probably need to be updated to use bracket notation, i.e. request['onprogress'] = function() {}. @EZWrighter do you want to submit a PR with that change against the stable branch so we can release a patch update?

[EZWrighter]

I couldn't get the build to actually work...so if you have a working clone of the repository, I would appreciate it if you can just make it happen. Grunt was failing when trying to build, with an error about the uglify task. This was from a clean clone of the repository, pulled yesterday. Guess I need to file something separate for that :-(

[gkatsev]

Make sure to checkout the stable branch. Master right now is a but in flux because of on-going 5.0 work.

[gkatsev]

I think that this isn't an issue in 5.0. Can someone verify? Thanks.

[gkatsev]

No response and it is working as far as I can tell. Closing.