Firefox 4 <audio> doesn't show fallback content if only an MP3 source is given

Question

Here's my code:

<audio controls preload="auto">
   <source src="audio/batcat.mp3" />
   Your browser doesn't play MP3s. <a href="audio/batcat.mp3">Download the audio instead.</a>
</audio>

In Chrome & IE9, the browser displays the native audio player.

In Firefox, I would expect it to show the fallback text and the link. Instead, it shows an ugly grey box with an X in the middle and doesn't show the fallback content.

Is this a Firefox bug, or am I doing something wrong?

Are browser makers actually saying include every possible format, or don't use the element at all. That seems a bit harsh.

EDIT The answer to the above question is "yes" apparently. All I can say to that is :(

Answer 1

Firefox should indeed fallback to the link to the audio file as you've said. It goes through the source list and if it can't find one it is able to play, it should move on.

Perhaps try adding the type aatribute to the source declaration to help the browser decide it won't be able to play it?

<source src="audio/batcat.mp3" type="audio/mp3">

Also if you had a sample page so we could see it in action (or not as the case may be!) that would be helpful.

edit I've tested it myself and indeed you are correct, it simply doesn't work. How strange, I would have expected it to. The only way to get it to work was by adding a source with an OGG file which it can play.

I suggest you use something like Modernizr to check if it can play MP3s or not.

Answer 2

You're right. This is because each browser supports different "codecs." Originally, HTML5 was going to have a single codec, but the browser vendors could not agree on which one (patent-encumbered vs. open source) so that requirement was dropped.

For example, for video, IE and Safari support H264 (MP4), Chrome, FF, and Opera WebM/Ogg. To ensure it works in all browsers, you can supply multiple source elements and encode your video three times. Mp4 first, WebM or Ogg second (browsers that support video will try each source element until they find one they can play. Note: currently there is a "bug" on the iPad where it can only play the first source element)

You can even embed a Flash object for your fallback so your video will also work in older versions of IE (<9). You'll end up with something like this:

<!—Multiple videos with alternate Flash content-->
<video controls>
 <source src="rocpoc.mp4">
 <source src="rocpoc.ogv"> 
    <object data="videoplayer.swf" type="application/x-shockwave-flash">  
      <param name="movie" value="rocpoc.swf"/>  
    </object>  
    A movie by Rocky Lubbers
</video>

If you want to show a link to the file if the browser cannot play the MP3 file, you can use a little bit of JavaScript code to test if the browser can handle the MP3 format and show a link to a file instead of the video instead. The JavaScript method to call is canPlayType.

//Checking for browser support
//canPlayType returns null, maybe, or probably (the best)
//You can check if they are supported in navigator.plugins

var support = videoElement.canPlayType('video/some-format;codecs="some-codec"');

Alternatively, (for video only, I think) you can use services like vid.ly (http://m.vid.ly/user/) that serve up the right files from the cloud.

Answer 3

Same is true for video! If you embed an MP4 file only, Firefox does not jump to the fallback but renders the grey "I cannot play this format" box. You have to use JavaScript to detect which codecs the browser is able to play.

http://praegnanz.de/html5video/firefoxtest