Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
From the author of The Problem of File Formats

The Problem of File Formats

If this was beginning to sound too easy, well there is an issue with the file formats of the audio and video files. The different browser vendors were unable to agree on what file formats their browsers would support, and subsequently different browsers support different formats or codecs.

As it stands, for audio, Firefox supports Ogg Vorbis, Chrome supports numerous such as Ogg Vorbis and MP3, Safari favours MP3 and AAC, Opera prefers Ogg Vorbis and Internet Explorer 9 is a fan of MP3.

For video, Firefox, Chrome and Opera all favour the new WebM format whilst Safari and Internet Explorer 9 prefer the MP4/H.264 format.

So in order to cover all these HTML5-capable browsers, you must serve up your media content in at least two different formats. Thankfully HTML5 supports you in doing this via the source element, which enables you to declare multiple sources for an audio or video:

<audio controls>
   <source src="audio.ogg" type="audio/ogg">
   <source src=audio.mp3" type="audio/mp3">

Of course the source element can also be used in the same way with video. You'll also notice that the type attribute in the source element allows you to specify the type of the media source that aids the browser in deciding if it can play it or not.

  • + Share This
  • 🔖 Save To Your Account