Geeks With Blogs
UXD with Wessty Thoughts about user experience in software development, with a pinch of awesome.

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

video fail

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.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.

video success

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

Posted on Sunday, March 13, 2011 8:30 AM | Back to top


Comments on this post: IE9 and the Mystery of the Broken Video Tag

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
It's by design.

Microsoft is merely following the spec. That is in fact Firefox and Opera also doing, so I'm amazed that it somehow worked there (were you serving it Ogg Theora / WEBM?).

Chromium on the other hand is violating the spec. Bad. I also actually tought MS would violate it, as they normally do. But good to know that they opted for following.

It does matter, these milliseconds when it all adds up. Let us rather fix our web servers than get a suboptimal experience ;-) Sniffing is not good, not scalable.
Left by Odin / Velmont on Jul 20, 2011 8:46 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
I find it interesting that the "sniffing" is not part of the SPEC, from a developer story perspective, but I agree that we should fix up our servers.

Realistically thought, if you are managing a server and you don't know what kind of content you are serving up, then you should probably take a moment and reflect on that fact.

Thanks for the comment!
Left by David Wesst on Jul 20, 2011 11:20 AM

# Thank you so much for this solution
Requesting Gravatar...
You saved my day with this solution. Cheers. I simply added the following line to my .htaccess to make .MP4 work in IE9:

AddType video/mp4 .mp4
Left by Felix on Jul 29, 2011 2:38 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
The AddType video/mp4 .mp4 line in my Apache conf file fixed the IE( mp4 video problem. Took me a whole day to find the problem Thanks
Left by Ivan on Sep 09, 2011 7:26 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
I had the same problem (mp4 in html5 working in all browsers but IE9, where it shows the black box with red X in the center). However, after ensuring that my Apache httpd.conf file served the correct MIME types and seeing that IE9's Network tab shows my videos as video/mp4, the problem persists.

Here's a test, along with screenshot of Developer Tools Network tab:
http://132.236.112.18/wytt/geci/test.html

Any ideas?
Left by Bob on Sep 14, 2011 1:42 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Never mind - this fixes the problem:
http://jamiecurle.com/posts/ie9-wont-play-html5-video-and-displays-red-cross-i/
It's an IE9 bug when using a VMWare virtual machine.

I hope this helps someone else!
Left by Bob on Sep 14, 2011 2:05 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thank you. Thank you. Thank you. Thank you. I would have spent a whole day trying to figure this out.

Worked like a charm.
Left by Curtis on Sep 16, 2011 9:36 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
I know I can set the Mime type in IIS7. Can someone help me on how to add mime type to VS2010 IISExpress or Cassini server?
Left by Jay on Sep 27, 2011 11:41 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thanks so much. Very appreciated.
Left by Kat on Oct 03, 2011 10:32 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thanks for the solution. This was a lifesaver. And thanks to Felix for explaining what to add to the .htaccess file.
Left by Greg on Nov 08, 2011 12:15 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thank you for all the help guys, if anyone is still having an issue with this - it may be because you're video is in .M4V format and you will also need to add:
AddType video/x-m4v .m4v
to the .htaccess file.
This worked for me anyway!
Left by Chris on Nov 21, 2011 5:05 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
To get my webm video playing in Firefox, Chrome, Opera I had to ensure that my server was serving the correct MIME types (webm, ogg, mp4, m4v), as mentioned above. In my case this meant adding AddType lines to my Apache configuration file (httpd.conf). (My website is www.lbnature.co.uk on Linux/Apache)
It still wouldn't work in IE9. This was fixed by changing the DOCTYPE header in my HTML file, which specified "HTML 4.0 transitional". I looked on the W3C website and copied the XHTML 1.0 Transitional header and put it in place of the old one. My video (Daphnia on this month's pics) now works in all browsers mentioned, I believe.
I think that IE9 actually checks the W3C website's doctype specification, something that none of the other browsers seem to do.
(I usually make my web pages using Mozilla/SeaMonkey, but had to make the change required using Notepad, as they would have set the DOCTYPE line back to what doesn't work.)
Left by Rory Morrisey on Dec 21, 2011 7:55 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
I forgot to mention in my post that I installed the Google webm codec so that IE9 will play webm videos - and it does. It also plays mp4 and m4v videos if you serve them up correctly. I am using 64-bit IE9 on 64-bit Win7 on the client side.
Left by Rory Morrisey on Dec 21, 2011 8:01 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
If it's still not working here's what may certainly be a solution: encode the mp4 with compression format H.264. If you encode it with format mpeg4 or divx or else it will not work on IE9 and may as well crash Google Chrome. To do that, I use Any Video Converter freeware. But it could be done with any good video tool out there.

I've been trying all solutions listed here and tried other workaround for days but the problem lied in the way I created my mp4. IE9 does not decode other format than H.264.

Hope this helps,
Jimmy

Left by Jimmy Boyd on Dec 23, 2011 12:48 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Hello all

I do have the same broken video

Below is my code

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>

<video width="320" height="240" controls=""controls>

<source src="E:\Users\Krish\videos\Movavi Library\MVI_1725.mp4" type="video/mp4" />

Your browser does not support the video tag.
</video>

</body>
</html>

I saved the above text file as html in my desktop. when I try to run the html file saved in my desktop it gives me a broken video .

Please help me how to debug and get rid of this?

Krish
Left by Krish on Jan 31, 2012 9:09 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
You suggested:

"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."

I have confirmed I also found that: IE9 RC has interpreted the video file as application/octet stream rather than video/mp4. And, a second video control simply
<video src="~/VTours/Bear.mp4" ></video>
was interpreted with text/html rather than video/mp4

Code:
<video id="MyVideo" height="240" width="320" controls preload="auto">
<source src="/VTours/Bear.mp4" type="video/mp4" /> <-- Same in IIS7 -->
<p>
Your web browser does not support HTML 5 Video.
</p>
</video>
<p>Download the video file.</p>


<video src="~/VTours/Bear.mp4" ></video>

In VS10 I right-clicked my project name>properties>settings and added under Name: mp4. and under Type: String, under Scope: Application, under Value: video/mp4

I ran my Ap and confirmed that my 2 video file was not interpreted any differently.

Any ideas what I did wrong, or to try next?
Frank
Left by Frank Babz on Feb 17, 2012 11:53 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
for me the url video.enterprisemobile.info doesn't work at all in IE 9 even after making sure everthing is right
Left by jinishans on Apr 21, 2012 11:55 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thank you this was exactly what I have been searching for.
Left by seo kerala on May 02, 2012 5:33 AM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
Thanks a lot, it works perfect in IE9 after I put this line in an htaccess:
AddType video/mp4 .mp4

kine regards
Achim
Left by Achim on May 30, 2012 3:44 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
I Have The Same Problem But I Dont Know What .htaccess Is And I Dont Think I Have One This is the code I Used
<video width="320" height="240" controls="controls">
<source src=".mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Please Help Me Thanx
Left by zal on Nov 14, 2012 8:46 PM

# re: IE9 and the Mystery of the Broken Video Tag
Requesting Gravatar...
To Zal: .htaccess is a file that modifies how html pages are served to a browser I created a regular htaccess.txt file, uploaded it into the same place as my home page and then renamed it as .htaccess on the server. htaccess can be really simple - this is what I use:-
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/webm .webm
AddType video/ogg .ogv
AddType video/mov .mov

(BTW I'm annoyed that my host doesn't just change the server configuration so I don't have to have an .htaccess file at all, but that's another issue.)

To Jimmy Boyd - you're right, for IE9 to work I had to recode my video using H.264 codec. I did it with the free Handbrake program; my Sony Vegas doesn't seem able to do it. I was just lucky I only had Handbrake the first few times I made videos.

And finally, HTML5 pages shouldn't have a DOCTYPE header according to the latest advice I've seen - and that works for videos.
Left by Rory Morrisey on Nov 25, 2012 12:57 PM

Your comment:
 (will show your gravatar)


Copyright © David Wesst | Powered by: GeeksWithBlogs.net