Video and Audio - Introducing HTML5 - page 127

The problem with this logic is that we're relying entirely on our
own script to determine the state of the play/pause button. What
if the user was able to pause or play the video via the 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 always
to relate to the state of the video.

Eventful media elements
The media elements fire a broad range of events: when play-
back starts, when a video has finished 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:
playButton.addEventListener('click', function () {
if (video.ended) {
video.currentTime = 0;
}
if (video.paused) {
video.play();
} else {
video.pause();
}
}, false);
In the simplified code, if the video has ended we reset it, and
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);

NoTE In these examples,
we're using the
addEventListener DOM
level 2 API, rather than the
attachEvent , which is specific
to Internet Explorer up to ver-
sion 8. IE9 supports video, but it
thankfully also supports the stan-
dardised addEventListener ,
so our code will work there, too.