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

• Step 5: Provide multiple video formats to support all browsers.

As we mentioned, in this section you'll be making use of the HTMLMediaElement inter-
face from JavaScript; as usual with HTML5, the markup only gets you so far. Most of the
interesting stuff is done with JavaScript!

Step 1: Load a list of videos

First, let's hardcode a list of videos into the playlist and hook up everything so that when a
user clicks a video it starts playing. Listing8.3 shows the markup for the playlist; insert it in
place of the second comment placeholder in listing 8.1 . In a real application you'd almost
certainly be generating this list dynamically, but we're going to avoid requiring backend
code in this chapter.

Listing 8.3. index.html—Markup for the video playlist

Step 2: Start a video when selected

In order to start a video when the user clicks one of the list items, you'll need to know one
property and one method of the HTMLMediaElement interface, both of which are summar-
ized in table 8.2 .

Table 8.2. HTMLMediaElement interface

Attribute/method Description

.src Read/write, reflects the value of the src attribute; use it to select a new video.

.play() Start playing the current media.