search AntBlog701
inside AntBlog701
* AntTunes701 - your music guide.

* my Flickr

iPod touch

4 June, 2011

HTML5 Video

I have been working on a HTML5 Video page for the last few days. It was a kind of pain.
Initially I only wanted to included a simple link to the H.264 file (.mp4), but thought that it might be time to do something that would keep people happy, particularly those open-source extremists happy.

After digging around, I followed this excellent HTML5 video guide, Video - Dive Into HTML5.

In order to keep those open-source extremists happy, I converted the H.264 video to Ogg and WebM (WebM should be the video format of Don's choice, since it is backed by Google). I used the free Miro Video Converter, however, the conversion of Ogg resulted three times as large as the original H.264 file, so I used to re-convert the file. The resulted Ogg file? File size is acceptable, a bit larger than H.264, but the quality is only half a good.

Since I have both H.264 and WebM in pretty good quality, and reasonable file size, and the recent trend shows that WebKit based browsers is about to pass Firefox users, I could careless about the Ogg file. (Ogg is for Firefox 3.5, 3.6 users only, Firefox 4.0x user will load better quality WebM instead, and H.264 will cater Safari and IE9+ users )

Instead of pure HTML5, I added some fallback support, the ugly plug-in method. The popular fallback support is to use Flash player to play H.264 file, I decided to use something a bit different - using QuickTime plug-in as fallback support!

So, I have the same video in three different formats (H.264, WebM and Ogg), coded in HTML5 <video> tag for the browsers that support HTML5 tags. As for browsers not recognise the HTML5 tags? The free QuickTime plug-in is the answer.

For those who does not have QuickTime Player/plug-in installed? Get QuickTime Player!

As for future video inclusion in this blog? It will continue to be in H.264 for some time. Sorry Don.

Posted by Antony on 4 June 2011 10:57 PM |

more June 2011 blogs. (or 2011 blogs)
from iTunes Store:
post a comment

(You may use following HTML tags for comment formatting:
a href, b, i, br, strong, em, blockquote. two blank lines for a new paragraph.)

(Due to recent comment spamming, I need to take some actions. I apologise for inconvenience.)

AntBlog701 is an Antony Shen personal weblog. This blog does not represent SillyDog701. This blog may represent Antony Shen's thoughts or things happened around him. You may not use any contents from this blog to accuse Antony Shen. Antony Shen makes no guarantee about the accuracy of this blog.
sponsored links:

inside SillyDog701
* SillyDog701 (front door) - main SillyDog701.
* Message Centre (forums)
* Netscape Browser Archive
* Browser Version Guide
* MacCentre701, Macintosh news and informaiton centre.
- features: H.264 and other codecs comparison
* MozInfo701, Mozilla information and resource centre.
* Switch, simple steps to switch to the browser you can trust.
* Communicator Tips, featured in dynamic HTML presentation.
* Feedback

search SillyDog701

download iTunes
Get a Blogging Platform built to Grow with Your Business. Download Movable Type Now!

AntBlog701 is proudly powered by
Movable Type.
Page URL:
[AntBlog701] [AntGallery701 (photos)] [AntTunes701 (music)]
[SillyDog701] [Netscape] [MozInfo701] [MacCentre701][Search] [Feedback] [About SillyDog701] [Sitemap]
Copyright © 2003 - 2015 Antony Shen. All rights reserved. Copyright Notice. Privacy Statement.
Made on a Mac
support AntBlog701