Java Reference
In-Depth Information
figure 15-4
Clicking the button changes its text to Pause and starts playing the video. Clicking the button again
changes the text back to Play and pauses the video.
In the body of the page, you have a
<button/>
element with the
id
of
playbackController
. As its
ID implies, it is used for controlling the playback of the media, a video embedded with the
<video/>
element:
<video id="bbbVideo">
<source src="bbb.mp4" />
<source src="bbb.webm" />
</video>
The main portion of the JavaScript code is a function called
playbackClick()
, an event handler for the
<button/>
's
click
event. The first two statements of this function create two variables called
target
and
video
:
function playbackClick(e) {
var target = e.target;
var video = document.getElementById("bbbVideo");
The
target
variable is the event target (the button), and
video
contains a reference to the
<video/>
element object.
Next you determine whether you need to play or pause the video, and you do that by checking the text
of the
<button/>
element:
if (target.innerHTML == "Play") {
video.play();
