Embedding Media
patented codecs for their browsers. Other browser makers like Mozilla and Opera opt instead for open,
unencumbered codecs and don’t support the patented flavors. Even though the latest versions of all of
these browsers support HTML5 embedded media, they don’t all agree on which codecs they support.
The codec is only one character in this story. Once the media data is encoded, it must then be
encapsulated and packaged for delivery in one of several formats. These container formats are the media
files that get sent around between servers and clients, carrying data that was encoded through a codec.
To play the embedded media, a web browser must first be able to read the container format and then be
able to decode the encoded data within it. Just as browsers support different codecs, they also support
different container formats for embedded media.
Embedded media must be served with the proper content type for each format, so both the client and the
server can know how to treat those files. The web server handles media types automatically, at least for
the more common formats. Some newer formats may need a helping hand on the server-side, usually just
by adding the new content type to a configuration file.
audio
The audio element embeds a sound file or audio stream in a web page. It’s a replaced element, but not a
void element, so it may contain other content and elements (as you’ll see), and requires an end tag. In its
simplest form, the audio element only needs a src attribute pointing to the audio file (or a stream, if it’s a
streaming source):
<audio src="audio/thwip.mp3"></audio>
However, it’s rarely quite that simple. By default, the audio element has no display properties at all, and is
completely invisible. It exists in the document, and can be accessed by the browser or by JavaScript, but
simply embedding a sound file doesn’t do much without a bit more effort. The optional, Boolean controls
attribute will tell a browser to display its native control bar:
<audio src="audio/thwip.mp3" controls></audio>
These controls, being native to the browser, tend to look very different in different browsers. Figure 5-9
shows the native controls from the latest versions of Firefox, Safari, Chrome, Opera, and Internet Explorer.
As you can see, there’s quite a variety in the interfaces, but they all offer the same basic functions—a
play/pause button, a seek bar with a position indicator, a time display, and a mute/volume control—and all
work in much the same way.
