HTML5 and CSS3, Second Edition

(singke) #1

CHAPTER 7


Embedding Audio and Video


Audio and video are integral parts of the modern Internet. Podcasts, audio
previews, and even how-to videos are everywhere, and until a few years ago,
they’ve only been truly usable via browser plug-ins like Flash. HTML5 intro-
duces new methods to embed audio and video files into a page. In this chapter
we’ll explore a few methods we can use to not only embed audio and video
content, but also to ensure that it is available to people using older browsers
and to people with disabilities.

We’ll discuss the following HTML5 features:


<audio> [<audiosrc="drums.mp3"></audio>]
Plays audio natively in the browser. [C4, F3.6, S3.2, IE9, O10.1, iOS3, A2]

<video> [<videosrc="tutorial.m4v"></video>]
Plays video natively in the browser. [C4, F3.6, S3.2, IE9, O10.5, iOS3, A2]

<source> [<sourcesrc="video/h264/01_blur.mp4"type='video/mp4'>]
Specifies the source audio or video file. Used for multiple formats. [C4,
F3.6, S3.2, IE9, O10.5, iOS3, A2]

<track>
Supplies subtitles, captions, or chapter points for video. [C18, S6.1, IE10]

Before we do that, we need to talk about the history of audio and video on
the Web. After all, to understand where we’re going, we have to understand
where we’ve been.

7.1 A Bit of History


People have been trying to use audio and video on web pages for a long time.
It started with people embedding MIDI or MP3 files on their home pages and
using the <embed> tag to reference the file, like this:

Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf