Video and audio: playing media in the browser - HTML5 in Action - page 339

You used four attributes, src , controls , width , and height , in the code in listing
8.2 . Table 8.1 summarizes those attributes; for a full list of attributes see appendix B .

Table 8.1. Media element attributes

Attribute Description

src The video to play.

A Boolean attribute. If you add it, the browser will provide a standard set of controls for
play/pause/seek/volume, and so on. If you leave the attribute out, your code has to control
the player (see section 8.3.2 ) .

controls

width The width of the media (video only).

height The height of the media (video only).

For your application, displaying a single video isn't enough. You need more videos and the
ability to switch between them and control their playback in response to user commands.
To do this you'll need to learn about the HTMLMediaElement interface—a collection of
attributes and functions for both <video> and <audio> elements, which can be used
to start playing the media, pause the media, and change the volume, among other things.
We'll tackle that in the next section.

Where's the audio?

Perhaps you've already noticed, but in this chapter you'll be considering and using the
<video> element rather than the <audio> element. This isn't because the <audio>
element is less important (it isn't) or because it's more complex (it's not) but because
this is a book. Although a book may not be an ideal medium for presenting moving pic-
tures, it's an even worse one for invisible sound. But both elements share a single API, the
HTMLMediaElement interface, and it's this API that's the focus of this chapter. The only
differences between the <audio> and <video> elements are related to visual properties.
The <video> element allows you to specify a width and a height for the media, the <au-
dio> element does not.