Just like in the early 1990's when there was the "console wars" between Nintendo and Sega, now we have the "video codec wars" between Theora (ogg) and H.264 with regard to HTML 5.
I've tested both Theora and H.264 with a series of web browsers, using the new <video> element in HTML 5. These are the following operating systems and browsers I used:
Mac OS X - Firefox, Safari, Opera, Chrome, and Flock.
Windows 7 - Internet Explorer 8, Firefox, Safari, Opera, Chrome, and Flock.
Kubuntu 10.04 - Konqueror, Firefox, and Flock.
Ubuntu 10.04 - Firefox, and Flock.
I tested on an iPhone and iPod Touch as well.
My findings are as follows:
Firefox and Opera work well using ogg video, can't play H.264.
Safari works well with H.264, can't play ogg. (If you use Safari on Windows, you must have QuickTime installed or else Safari won't reconize the <video> element.)
Chrome plays
video well with both formats, however the
audio is a different story. Audio works well with H.264, but it is out-of-sync with ogg. So for Chrome, H.264 is recommended.
iPhone & iPod Touch works well with H.264, but can't play ogg.
Internet Explorer 8 doesn't support the new video element in HTML 5. However, Microsoft promises they will support it in the future with Internet Explorer 9 and says it will support H.264 only.
Flock does NOT currently support HTML 5 videos, which is surprising considering that Flock is "Powered by Mozilla" and uses the same Gecko rendering engine that Firefox uses. No word yet on if Flock will ever support these videos.
I used
Miro Video Converter to convert videos to the Theora (ogg) format. Video is outputted as .ogv and this MUST be renamed .ogg otherwise the video won't work with Firefox. However, .ogv works just fine in Opera.
My suggestion for anyone who wants to put videos on their website using <video> would be to use both formats to ensure the video will play in all the supported browsers. The following code example should help:
<video controls width='640' height='480' poster='poster.jpg'>
<source src='video.mp4' type='video/mp4'>
<source src='video.ogg' type='video/ogg'>
</video>
That will first check to see if the browser accepts H.264, and if not it will use the Theora version.
UPDATE: As of January 2011, Google announced that Chrome would be dropping support for H.264 in favor of WebM. They will keep support for Theora.
UPDATE: As of March 2012, Mozilla announced that Firefox will support H.264. Read more here |