Make your HTML5 Video support all browsers | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Written by Wayne Ye Monday, November 7, 2011 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
IntroductionHTML5 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:
So to support all browsers: IE 6.0+, Firefox, Chrome, Safari, Opera, etc, what should we do? Cross All Browser ImplementationBy 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"> 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.
Few tips | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||