- In the Past
- Simplicity
- The Problem of File Formats
- Legacy Browsers
- Controls
- Adding Some Style
- Video in Writing
- Video and Canvas
- What the Future Brings
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"> </audio>
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.