Java Reference
In-Depth Information
And just like any other type of event, you can register different event listeners using the same
handler function:
function mediaPausedPlaying(e) {
if (e.type == "pause") {
alert("You paused the video!");
} else {
alert("You're playing the video!");
}
}
video.addEventListener("pause", mediaPausedPlaying);
video.addEventListener("playing", mediaPausedPlaying);
This is advantageous if you need to execute the same or similar code for both events. In many (and
perhaps most) cases, however, you'll more than likely want to define and use different functions for
different events.
Listening for these “state change” events is ideal when coding your own custom controller UI. You
want your UI to accurately reflect the state of the media, and the "state change" events fire only
when the media's state changes. This, of course, makes them ideal for keeping a custom UI in sync
with the built‐in UI of the browser, as you see in the next example.
Controlling Media playback III
trY it out
Let's use some of the events in the previous table to rewrite Example 2. The following code
contains substantial changes, so you can use Example 2 as a starting point or type it all from
scratch:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 15: Example 3</title>
</head>
<body>
<div>
<button id="playbackController">Play</button>
<button id="muteController">Mute</button>
</div>
<video id="bbbVideo">
<source src="bbb.mp4" />
<source src="bbb.webm" />
</video>
<script>
function pauseHandler(e) {
playButton.innerHTML = "Resume";
}
function playingHandler(e) {
playButton.innerHTML = "Pause";
