Avoid hours of wasted time checking video formats. Code your Internet Explorer 9 video tags correctly.
How does a fifteen minute project turn into six hours? Easy when using legacy, poorly written code.
If you are embedding video, Internet Explorer expects it in a very specific format or you will get the old red x treatment.
Code your html 5 video tag exactly like this to avoid hours of wasted time.
<video id="movie" width="220" height="176" controls="controls"> <source src="movies/side-guy/guy-on-the-side-2012.webmvp8.webm" type="video/webm;" codecs="vp8, vorbis" /> <source src="movies/side-guy/side-guy.mp4" type="video/mp4;" codecs="avc1.42E01E,mp4a.40.2" /> <source src="movies/side-guy/guy-on-the-side-2012.theora.ogv" type="video/ogg;" codecs="theora, vorbis" /> <object width="220" height="176" type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf"> <param name="movie" value="flowplayer-3.2.7.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value="config={'clip':'movies/guy-on-the-side-2012.flv','scaling':'fit','autoBuffering':'true'}" /> <embed src="movies/side-guy/guy-on-the-side-2012.swf" width="220" height="176">If you see this please install Flash Player to view the video on this site.<br/>Or download video as MP4, WebM, or Ogg.</embed> </object> </video>
Items of note:
- Put webm first. It will be ignored by browsers that don’t support it.
- Don’t forget the type and codecs for the mp4
- You must encode your mp4 as x264 and acc. IE9 won’t play anything else
Random Notes
Standard 4:3 sizes are 320 x 240 and 220 x 176