HTML and CSS Reference
In-Depth Information
Other than this change, though, the rest of the function remains the same, as shown in
Example24.Modified progress function accounting for multiple time ranges
// display progress of movie loading
function showProgress() {
var barwidth = 500;
var bbVideo = document.getElementById("videoobj");
// since there's now the possibility of multiple time ranges
var end = 0;
for (var i = 0; i < bbVideo.buffered.length; i++) {
end += (bbVideo.buffered.end(i) - bbVideo.buffered.start(i));
}
// find percentage of playback to duration
var pct = end / bbVideo.duration;
var bar = document.getElementById("loadingprogress");
// adjust the progress
var width = (barwidth * pct);
document.getElementById("loadingprogress").style.width=width +
"px";
}
Now when you play the video file, you can click around the progress bar and cause the play-
back to change to the new position. Since this functionality is still verynew, browser behavior
does vary:
▪ Opera allows you to easily and quickly change the playback position, and starting with
Opera 12, also supports the
buffered
property, so the progress bar works with this newest
browser version.
▪ Firefox 5 and up supports both the ability to change playback position, and the progress
bar.
▪ Safari 5 (and Webkit Nightly) allows us to click on the progress bar, but only within the
areas where the video has already been loaded (the portion of the progress bar already
filled in). This is the same behavior as the default control.
▪ Chrome 12 lets us change the playback position, but has problems with showing the pro-
gress. The Chrome Canary build does a little better job with showing progress, but still
seems to have issues with the functionality. Looking more closely at the browser's beha-
vior, it doesn't appear that Chrome supports groups of time ranges within
buffered
yet.
