Best video format for HTML5?
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.)
Answer
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