HTML and CSS Reference
In-Depth Information
endPlayback();
}
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 +
"px";
}
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() {
