Video and Audio - Introducing HTML5 - page 106

native video element controls somehow (some browsers allow
the user to right click and select to play and pause the video)?
Also, when the video comes to the end, the play/pause button
would still show a pause icon. Ultimately we need our controls
to always relate to the state of the video.

Eventful media elements
The media elements fi re a broad range of events: when play-
back starts, when a video has fi nished loading, if the volume has
changed, and so on. So, getting back to our custom play/pause
button, we strip the part of the script that deals with changing its
visible label:
if (video.ended) {
video.currentTime = 0;
}
if (video.paused) {
video.play();
} else {
video.pause();
}
// which could be written as: video[video.paused ? 'play' :
¬ 'pause']();
In the simplifi ed code if the video has ended, we reset it, then
toggle the playback based on its current state. The label on
the control itself is updated by separate (anonymous) func-
tions we've hooked straight into the event handlers on our
video element:
video.addEventListener('play', function () {
play.title = 'pause';
play.innerHTML = ' ';
}, false);
video.addEventListener('pause', function () {
play.title = 'play';
play.innerHTML = ' ';
}, false);
video.addEventListener('ended', function () {
this.pause();
}, false);
Now whenever the video is played, paused, or has reached the
end, the function associated with the relevant event is fi red,
making sure that our control shows the right label.

NOTE In these examples
we're using the
addEventListener DOM
level 2 API, rather than the
attachEvent , which is specifi c
to Internet Explorer up to ver-
sion 8. The upcoming IE9 will
support video, but it thankfully
also supports the standardised
addEventListener , so our
code will work there, too.