HTML5 video tag gave us the following advantages:
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:
|MP4 or H.264||3.0||9||7||X||X||9||3||X||X||5||5|
So to support all browsers: IE 6.0+, Firefox, Chrome, Safari, Opera, etc, what should we do?
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" />
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.
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:
An equivalent way to define those MIME types within your ASP.NET web.config:
<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" />
Another important thing is video converting, I would recommended combinations and steps according to my experience on this:
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.
My lovely son