HTML and CSS Reference
In-Depth Information
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 an-
other 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 of the video files is given in the source
element's
src
attribute.
Example1-2.HTML5webpagewithembeddedvideoelementwiththreeseparatevideo
types
<!DOCTYPE html>
<head>
<title>Video</title>
<meta charset="utf-8" />
</head>
<body>
<video id="meadow" controls>
<source src="videofile.mp4" />
<source src="videofile.ogv" />
<source src="videofile.webm" />
