Loading blog entries.. loading

Make your HTML5 Video support all browsers

Monday, November 7, 2011 8:35 AM
Written by Wayne Ye
Font Size: S  M  L 

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:

 AndroidChromeFirefoxInternet ExploreriOSOperaSafari
Codec WinMacWinMacWin WinMacWinMac
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.
    IIS MIME TYpe 

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

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 sonSmile

 

Permalink: http://wayneye.com/Blog/Make-Your-HTML5-Video-Support-ALL-Browsers 3271 Views  0 Comments
Tag: Category:Programming»Web Development»HTML/CSS

 

 


↓Comments↓

No comments so far, be the first one!

Your view point or opinion?
Nickname *
 
Gravatar *
Required (not shown), used only for displaying Gravatar and receiving future notification when new comment(s) posted on this blog.
 
Website/Blog
 
Content *
Current length:     Maximum allowed: charactors