HTML5 Encoding

Introduction

The <video> tag in HTML5 is a great thing. It enables native video playback in all current browsers, rather than relying on a plugin like Flash. It opens the door to web video on devices that don't support Flash and enables codecs that previously weren't web playable.

But if you're publishing video content, browser support can be confusing. To really support web video, how many output versions do you need to create? WebM, Ogg, and MP4? What about iPhone or Android? What about low/medium/high bitrate versions?

There isn't a single answer to this question, so here is a short guide to picking outputs for HTML5 video.

What web formats?

There are three video formats that work natively in some browsers. Unfortunately, no format works in all browsers, so you need to do at least two if you want meaningful HTML5 video support.

Minimally, you must use MP4 + H.264, with AAC or MP3. MP4 video plays natively in Safari, Chrome, and IE9 (Vista/Windows 7). It is also your best option for a Flash video fallback, and plays natively on many devices (iOS, Android, Blackberry, PSP, Xbox, PS3, etc.). Use H.264 High Profile for the best quality, or Baseline profile if you want the same video to be playable on mobile devices.

Beyond that, use either WebM + VP8 or Ogg + Theora with Vorbis audio for other browsers.

Recommendation: Minimally, MP4 + either WebM or Ogg, or maybe both.

What mobile devices?

Again, there is no single mobile profile that works on every mobile device. In fact, there are more varying standards for mobile video than there are for web. But fortunately, a few well-selected recipes can cover most modern mobile devices.

For full details, check out our guide on encoding video for mobile use.

1. Most modern mobile devices support MP4/H.264. This includes the whole iOS series (iPhone, iPod, iPad, Apple TV, etc.), most Android devices, modern Blackberry phones, etc. For most of these, be sure to use the H.264 Baseline profile. Use 640x480 or smaller for iOS and Android, and 480x360 or smaller for Blackberry support.

Note that the same file that plays on an iPhone can play on the web, via HTML5 (some browsers) or Flash. So if you want to reduce versions, use the same one. But you're stuck with Baseline profile for most mobile devices, and Main/High makes a big difference, so using separate output versions is a good idea if you want the best quality for each device.

2. Use 3GP/MPEG4 for older mobile devices. Most Blackberrys and some Androids also support 3GP, and 3GP generally even plays on iPhone/iPod too (since iOS plays MP4/MPEG-4 and 3GP is just a subset of MP4).

Recommendation: Minimally, MP4, 640x480 or 480x360. Maximally, three MP4 versions (480x360, 640x480, 720p + Main profile) plus one or two 3GP versions (320x240 and maybe 176x144). See our earlier post for specific encoding settings.

Multiple bitrates

Should you use multiple bitrates to deliver larger video to users with fast internet connections, and smaller videos to users with slower internet connections? If your users are watching high-quality video on the web, then the answer is probably "Yes". Consider using 2-3 sizes and bitrates to accomplish this – e.g. one video at 640x360, and another at 1280x720. More on this in a future post.

Streaming

Zencoder supports HTTP Live Streaming for iOS devices, as well as Microsoft Smooth Streaming (Silverlight).

Summary

1. The minimum for HTML5 video is MP4 + WebM or Ogg (or both), using the MP4 version for Flash fallback.

2. For mobile support, one H.264/MP4 output can take you a long way. 2-3 enables better quality and wider compatibility.

Recommendations

Here are some suggested configurations. Zencoder supports all of these formats, and if you're wondering how to create the optimal output profiles using Zencoder, please open a support ticket. We're always happy to give you advice.

1. Get it working

• HTML5, Flash, Mobile: MP4/H.264, Baseline profile, 480x360 or 640x480
• HTML5: WebM or Ogg

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "size": "640x480"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm",
        "size": "640x480"
    }
    ]
}

• HTML5, Flash: MP4/H.264, High profile
• HTML5: WebM
• HTML5: Ogg
• Mobile: MP4/H.264, Baseline profile, 480x360 or 640x480

2. Round it out

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.mp4",
        "size": "640x480"
    }
    ]
}

3. Support everything

• HTML5, Flash: MP4/H.264, High profile
• HTML5: WebM
• HTML5: Ogg
• Mobile: MP4/H.264, Baseline profile, 480x360, for wide compatibility
• Mobile: MP4/H.264, Main profile, 1280x720, for newer iOS devices (iPhone 4, iPad, Apple TV)
• Mobile: 3GP/MPEG4, 320x240 and/or 177x144, for non-smartphones*

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-480x360.mp4",
        "size": "480x360"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-1280x720.mp4",
        "size": "1280x720"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.3gp",
        "size": "320x240"
    }
    ]
}