Jul 11

HTML5 video tag, How-to get video versions and "codecs" hints right

Category: Linux,multimedia,WWW   — Published by goeszen on July 11, 2013 at 5:30 pm

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

   <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"' />

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"'>

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.

4 Responses to “HTML5 video tag, How-to get video versions and "codecs" hints right”

  1. Andrew says:

    i love you. thank you so much

  2. goes says:

    "I know."

    You're welcome.

  3. Andrew says:

    i love you. thank you so much

  4. goes says:

    "I know."

    You're welcome.

Leave a Reply