Video and Audio - Introducing HTML5 - page 130

However, sometimes this event won't fire right away (or when
you're expecting it to). Sometimes the video suspends down-
load because the browser is trying to prevent overwhelming
your system. That can be a headache if you're expecting the
canplay event, which won't fire unless you give the media ele-
ment a bit of a kicking. So instead, we've started listening for
the loadeddata event. This says that there's some data that's
been loaded, though not necessarily all the data. This means
that the metadata is available (height, width, duration, and so on)
and some media content—but not all of it. By allowing the user
to start playing the video at the point in which loadeddata has
fired, browsers like Firefox are forced to go from a suspended
state to downloading the rest of the media content, which lets
them play the whole video.
Yo u m a y if in d t h a t if in m o s t s if t u a t if o in s , if if y o u ' r e d o if in g s o m e t h if in g
like creating a custom media player UI, you might not need the
actual video data to be loaded—only the metadata. If that's the
case, there's also a loadedmetadata event which fires once the
first frame, duration, dimensions, and other metadata is loaded.
This may in fact be all you need for a custom UI.
So the correct point in the event cycle to enable the user inter-
face is the loadedmetadata :
video.addEventListener('loadedmetadata', initialiseControls,
¬ false);

NoTE The events to
do with loading fire in the
following order: loadstart ,
durationchange ,
loadedmetadata ,
loadeddata , progress ,
canplay , canplaythrough .

Media loading control: preload
Media elements also support a preload attribute that allows you to
control how much of the media is loaded when the page renders.
By default, this value is set to auto , but you can also set it to none
or metadata . If you set it to none , the user will see either the image
you've used for the poster attribute, or nothing at all if you don't set a
poster. Only when the user tries to play the media will it even request
the media file from your server.
By setting the preload attribute to metadata , the browser will pull
down required metadata about the media. It will also fire the loaded-
metadata event, which is useful if you're listening for this event to set
up a custom media player UI.