Embedding Video natively into HTML is a dream come true, finally, with HTML5. But the video tag has it's own quirks. While Firefox mostly asks for ogg/theora video+audio and "just works", serving the right video to Apple+Safari users or users with Opera, IE, etc. on all sorts of hardware/devices gives us cause for new headaches - well, currently. (Fingers crossed for the future.)
For example, a tag like
<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>
serves Apple devices well (via). The iPhone 3 pulls Baseline content, iPad grabs the Main version. Nice.
A mixed Firefox/everyone-else tag looks like this:
<video id="vid_geometry" width="1280" height="720" autobuffer> <source src="res/file.ogv" type='video/ogg; codecs="theora"'> <source src="res/file.mp4" type='video/mp4; codecs="avc1.4D401F"'> </video>
Here we got a mute video file, thus codecs only "theora", no "vorbis", contained in an .ogg file, named .ogv (ogg video). For devices/browsers/platforms not understanding .ogg, we offer .mp4 video here. But wait, what's this "avc.4D401F" string? Well, it tells browsers what Profile the mp4 file is in. How do you get that right? Well, the cypher seems to be "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):" (via)
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
But what is the Profile and Level? Head over here on Wikipedia to get an understanding, and then to video type parameters. And use avconv / ffmpeg to find out about the type of video. So here, we have "avc1" video, which is for "H.264/MPEG-4 Part 10 or AVC (Advanced Video Coding)" in Main Profile (= 4D40) with Level 3.1 (=1F) -> "avc1.4D401F", nothing else, as this is a mute video, no audio, nothing like the second codec hint "mp4a.40.2" in the first tag above.