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