Best video format for HTML5?

Question

I've got a set of videos that are going to be posted on a new site I'm developing, using our new html5 player. I know Firefox only supports .ogg format, whereas most others (including eventually IE9) support h264.

I'm looking to tap into the experience of the crowd here: has anyone had any luck with a single video format across browsers? Or am I doomed to double-encode everything? It just seems a shame to waste space on having two copies of each video because we can't standardize our codecs.

Thanks in advance!

PS (Flash player isn't really an option as a fallback, partly on principle and partly because of a rather large mobile userbase.)

Conciliate

Regretfully, but there is no single standard at this time; however WebM (webmproject.org) is one of better candidates (Firefox 4 already supports it as well as Opera does). Taking into account that it is backed by Google, it has a chance. – Facesaving

No, Firefox is NOT the only one to support OGG and it's supported in Chrome and Opera, too. Only Safari and IE don't. – Flour

Answer 1

From my personal experience with HTML5 Video, I create mp4, ogg, and flv file formats, and use the following implementation:

<video id="movie" width="" height="" preload controls>
   <source id="srcMp4" src="video.mp4" />
   <source id="srcOgg" src="video.ogg" />
   <object id="flowplayer" name="flowplayer" width="480" height="352" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" 
            type="application/x-shockwave-flash">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" 
    value='config={"clip":"http://domain.com/video.flv"}' />
   </object>
</video>

The MP4 format is provided first, due to a previous bug in iPad which only sees the first source listed.

If the browser can't play the MP4 version, it tries to load the Ogg version. If that fails, it uses Flowplayer (flash) as a fallback.

I know you're looking for a solution without flash as a fallback, but in my opinion, we're just not there yet. People are still using IE6 for crying out loud!

HTML5 Video is still in the making, and until it's completely stable across all browsers and platforms, you'll need to provide a "workaround" for different scenarios.

For mobile, perhaps you can detect the User-Agent and go from there...

Hope this helps

Agonic

OV Web, thanks for providing this. Is this then limited for folks with IE9 (i.e. IE8 wouldn't work because it doesn't support HTML5)? – Ninanincompoop

@Ray, IE8 does not support HTML5, including the <video> element. To add support, you can use an HTML5 shim: github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js – Jaipur

Answer 2

Probably WebM if not Ogg. WebM's patents are owned by Google but have been released from that. Ogg is probably OK but there are concerns. H.264 is a patent trap waiting to happen.

Flour

H.264 licensing is brokered by the MPEG LA Group (mpegla.com/main). They have extended the license until the end of 2015. You read about it here: webmonkey.com/2010/08/… – Agonic

Still patent encumbered and not always free to use. – Flour

Answer 3

We have a somewhat similar problem.

<video id="movie" width="320" height="240" preload controls src="demo.mp4" /> 

We use the h.264 format, which I suggest you should do as well since you have a large mobile userbase (lots of iPhones I suppose).

However, WebM is the open format for people with principles ;) I can only hope MS and Apple will support it in the near future.

Sympathin

dev.innovationfactory.eu Link is dead, in fact the whole domain appears to be gone. – Subtract

@ChrisMoschini Thanks, the company doesn't exist anymore. I've removed the link. – Sympathin