Using HTML 5's Video To Serve Baseline and Main Profile Content

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.