Java Reference
In-Depth Information
var seekSlider = document.getElementById("seekController");
video.addEventListener("pause", pauseHandler);
video.addEventListener("playing", playingHandler);
video.addEventListener("volumechange", volumechangeHandler);
video.addEventListener("durationchange", durationchangeHandler);
video.addEventListener("timeupdate", timeupdateHandler);
playButton.addEventListener("click", playbackClick);
muteButton.addEventListener("click", muteClick);
volumeSlider.addEventListener("input", volumeInput);
seekSlider.addEventListener("input", seekInput);
</script>
</body>
</html>
Save this as
ch15 _ question2.html
.
Once again, the changes are highlighted. You add another range control to the page:
<div>
<input type="range" id="seekController"
min="0" step="1" value="0" />
</div>
This one is called
seekController
. It is set to a minimum value of
0
, a step of
1
, and an initial value
of
0
. A maximum value is not set because you do not yet know the duration of the video. You will,
however, when the media's
durationchange
event fires. You register a listener for this event; it calls
the
durationchangeHandler()
function when it fires.
function durationchangeHandler(e) {
seekSlider.max = video.duration;
}
It simply sets the slider's
max
property to the media's duration.
You also register a listener for the media's
timeupdate
event with the
timeupdateHandler()
function. You use this to update the slider's value when the media's current time changes:
function timeupdateHandler(e) {
seekSlider.value = video.currentTime;
}
But you also want to control the media's seek with the slider, so you listen for the range control's
input
event:
function seekInput(e) {
video.currentTime = seekSlider.value;
}
And you set the media's
currentTime
property to the slider's value.
