Video and Audio - Introducing HTML5 - page 108

video element, as that's the context in which the updateSeekable
function will be executed, and the duration attribute is the length
of the media in seconds
However, there's sometimes a subtle issue in Firefox in its video
element that causes the video.seekable.end() value not to
be the same as the duration. Or rather, once the media is fully
downloaded and processed, the fi nal duration doesn't match
the video.seekable.end() value. To work around this issue, we
can also listen for the durationchange event using the same
updateSeekable function. This way, if the duration does change
after the last process event, the durationchange event fi res and
our buffer element will have the correct width:
video.addEventListener('durationchange', updateSeekable,
¬ false);
video.addEventListener('progress', updateSeekable, false);
function updateSeekable() {
buffer.style.width = (100 / (this.duration || 1) *
(this.seekable && this.seekable.length ? this.seekable.
¬ end() : 0)) + '%';
}

When the media fi le is ready to play

When your browser first encounters the video (or audio) element
on a page, the media file isn't ready to be played just yet. The
browser needs to download and then decode the video (or audio)
so it can be played. Once that's complete, the media element will
fire the canplay event. Typically this is the time you would initialise
your controls and remove any “loading” indicator. So our code to
initialise the controls would typically look like this:
video.addEventListener('canplay', initialiseControls,
¬ false);
Nothing terribly exciting there. The control initialisation enables
the play/pause toggle button and resets the playhead in the
seek bar.
However, sometimes this event won't fi re right away (or at least
when you're expecting it to fi re). Sometimes the video suspends
download because the browser is trying to save downloading
too much for you. That can be a headache if you're expecting
the canplay event, which won't fi re unless you give the media
element a bit of a kicking. So instead, we've started listening

NOTE The events to
do with loading fi re in the
following order: loadstart ,
durationchange ,
loadeddata , progress ,
canplay , canplaythrough .