HTML and CSS Reference
In-Depth Information
All of this is dependent on one thing, though: something triggering the seek operation. Version
four of the custom controls will provide this functionality by allowing the web page reader to
indicate on the progress bar where they want the playback to continue.
Providing the ability for the reader to click anywhere on the progress bar in order to change
where the playback occurs begins with adding a new event handler, this time for the
click
event on the progress bar. The code is added to the document's
setupControl
function:
// progress bar event
var prog = document.getElementById("progressbar");
prog.addEventListener("click",seekPlayback, false);
The new function,
seekPlayback
, accesses the
event
element in order to access the position
of the click within the progress bar. The code then uses this value to calculate the playback
location, as shown in
Example 23
.
Example23.Providing the seek functionality
// seekPlayback
function seekPlayback(e) {
var barwidth = 500;
// find click position
var x = e.pageX - this.offsetLeft;
// translate to video position
var pct = x / barwidth;
var bbVideo = document.getElementById("videoobj");
// now position playback
var newPos = Math.round(bbVideo.duration * pct);
bbVideo.currentTime = newPos;
}
Notice that we don't have to reset the indicator at the same time we change the playback po-
sition. That's because changing the playback position doesn't stop the video playing, and the
playing still triggers the
timeupdate
event. The next time the
timeupdate
event fires, the in-
dicator is moved to the new position.
Previously, the code made an assumption that there was only one time range. However, the
seek operation has changed this and we now have to deal with a possible set of time ranges.
Since we're not dealing with one time range, we'll have to calculate the progress percentage
by subtracting each time range's
start
value from the
end
value, and then sum the results.
