Java Reference
In-Depth Information
video.addEventListener("playing", playingHandler);
video.addEventListener("volumechange", volumechangeHandler);
playButton.addEventListener("click", playbackClick);
muteButton.addEventListener("click", muteClick);
volumeSlider.addEventListener("input", volumeInput);
</script>
</body>
</html>
Save this as
ch15 _ question1.html
.
This solution is built on Example 3. The additions are highlighted for your convenience.
The volume will be controlled by an
<input/>
element:
<input type="range" id="volumeController"
min="0" max="1" step=".1" value="1"/>
It's a range control, and it's set to a minimum value of
0
, a maximum value of
1
, and the step is
.1
.
Its initial value is set to
1
, meaning full volume.
In the JavaScript code, you retrieve this element and store it in the
volumeSlider
variable:
var volumeSlider = document.getElementById("volumeController");
And you register an
input
event listener:
volumeSlider.addEventListener("input", volumeInput);
The
volumeInput()
function handles this event, and it is responsible for setting the media's volume
to the slider's corresponding value:
function volumeInput(e) {
video.volume = volumeSlider.value;
}
exercise 2 Question
Add another range form control to Question 1's answer, and program it to seek the media. It should
also update as the media plays. Use the
durationchange
event to set the slider's max value, and the
timeupdate
event to update the slider's value.
exercise 2 Solution
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 15: Question 2</title>
</head>
<body>
<div>
