Web Audio and Video Best Practices
  • General Best Practices for Working with Web Media
  • Have Fun with Design
  • Use a Player
  • Have Closed Captions (or Transcripts)
  • If you have to use Autoplay, Mute the Audio
  • Use Only One Media Element at a Time
  • Use fragmented MP4
  • Use Fallback URLs
  • Use "type" and "codec" Attributes with your Fallback URLs
  • Actually, You Should Probably Use HLS or MPEG-DASH
  • Use Fallback Urls with HLS and Dash
  • Conclusion
Powered by GitBook
On this page

Was this helpful?

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.

PreviousUse Fallback URLsNextActually, You Should Probably Use HLS or MPEG-DASH

Last updated 6 years ago

Was this helpful?