I was very excited when Microsoft released
the Internet Explorer 9 Release Candidate. As far as I was concerned, this was another nail in
the coffin for IE6 and step in
the right direction for us .NET web developers as our base camp was finally starting to support
the latest and greatest future-web standards. Unfortunately, my celebration was short lived as I soon hit a snag while loading up an HTML5 site I was building in Visual Studio 2010.
The Mystery After updating Internet Explorer, I ran my HTML5 site that had
the oh-so-lovely HTML5 video tag showing a video. Even though this worked in IE9 Beta, it appeared that IE9 RC could not load
the same file. I figured that it was
the video codec. Maybe IE9 RC no longer supported
the video codec I used to encode my video. Here's
the code I used: <video width="854" height="480" id="myOtherVideo" autoplay="" controls="">
<source src="/DemoSite1/Media/big_buck_bunny.mp4"/>
<div>
<p>Your browser does not support HTML5 Video.</p>
</div>
</video>
As you can see from
the code, I had
the "fail-safe" code inside
the video tag.
The idea there being that if
the video tag, or
the video files themselves, are not supported by
the browser my video should fail gracefully.
What was even more strange was
the fact that it worked in all
the other HTML5 browsers that supported video.
The Investigation
Whoa! DJ stop
the music. How can any of that make sense? Would
the IE team really take such huge strides forward only to forget to include a feature that was already in
the beta? I don't think so.
I did plenty of searching on
the web and asking around on
the web, but could not seem to find anyone else having
the same problem. Eventually I came across this post talking about declaring
the MIME type in
the .htaccess file.
That got me thinking: does my web server support
the video MIME type? I was using VS2010, so how do I know what kind of MIME types are supported by default?
Still, my page hosted in Cassini (the web development server in VS2010) works on
the other browsers. Why wouldn't it work with IE9 RC? To answer that, it was time to open up
the upgraded toolbox known as
the Developer's Tools in IE9 and use
the new Network Tab.
The Conclusion
If you take a closer look at
the results displayed from
the Network tab, you can see that IE9 RC has interpreted
the video file as text/html rather than video/mp4.
To make this work, I decided to use IIS to debug my HTML5 web application by setting
the web project's properties. Then, I added
the MIME types that I want to support (i.e. video/mp4, video/ogg, video/webm). Et voila!
The Mystery of
the Broken Video Tag is solved.
After Thoughts
After solving
the mystery, I still had
the question about why my site worked in Chrome, Safari, and Firefox 3.6. After asking around,
the best answer that I received was from my colleague Tyler Doerksen. He said that IE9 likely depends on
the server telling it what kind of file it is downloading rather than trying to read
the metadata about
the data it is trying to download before doing anything.
I have no facts to back this up, but it makes sense to me. In a browser war where milliseconds can make your browser fall back a few places in
the race for supremacy, maybe
the IE team opted to depend on
the server knowing what kind of content it is serving up. Makes sense to me.
In any case, that is just an educated guess. If you have any comments, feel free to post on them below.
This post also appears at http://david.wes.st
