When it comes to embedding video content on the web, the <video> tag in HTML5 is the bee's knees. It allows for native video playback in all modern browsers (including mobile!), which means a majority of viewers won't need a plugin like Flash. We covered this same topic back in 2010, but a lot has changed since then in terms of both browsers and devices.
Although HTML5 and the video element have come a long way since 2010, a lot of the same tough choices for publishers remain. There's still no silver bullet of a codec that all browsers support, and improving mobile devices mean different levels of video support.
In this post we'll go over what outputs are best for the web, mobile device support, and touch on bitrate recommendations. Ultimately the best outputs for you depend on your needs, but here's a basic guide for getting started using HTML5 video.
Wait…why avoid Flash?
One of the best things about HTML5 video is that it means (most) users won't need to use Flash for playback. You might be asking, "what's so bad about Flash? It seems like just yesterday that whole sites were being built with it!"
There are a whole heap of reasons, but ultimately it comes down to a better experience for the user. HTML5 video loads quicker than a Flash plugin and uses less system resources, on top of being much easier to use from a web developer's standpoint. Mobile devices also have scattered Flash support, but neither iOS or Android (since 4.1) support it.
That being said, Flash still plays an important role on the web. Many older browsers don't support HTML5 video, so in order to support them you'll need to provide a Flash fallback. Most HTML5 video players (such as Video.js) will handle this for you. From here on we'll be working under the assumption that we're trying to avoid loading the Flash fallback whenever possible.
What formats?
There are three video formats that work natively in modern browsers. Unfortunately, none of these work in all browsers, so you'll need a combination of at least two for meaningful HTML5 video support.
Minimum
At the very least, you will need a .mp4 file with H.264 + AAC (or MP3). H.264 is supported natively by the most browsers, and can be played using a flash fallback in browsers where it isn't. The H.264 High Profile produces the highest quality, but Baseline has the most support, particularly among mobile devices (more on this later).
Supported Desktop Browsers
Safari 3.1+
Chrome 3.0+
Internet Explorer 9.0+
Firefox 21, 24 (disabled by default in 24, depends on system codec)
Supported Mobile Browsers
Android Browser 3.0+
Safari (iOS) 3.1+
Firefox (Android) 17.0+
Internet Explorer (Windows Phone) 9.0+
Multiple Formats
If you want to provide native playback in as many browsers as possible, you'll need to also include either an OGV (Ogg Theora + Vorbis) or WebM (VP8 + Vorbis) rendition. You could include both for max coverage, but most browsers that support one will support the other.
Supported Desktop Browsers
WebM
Chrome 6.0+
Firefox 4.0+
Opera 10.60+
Ogg
Chrome 3.0+
Firefox 3.5+
Opera 10.50+
Supported Mobile Browsers
(both) Android Browser 2.3+
In 2010, Ogg was supported in 44.64% of browsers, while WebM was only supported by 9.35%. In 2013, support between the two is almost identical. As of December 2012, Ogg is supported in 58.85% of browsers, while WebM is supported in 58.03%.
If you're going to choose between the two, we suggest going with WebM. Back in 2010 we said we thought WebM was the future of open video, and we still believe that's the case. WebM is the better codec and has a lot of momentum, so we think it's only going to continue to grow.
Recommendation: MP4 + WebM (or MP4 + WebM + Ogg for maximum coverage)
What about mobile devices?
Just like the desktop, there is no single profile that works on every mobile device. Most modern devices support H.264, but sadly there's a lot of variation in which H.264 profile they support. Fortunately, you can cover most modern mobile devices with just a few outputs.
The main differences between devices is the supported resolution and H.264 profile. The higher profiles (Main and High) will result in better quality at a certain file size, but they're harder to decode, meaning older devices can't support them. Baseline is the most basic, but it's supported by the most devices.
Most modern mobile devices support MP4/H.264. This includes the whole iOS series (iPhone, iPod, iPad, Apple TV, etc.), most Android devices, Windows Phone 7, modern Blackberry phones, etc.
Note that you can use the same file for both modern mobile devices and web, so if you want to reduce versions, you can get away with just one. If you want to support older mobile devices (in iPhone terms, 3GS and older), you'll need to stick with the Baseline profile. The newest devices (such as the iPhone 4S and 5) support High, but slightly older generations (such as the iPhone 4) only support up to Main.
Use 3GP/MPEG4 for much 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).
Modern Android devices (Android 2.3.3+) support WebM.
Recommendation: Minimally, MP4, 640×480 or 480×360 for the broadest support. Maximally, four MP4 versions (480×360, 640×480, 720p + Main, and 1080p + High profile) plus one 3GP version (320×240). Depending on your audience, you will most likely be fine with a set of outputs somewhere in between, but see our earlier post for specific encoding settings.
What about multiple bitrates?
By providing multiple renditions of a large video at different sizes and bitrates, you can support users with varying internet connection speeds. If the video you provide is HD (or close), you probably want to provide a few options. Say the highest quality version of a video you're providing is 1280x720, you may also want to provide a 640x480 version. If the highest quality is 1920x1080, you may want to up the number of renditions to also provide 640x480 and 1280x720.
Keep in mind that the HTML5 video element doesn't know anything about choosing which bitrate your user needs, so you'll need to either write your own logic to guess which rendition is best or let the user choose. Generally we suggest providing the user with a rendition on the lower end, then let them choose a higher quality version if they'd like.
TL;DR
Minimum: MP4/H.264 + WebM. The MP4 rendition is used in a Flash fallback when necessary.
For mobile, the same MP4 from above (using the Baseline profile) will take you a long way. Use 2-3 renditions at varying resolutions and profiles will allow for wider device compatibility and video quality.
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, just get in touch. If you'd like to see some sample API requests for HTML5 and specific devices, check out the templates in the Request Builder
Mobile: MP4/H.264, Baseline profile, 480×360 or 640×480
Support everything well
HTML5, Flash: MP4/H.264, High profile
HTML5: WebM
HTML5: Ogg
Mobile: MP4/H.264, Baseline profile, 480×360, for older mobile devices
Mobile: MP4/H.264, Main profile, 1280×720, for older iOS devices (iPhone 4 and older iPads/Apple TV). The newest devices (iPhone 5, etc) can support the desktop High profile rendition.
Mobile: 3GP/MPEG4, 320×240 and/or 177×144, for non-smartphones*
* 3GP output is currently in beta at Zencoder. Contact us to try it out.
