IE 9 Video Tag Support

The new shinning IE-9 from the Microsoft finally support the HTML Audio and Video tags. However there are some catches to look for.

For the few months now, we have been using the VideoJS in my client web-pages, and it worked great on FireFox, Chrome, Opera, IE-8 and lower end browsers. However we got support call from the client complaining that Video is not loading correctly on the IE-9. This was weird and shocking, because if it works in IE-8, how can it break in IE-9?

When debugging this, I made some interesting discovery. I was using the following Video tag with VideoJS script:

1
2
3
4

<video id="my_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto"
width="520" height="264" data-setup="{}">
    <source src="video/sample_video.mp4" type='video/mp4'>
</video>

And this was working in all popular browsers except IE-9. While trying different solutions, I found that following does work corectly (removing the VideoJS support) in IE-9:

1
2
3
4

<video id="my_video_1" controls autoplay preload="auto" width="520"
height="264" data-setup="{}">
    <source src="video/sample_video.mp4" type='video/mp4'>
</video>

However, by not adding the VideoJS, we will have to compromise on support for the IE-8 and other browsers who don’t support the Video tag. But this confirmed that apparently VideoJS was doing something with the Video tag, and by debugging the content using the Developer Tools, I found that it was changing the video tag to something like this at runtime:

1
2

<video class="vjs-tech" src="video/sample_video.mp4" id="my_video_1_html5_api"
preload="auto" autoplay="" poster="null" data-setup="{}">

So basically, it was removing the child source tag, and adding it as a property to the main video tag, which for some reason was not working in the IE-9. Debugging for the issue, I found that if you change the video source path to fully qualified (starting with HTTP path), it finally works in IE-9 and is compatible with other browsers too. So here is the final working video tag for the VideoJS:

1
2
3
4

<video id="my_video_1" class="video-js vjs-default-skin" controls autoplay
preload="auto" width="520" height="264" data-setup="{}">
    <source src="http://site-name/video/sample_video.mp4" type='video/mp4'>
</video>

Simple task, learned hard way. Hello IE-9.

Tags: IE, IE 9, Video, Video JS

This entry was posted on Friday, September 7th, 2012 at 1:16 pm and is filed under HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.