HTML and CSS Reference
In-Depth Information
Whenever the video is played, paused, or has reached the end,
the function associated with the relevant event is now fired,
making sure that our control shows the right label.
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 fires once the
media has been fetched but potentially before the media has
been processed. When this event fires, 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) + '%';
}
