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.
The only other change necessary is in the showProgress function, covered in Example 21 .
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.
Search WWH ::

Custom Search