Use Fallback URLs

Different browsers support different codecs and container formats for both audio and video. There’s no video container, for instance that works across all browsers that support html5 video (although mp4 with h.264 will work 99% of the time).

But even if there is a format that covers all the browsers you need to support, the best user experience occurs when you provide the most efficient codec the browser supports.

I’ll use audio as an example, because it’s simpler, but this is even more important for video.

MP3 is now patent free in the US and Europe, so it should be supported everywhere, but both Ogg and Aac are more efficient codecs, and if possible, you should serve one of those.

However, Aac isn’t supported on Firefox, and Ogg isn’t supported on Safari. So which do I provide?

You don’t have to choose. You can try to serve an Aac, and if that doesn’t work, serve an Ogg, and if that doesn’t work, serve an Mp3. You can do it like so:

<audio>
  <source src=“file.m4a”></source>
  <source src=“file.ogg”></source>
  <source src=“file.mp3”></source>
</audio>

Current Elm Difficulty = Trivial

The source element exists in elm/html.