HTML and CSS Reference
In-Depth Information
Now that we're handling playing and pausing, we want to show
the user how much of the video has downloaded and therefore
how much is playable. This would be the amount of buffered
video available. We also want to catch the event that says how
much video has been played, so we can move our visual slider
to the appropriate location to show how far through the video
we are, as shown in
Figure 4.5
. Finally, and most importantly,
we need to capture the event that says the video is ready to
be played, that is, there's enough video data to start watching.
FIGURE 4.5
Our custom video
progress bar, including seekable
content and the current playhead
position.
Monitoring download progress
The media element has a “progress” event, which fi res once the
media has been fetched but potentially before the media has
been processed. When this event fi res, we can read the
video.
seekable
object, which has a
length
,
start()
, and
end()
method.
We can update our seek bar (shown in Figure 4.5 in the second
frame with the whiter colour) using the following code (where
the buffer variable is the element that shows how much of the
video we can seek and has been downloaded):
video.addEventListener('progress', updateSeekable, false);
function updateSeekable() {
var endVal = this.seekable && this.seekable.length ?
¬
this.seekable.end() : 0;
buffer.style.width = (100 / (this.duration || 1) *
¬
endVal) + '%';
}
The code binds to the progress event, and when it fi res, it gets
the percentage of video that can be played back compared to
the length of the video. Note that the keyword
this
refers to the
