How many formats do I need for HTML5 video?

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 640×480 or smaller for iOS and Android, and 480×360 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, 640×480 or 480×360. Maximally, three MP4 versions (480×360, 640×480, 720p + Main profile) plus one or two 3GP versions (320×240 and maybe 176×144). 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 640×360, and another at 1280×720. 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, 480×360 or 640×480
  • 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, 480×360 or 640×480

3. Support everything

  • HTML5, Flash: MP4/H.264, High profile
  • HTML5: WebM
  • HTML5: Ogg
  • Mobile: MP4/H.264, Baseline profile, 480×360, for wide compatibility
  • Mobile: MP4/H.264, Main profile, 1280×720, for newer iOS devices (iPhone 4, iPad, Apple TV)
  • 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.

  • Peter
  • Peter
  • Peter
  • http://blog.ewakened.com Kent Fenwick

    Great post! Thanks for the info. Keep this stuff coming :)

  • http://blog.ewakened.com Kent Fenwick

    Great post! Thanks for the info. Keep this stuff coming :)

  • http://kent.posterous.com Kent Fenwick

    Great post! Thanks for the info. Keep this stuff coming :)

  • http://brajeshwar.com Brajeshwar

    Thanks for such an informative article.

  • http://brajeshwar.com Brajeshwar

    Thanks for such an informative article.

  • http://twitter.com/apinstein Alan Pinstein

    Great post! Question: what's special about the baseline profile that makes it the only h.264 that plays on iOS?

  • http://twitter.com/apinstein Alan Pinstein

    Great post! Question: what's special about the baseline profile that makes it the only h.264 that plays on iOS?

  • http://twitter.com/apinstein Alan Pinstein

    Great post! Question: what's special about the baseline profile that makes it the only h.264 that plays on iOS?

  • http://brajeshwar.com Brajeshwar

    Thanks for such an informative article.

  • http://twitter.com/apinstein Alan Pinstein

    Great post! Question: what’s special about the baseline profile that makes it the only h.264 that plays on iOS?

  • http://twitter.com/apinstein Alan Pinstein

    Great post! Question: what’s special about the baseline profile that makes it the only h.264 that plays on iOS?

  • jondahl

    Alan: the Baseline profile is less complex than the Main or High profiles, which makes it easier to decode (and decodable on slower/older computers). For example, Baseline doesn't use the CABAC algorithm, which improves compression efficiency but increases decoding complexity. Check this article for more details: http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC#Profiles

  • http://zencoder.com Jon Dahl

    Alan: the Baseline profile is less complex than the Main or High profiles, which makes it easier to decode (and decodable on slower/older computers). For example, Baseline doesn't use the CABAC algorithm, which improves compression efficiency but increases decoding complexity. Check this article for more details: http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC#Profiles

  • http://zencoder.com Jon Dahl

    Alan: the Baseline profile is less complex than the Main or High profiles, which makes it easier to decode (and decodable on slower/older computers). For example, Baseline doesn’t use the CABAC algorithm, which improves compression efficiency but increases decoding complexity. Check this article for more details: http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC#Profiles

  • http://www.tentonbooks.com/ Geoff Blake

    This is a very well researched article, thanks a lot for the great info. Admittedly though, the dizzying array of formats, platforms, and compatibilities is making my head hurt…

  • http://www.tentonbooks.com/ Geoff Blake

    This is a very well researched article, thanks a lot for the great info. Admittedly though, the dizzying array of formats, platforms, and compatibilities is making my head hurt…

  • http://www.tentonbooks.com/ Geoff Blake

    This is a very well researched article, thanks a lot for the great info. Admittedly though, the dizzying array of formats, platforms, and compatibilities is making my head hurt…

  • JeffB

    Newer iOS devices support the h.264 Main Profile.

    From the iPhone 4 specs:
    “Video formats supported: H.264 video up to 720p, 30 frames per second, Main Profile level 3.1…”

    See:
    http://www.apple.com/iphone/specs.html

  • JeffB

    Newer iOS devices support the h.264 Main Profile.

    From the iPhone 4 specs:
    “Video formats supported: H.264 video up to 720p, 30 frames per second, Main Profile level 3.1…”

    See:
    http://www.apple.com/iphone/specs.html

  • JeffB

    Newer iOS devices support the h.264 Main Profile.

    From the iPhone 4 specs:
    “Video formats supported: H.264 video up to 720p, 30 frames per second, Main Profile level 3.1…”

    See:
    http://www.apple.com/iphone/specs.html

  • http://twitter.com/sethhinz Seth Hinz

    Perhaps the best article I've read on prepping videos for universal playback. Thanks!

  • http://twitter.com/sethhinz Seth Hinz

    Perhaps the best article I've read on prepping videos for universal playback. Thanks!

  • http://twitter.com/sethhinz Seth Hinz

    Perhaps the best article I’ve read on prepping videos for universal playback. Thanks!

  • OwenW

    Brilliant post – clear, up to date info. My compliments and appreciation.

  • OwenW

    Brilliant post – clear, up to date info. My compliments and appreciation.

  • Rigobert_song

    Thank you very much, you saved me a lot of time. Nice Job.

  • Rigobert_song

    Thank you very much, you saved me a lot of time. Nice Job.

  • http://seo-it-right.co.uk/services/ small business seo

    How has consolidation affected the international formats business? In Spain, there have been two kinds of consolidation: among producers and the big mediaHow has consolidation affected the international formats business? In Spain, there have been two kinds of consolidation: among producers and the big media

  • Juav

    Did somebody knows how to embed smil in a web page for playback in ipad-ipod?

  • Juav

    Did somebody knows how to embed smil in a web page for playback in ipad-ipod?

  • http://praxis-2.com/ Praxis 2 practice test

    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? 

  • Rina Noronha

    Hi!
    I’m the web editor at iMasters, one of the largest developer communities in
    Brazil. I´d like to talk to you about republishing your article at our site.
    Can you contact me at rina.noronha@imasters.com.br?

    Bests,
    Rina

  • Rina Noronha

    Hi!

    I’m the web editor at
    iMasters, one of the largest developer communities in Brazil. I´d like to talk
    to you about republishing your article at our site. Can you contact me at
    rina.noronha@imasters.com.br?

    Bests,

    Rina Noronha
    Journalist – web editor
    http://www.imasters.com.br
    redacao@imasters.com.br
    rina.noronha@imasters.com.br
    +55 27 3327-0320 / +55 27 9973-0700

  • Chris

    Thank you very much for this, I am a php developer and video formats is not my strong point, you cleared a lot of things up for me, excellent job.

  • Anonymous

    Great article, I am sure some things are different now considering the date of publishing, but this is the first article that I have found with a good explanation of what is needed for video output for HTML5 + mobile. Thanks for the resource!

  • sathish

    very useful topic people..then suggest any player plugin used into my website to played in all browsers and mobile platforms with out fail..? if know any idea plz post here

  • http://twitter.com/michelegera Michele Gerarduzzi

    This is definitely the most complete and clear explanation on this subject I’ve come across, great job!

  • http://www.earthsayers.com/ Ruth Ann Barrett

    Here’s what I don’t understand. I’m a video producer. I export to MP4 but never see MP4/h.264 as an option, just MP4 and post on YouTube and other portals such as Blip.tv.

    My videos when embedded on a website do not play or even appear on the iPhone or IPad.because, as I understand it flash and,yes, I read Steve’s open letter. When I seek to convert a file to HTML5, which as a non-coder I have no idea what that means when it comes to video, I am having no luck using converters. This is all very confusing especially because I am having trouble finding video producers even talking about it.

  • http://zencoder.com Jon Dahl

    This is a complex set of topics, but: MP4 will play natively on an iPhone or iPad, but it won’t play in a Flash player. You have to use the native HTML5 playback instead. Check out something like Video.js for a seamless way to support both.

    In your video tool, exporting to MP4 almost certainly means MP4/H.264, unless it’s five years old.

  • Karl s

    Wots the best formats to b able to play a video on a sum vision cyclone please?

  • Yannick Dinand

    Thanks a lot for this great post. It helps me a lot. I still wonder one thing : many youtube videos can be read with any devices. Does it mean youtube convert automatically the uploaded videos in all those formats ?

  • SQIAR BI

    SQIAR (http://www.sqiar.com/services/... is a leading Business Intelligence company and provide Services in United Kingdom and USA.

blog comments powered by Disqus