Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 3: Using the HTMLMediaElement object CHAPTER 11 451

}

}

In the default.js file, the document ready method is added with the code to subscribe to

the events. The click event on the play button executes the playStop function. The playStop

function gets a reference to the media element and then uses the paused property to deter-

mine whether to play or pause the video by executing the play or pause method.

When the play button is pressed, the text on the play button changes from Play to Pause

because the play event is triggered on the media element. When the play button is pressed

again, the play button text changes from Pause to Play because the pause event is triggered

on the play button. This is accomplished by subscribing to the play and pause events in the

document ready function.

Lesson summary

■■The <video> and <audio> elements inherit from the HTMLMediaElement object.

■■Use the play() method to start playing the media and the pause() method to pause the

playing media.

■■The paused property can be used to determine whether the media is playing.

■■The onplay and the onpause events can be subscribed to and provide notifications

when the media is played or paused.

Lesson review

Answer the following questions to test your knowledge of the information in this lesson. You

can find the answers to these questions and explanations of why each answer choice is correct

or incorrect in the “Answers” section at the end of this chapter.

1. The


2. If you want your media to repeat continuously, which property would you set to true?
   A. preload
   B. readyState
   C. seekable
   D. loop


3. You want to trigger some code when the media is loaded. Which event should you
   subscribe to?
   A. onstalled
   B. onseeked