Make your HTML5 Video support all browsers

Introduction

HTML5 video tag gave us the following advantages:

1. No plugin required, directly play.
2. Visible & controllable for Browser and search engine, not a "black box" such as Flash or SilverLight.
3. Cross-platform, in theory all PC/mobile browsers as well as Ipad/Windows 8/Android tablet PC. 
4. Downward compatibility. Which is very important, but W3C had made it simple and works, we can smoothly fall back to flash if the user agent does not recognize "<video>" tag.

So it is simple and pretty cool! However, there is still issues within a not short period: the browser support - each concrete browser and the company (ies) behind it supports different formant of videos, to be more specific, refer the table below stole from about.com:

	Android	Chrome		Firefox		Internet Explorer	iOS	Opera		Safari
Codec		Win	Mac	Win	Mac	Win		Win	Mac	Win	Mac
MP4 or H.264	3.0	9	7	X	X	9	3	X	X	5	5
ogg/Theora	2.3	9	7	3.6	3.6	X	X	10.63	10.63	X	X
WebM	2.3	9	7	3.6	3.6	9 (withcomponents)	X	10.63	10.63	X	X

So to support all browsers: IE 6.0+, Firefox, Chrome, Safari, Opera, etc, what should we do?

Cross All Browser Implementation

By searching on the google and half a day investigation, I found the solution, sample code pasted below:

 <video controls="controls" preload="auto" poster="napshot.png">
     <source src="My Video.mp4" type="video/mp4" />
     <source src="My Video.webm" type="video/webm" />
     <source src="My Video.ogv" type="video/ogg" />
     <!-- 
         Flash
     -->
 </video>

The code above results in IE 9.0+/Safari will load mp4, Chrome/Firefox and Opera will load webm, and IE 6.0 ~ 8.0 will load flash.

Note: as browsers may change its attitude on the video format support, so my code & comments might not right in the future.  

Few tips

One important thing is make sure your web server supports those video MIME types, taking IIS as an example, we need to config it to support this by doing following:

1. Open IIS Server Manager (Win+R -> inetmgr).
2. Go to your website, double clicks "MIME Types".
3. Add MIME types: video/mp4, video/webm and video/ogg.
    

An equivalent way to define those MIME types within your ASP.NET web.config:

 <staticContent>
     <mimeMap fileExtension=".webm" mimeType="video/webm" />
     <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
     <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
 </staticContent>

Another important thing is video converting, I would recommended combinations and steps according to my experience on this:

1. Using Any Video Converter to compress/convert original video file to a flv.
2. Using Miro conver the compressed flv to ogv, webm and mp4.
    

They both are free to use, Miro is actually based on the famous open source ffmpeg library which I like very much, Miro is also open source.

One more thing:), we can customize video UI by CSS, and there are already a few good open source library to help you: MediaElement.js and VideoJS. 

Live Demo

My lovely son