How to serve OGG video to Firefox 3.6 and WEBM video to Firefox 4?

Question

My code looks like this:

<video>
<source src="movie.webm" type="video/webm" />   
<source src="movie.ogv" type="video/ogg" />
</video>

or, like this:

<video>
<source src="movie.ogv" type="video/ogg" />
<source src="movie.webm" type="video/webm" />   
</video>

If I list the webm source first, Firefox 4 plays it but Firefox 3.6 also tries to play it (and fails, because it doesn't support webm).

If, instead, I list the ogg source first, both versions play it, so the webm version is useless.

Is there a way (without browser sniffing) to get Firefox 4 to ignore the ogg and/or Firefox 3.6 to ignore the webm?

Secondary question - since ogg does work in both versions, are there actually any benefits to using webm?

Answer 1

Firefox 3.6 should know that it cant play your WebM. try to specify codecs on your <source> tags:

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
        <p>This is fallback content</p>
</video>

Answer 2

There is a preferred ordering to the source elements:

1. mp4 - iPad has an issue playing video if its supported format isn't listed first. Be sure mp4 comes first.
2. webm - webm is higher quality than ogg, so browsers that support both will choose webm first if listed in this order.
3. ogg - list this one last to cover browsers that don't support webm (or, obviously, mp4).

Browsers will search from the top and load the first one they support, but ordering does have other implications as I just outlined. If the browser doesn't support it, it just skips the format.