HTML5 Video Browser Compatibility
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. However we’re concerned about the HTML5 video compatibility, its browser support and compatibility. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. In this article, we will go through the issues, problems and solutions you need to know about HTML5 video.
Major browsers that support the <video> element are Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However not all these browsers support all the three HTML5 video formats due to the licensing and patent requirements for some video/audio codec. For example, IE 9 supports MP4, not the other two video formats. Mozilla and Opera refuse to support H.264. For the HTML5 video browser compatibility details, see bellow table:
|Internet Explorer 9||YES||NO||NO|
|Google Chrome 6||YES||YES||YES|
|Apple Safari 5||YES||NO||NO|
- MP4: MPEG 4 files with H264 video codec and AAC audio codec
- WebM: WebM files with VP8 video codec and Vorbis audio codec
- Ogg: Ogg files with Theora video codec and Vorbis audio codec
For greater browser compatibility for HTML5 videos, we need to embed different HTML5 video formats and files into the same web page for the same video. However this could be a considerable encoding headache for most of us. Thus some HTML5 video players have built-in with the capacity of converting videos into different HTML5 video formats in a batch mode. That’s to say, you can import one source video clip and such HTML5 video players output 3 different video clips in different HTML5 formats.
Another browser support issue of HTML5 video are about those old browsers, such as Internet Explorer 8 and earlier versions of other browser that do not support the <video> element. To compensate, make sure that you add a fallback Flash version as well. Actually HTML5 Video with a fallback to Flash is very popular now, as Flash is still the most popular video formats around the web nowadays. You will need to put the old-style Flash embedding code inside the HTML5 <video> element as fallback, so that if the browser doesn’t know anything about the HTML5 native video, it defaults to the Flash fallback content inside the tags.
However sometimes, if a plugin such as Flash is not installed on your browsers, the Fallback will not help. For extra html5 video compatibility when Flash is not installed, you can display an image or download link of the HTML5 native videos.