How to Maximize HMTL5 video Compatibility?

July 9, 2012 html5video HTML5 Video

HTML5 uses video element to render videos on web pages. But HTML5 video is not the ultimate solution, it doesn’t work everywhere. Do you know what HTML5 video really work on the web? Are you concerned about HMTL5 video compatibility? Check out this article for the suggestions and solutions for maximum HMTL5 video compatibility.

As we know that there is no industrial standard for displaying a video or movie on web pages so far. Other than browsers themselves, most websites display videos through browser plug-ins, such as Flash player. HTML5 however includes a <video> element for embedding video into a web page. The W3C thus introduces this HTML5 video element a new standard for showing videos on the internet. There are no restrictions on the video codec, audio codec, or container format you can use for your HTML5 video. To gain maximum HMTL5 video compatibility, you can link to multiple video files in a single <video> element, and the users’ browsers will choose the first video file it can actually play automatically.

This is the recent landscape of HTML5 video:

• Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.
• Internet Explorer 9 supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE9 does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).
• Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.
• Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.
• Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.
• Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
• Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.

You will find there is no single combination of containers and codecs that works in all HTML5 browsers. And due to licensing and other issues, this is not likely to change in the near future.

You may refer to this article: HTML5 Video Browser Compatibility- Issues and Solutions!

For maximum compatibility, you can follow bellow workflow for your HTML5 video work.

1. Make one version of your video that uses WebM (VP8 + Vorbis).

2. Create the second version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.

3. Make the third version that uses Theora video and Vorbis audio in an Ogg container.

4. Link to all three video files from a single <video> element.

<video controls="controls" poster="http://html5videoplayer.net/poster/toystory.jpg" width="640" height="360">
<source src="http://html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
<source src="http://html5videoplayer.net/videos/toystory.webm" type="video/webm" />
</video>

Here is the result of above code:

To maximize HTML5 video compatibility with all browsers, you can also nest <object> element for Flash fallback in the <video> tags. You can even include the download links to the different HTML5 native videos.

With the combination of HTML5 and Flash, you should be able to get the maximum HMTL5 video compatibility and watch your video in almost any browser and device. Do not forget that, even all these does not work, you still have the direct download links for the HTML5 native videos.

HMTL5 video compatibility, maximize HMTL5 video compatibility, maximum HMTL5 video compatibility

HTML5 Video Browser Compatibility How to Embed HTML5 Video into Web Pages?