Use "type" and "codec" Attributes with your Fallback URLs

The problem with the fallback URLs example above is that the browser will download each file, try to play it, and if it fails, it will download the next.

It would be better if the browser could tell it can’t play it before it downloads the file.

Well it can. The source element has two attributes that the browser can check to see if it can play WITHOUT downloading each file.

The first is type, which is the mime type, almost always a container format.

The second is codec, the specific codec used for encoding the file. May container formats can utilize different codecs, for instance, MP4 can be h.264 or h.265 or several other formats. And h.264 also consists of over a dozen versions or “profiles,” not all of which are compatible with all browsers.

So for an mp3, you might do something like this:

<audio>
  <source src="file.mp3" 
          type="audio/mpeg" 
          codec="mp3">
  </source>
</audio>

You may not always know the codec (and describing it is quite complicated with some formats), but try to give the browser as much information as possible. At a minimum, you should know the type.

Honestly, the codec part can get really complicated, and encoding formulas are more art than science, so if you’re doing a commercial product you really should–shameless plug–hire someone like me to help you out.

Current Elm Difficulty = Easy

This is really easy in Elm. The type_ attribute is already there in elm/html, and it’s easy to define your own codec attribute function.