HTML and CSS Reference
In-Depth Information
2.
Create a new
<input>
element below the Pause button. Set its type to
range
, its ID to
seekBar
, and its
value
to 0.
<input type="range" id="seekBar" value="0">
3.
Save the
about.html
file.
Next, you need to hook this range slider up to the video using an event listener:
1.
Open the
video.js
file.
2.
Create a new variable called
seekBar
and initialize it by fetching the
<input>
element you just created.
window.onload = function() {
...
var pauseBtn = document.getElementById(“pauseBtn");
var seekBar = document.getElementById(“seekBar");
...
}
3.
Create a new event listener on the
seekBar
that listens for the
change
event.
window.onload = function() {
...
// Add an event listener for the seek bar.
seekBar.addEventListener(“change", function(e) {
});
}
4.
Within the function block of this event listener, you first need to calculate the time the video must be moved
to. You do this by multiplying the duration of the video by the value of the Seek bar divided by 100. You ac-
cess the video's
duration
property to get the video duration.
// Add an event listener for the seek bar.
seekBar.addEventListener(“change", function(e) {
// Calculate the time in the video that playback
// should be moved to.
var time = video.duration * ( seekBar.value / 100 );
});
5.
Now that you have the
time
variable calculated, you need to update the video's
currentTime
property.
// Add an event listener for the seek bar.
seekBar.addEventListener(“change", function(e) {
// Calculate the time in the video that playback
// should be moved to.
var time = video.duration * ( seekBar.value / 100 );
// Update the current time in the video.
video.currentTime = time;
});
6.
Save the
video.js
file.