Video and Audio - Introducing HTML5 - page 109

for the loadeddata event. This says that there's some data that's
been loaded, though not particularly 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 to play the video at the point in which loadeddata
has fi red, it forces browsers like Firefox to go from a suspended
state to downloading the rest of the media content, allowing it to
play the whole video. So, in fact, the correct point in the event
cycle to enable the user interface is the loadeddata :
video.addEventListener('loadeddata', initialiseControls,
¬ false);
Preloading metadata
A recent addition to the media element is the preload attribute
(so new that it's not supported in browsers right now). It allows devel-
opers to tell browsers only to download the header information about
the media element, which would include the metadata. If support for
this attribute does make its way into browsers, it stands to reason we
should listen for the loadedmetadata event over the loadeddata
event if you wanted to initalise the duration and slider controls of
the media.
Fast forward, slow motion, and reverse
The spec provides an attribute, playbackRate . By default the
assumed playbackRate is 1, meaning normal playback at the
intrinsic speed of the media fi le. Increasing this attribute speeds
up the playback; decreasing it slows it down. Negative values
indicate that the video will play in reverse.
Not all browsers support playbackRate yet (only Webkit-based
browsers support it right now), so if you need to support fast for-
ward and rewind, you can hack around this by programmatically
changing currentTime :
function speedup(video, direction) {
if (direction == undefined) direction = 1; // or -1 for
¬ reverse
if (video.playbackRate != undefined) {
video.playbackRate = direction == 1 ? 2 : -2;
} else { // do it manually