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.
Search WWH ::




Custom Search