HTML and CSS Reference
In-Depth Information
The showProgress function displays the status of the media resource loading. To find out
what percentage of the resource is loaded, the code accesses the buffered property on the
video. This property is a TimeRanges object, which has three properties: length , start , and
end. The length is the number of time ranges within the media resource, while the start
and end properties are collections reflecting the start and end of the time range(s).
The showProgress function assumes there is zero or one time range, and accesses the first
buffered.end value if there is one time range. Dividing this end value by the video dura-
tion returns the percentage of played video. That, multiplied by the progress element's width,
with the result rounded, provides the new progress element's width, as shown in Example 21 .
Example21.Function to track video loading progress
// display progress of movie loading
function showProgress() {
var barwidth = 500;
// find percentage of video played
var end = 0;
if (this.buffered.length >= 1)
end = this.buffered.end(0);
var pct = end / this.duration;
// reset progress width
var width = Math.round(barwidth * pct);
document.getElementById("loadingprogress").style.width=width +
The last function is the reportProgress function that moves a slider along the progress in-
dicator to represent the video playback. Instead of setting the video object's currentTime
property to zero, as we have in earlier examples, this time we're accessing its current value
with each progress event firing. Dividing the current time by the video's duration provides
the percentage the video has completed. Multiplying this result by the length of the progress
element gives us the position for the indicator. Since the indicator graphic is more than tick
mark size, its last few positions are adjusted to ensure it doesn't go too far beyond the end of
the progress element, as shown in Example 22 .
Example22.Function to track the progress of the playback
// reset film play marker
function reportProgress() {
Search WWH ::

Custom Search