Adding Video and Audio - HTML5 Foundations - page 227

Now if you open the About page and play the video, you can skip to different parts of the video using the new Seek
bar. Great work so far! There are still a few little problems, however. As you drag the bar, the video continues to at-
tempt to play, causing jerky playback. The position of the slider handle also does not move along the slider as the
video plays.
Later, we address the problem of jerky playback. First, let's fix the Seek bar so that the position of the slider handle
updates as the video plays:
1. In the video.js file, create a new event listener on the video variable (yes, videos fire events too!) that
listens for the timeupdate event. This event is fired repeatedly as the video plays.
window.onload = function() {
...
// Update the seek bar as the video plays.
video.addEventListener(“timeupdate", function(e) {
});
}
2. Calculate the correct position for the slider handle relative to the playback of the video. To do this, you di-
vide the video duration by 100 and then multiply the result by the current time in the video.
// Update the seek bar as the video plays.
video.addEventListener(“timeupdate", function(e) {
// Calculate the slider value.
var value = ( 100 / video.duration ) * .
video.currentTime;
});
3. Update the slider value using the value variable you just created. This moves the slider handle along the
slider.
// Update the seek bar as the video plays.
video.addEventListener(“timeupdate", function(e) {
// Calculate the slider value.
var value = ( 100 / video.duration ) *
video.currentTime;
// Update the slider value.
seekBar.value = value;
});
4. Save the video.js file.
Open the About page again and click the Play button. You should now see that the slider handle moves along the
slider as the video plays. Awesome!
Let's fix that problem with jerky playback as you seek the video.
To fix this problem, you use two event listeners. The first event listener pauses the video when the user clicks the
slider handle; the second event listener plays the video when the user releases the mouse button. This prevents the
video from trying to play as the user moves the slider handle. Follow these steps:
1. Create a new event listener on the seekBar that listens for the mousedown event, and place a statement
inside its function block that will pause the video.