At work I was trying out to see if I could use the new video tag in HTML 5 to show two different versions of the same video; one optimized for devices that accept only the Baseline profile (eg. iPhone 3G S and older, many other phones) and one optimized for larger devices (eg. iPad, iPhone 4 that support the Main profile). Turns out it works absolutely fabulous by using the codecs section in the type (Thanks to Dive into HTML 5 for the documentation).
<video OTHER_ATTRIBUTES_HERE>
<source src="PATH_TO_MAIN_PROFILE.mp4" type='video/mp4; codecs="avc1.4D401F, mp4a.40.2"' />
<source src="PATH_TO_BASELINE_PROFILE.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
The video codec for H.264 is: avc1.YYYYXX where YYYY represents the profile, while XX is the level (multiplied by 10 and turned into HEX):
Profile Value
Baseline 42E0
Main 4D40
High 6400
Extended 58A0
Level Hex Value
3.0 1E
3.1 1F
4.1 29
5.1 33
Now when I visit with an iPhone 3G it loads the baseline version, while my iPhone 4 and iPad both load the Main Profile version. For my current project I use video for whenever Flash isn’t available and it does leave a gap for Firefox and Opera users who don’t have Flash but according to our web stats they don’t actually exist.
It’s also important to note that Android users are also left in a lurch because any version lower than 2.0 doesn’t support <video>, and those that do can’t handle a <source> element having a type value like above. To top it all off it isn’t able to play or show controls on a video on it’s own. You have to add some JavaScript to your page in order to play to pass the click event and tell it to play.