HTML5 Media

Support for Multiple Media File Types

Figure 1-1 showed Example 1-1 in Firefox, using the default control UI that Firefox provides. You’re probably curious to see what the default styling is for the audio element control in another browsers, such as Internet Explorer 9.x. If you open the page in IE 9, though, all you’ll get is a black box with a small red x signaling broken content.

The reason you received an indication of broken content is because the audio element only features one type of audio content—an audio file encoded as Ogg Vorbis. Microsoft does not support Ogg Vorbis in Internet Explorer.

Note

You can play Ogg Vorbis files in IE 9 if you install supporting software. I’ll cover this in more detail in the next section.

Testing the page with all our target browsers, we find that the audio file works with Chrome, Opera, and Firefox, but not with Internet Explorer or Safari. In IE, the element appears broken, while in Safari the control appears but nothing happens when you hit the play button.

We’ll get into the various audio and video codecs and browser support in the next section, but for now, let’s see what we can do to ensure media files work with all of our target browsers. This time, though, we’ll add a video element to the page.

In Example 1-2, the web page contains a video element, but rather than provide the location of the video file in the element’s src attribute, three different video files are defined in three different source child elements. The location for each ...