EDIT: We've posted an updated guide on HTML5 video formats. Go check it out!
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 it enables codecs that previously weren't web playable.
But if you're publishing video content, this 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. WebM works in Firefox (4+), Chrome (6+ or Chromium), and Opera (10.60+), and Ogg works in Firefox (3.5+), Chrome (3+), and Opera (10.54+).
If you only pick one or the other, which one should you use - Ogg or WebM?
In our opinion, WebM is the future of open video. VP8 is a better codec than Theora, and will only get better as the video community gets behind it. Having Google on board doesn't hurt either.
But today, Ogg is supported in 44.64% of browsers, and WebM is only supported by 9.35%. So if you're encoding video today for consumption in October 2010, Ogg is a better choice. If you're encoding today for the next 12-24 months, we recommend WebM, or else using both.
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 recent post on encoding video for mobile use. For an in-depth guide on HTTP Live Streaming for iOS, check out our guide, Best Practices for Encoding Video for iOS.
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).
3. Expect WebM to make its way to Android and other mobile platforms in the next year or two. But for now, use MP4 for the best quality Android support.
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.
What about 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.
What about streaming?
This guide doesn't even take streaming video into account. RTMP streaming (Flash), Smooth Streaming (Silverlight), and HTTP Live Streaming (iOS) all require specially-prepared video. That's beyond the scope of this post, but look for another post on that topic soon.
TL;DR
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, email us or chat with us directly. 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
2. Round it out
HTML5, Flash: MP4/H.264, High profile
HTML5: WebM
HTML5: Ogg
Mobile: MP4/H.264, Baseline profile, 480x360 or 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*
* 3GP output is currently in beta at Zencoder. Contact us to try it out.
