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

4
votes

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?

2
htmlvideohtml5-videooggwebm
webm is for IE9, yet another format. – Chris Barry
just an idea: does type='video/webm; codecs="vp8, vorbis" help? regarding your secondary question: There is a benefit: webm files are smaller while having the same quality. – JanD
webm only works on IE9 with a plugin. IE9 supports mp4 natively. – kinakuta
Webm and mp4 now cover everything on the web. Unfortunately ogv is losing out, in that the other two cover things better. Once the ff3.6 market share drops, you really won't need it any more. It's currently 9% globally. gs.statcounter.com/#browser_version-ww-monthly-201104-201106 This is a good source about what is supported by what: diveintohtml5.org/video.html#what-works . I hope webm remains open and google doesn't try to monetize it once they've got the market. Then we'll need ogv all over again! – thugsb

2 Answers

4
votes

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>
2
votes

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.