HTML and CSS Reference
In-Depth Information
• 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
Read/write, reflects the value of the src attribute; use it to select a new video.
Start playing the current media.
Search WWH ::

Custom Search