Best video format for HTML5?

StackOverflow https://stackoverflow.com/questions/4309059

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.)

Was it helpful?

Solution

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

OTHER TIPS

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top