CODEWITHSUNDEEP
htmlvideohtml5-videooggwebm
Bo Orloff
Bo Orloff

Reputation: 41

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

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?

Upvotes: 4

Views: 2327

Answers (2)

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 2

Variant
Variant

Reputation: 17365

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>

Upvotes: 4

Related Questions