Video and Audio - Introducing HTML5 - page 126

Play, pause, and toggling playback
Next, we want to be able to play and pause the video from a
custom control. We've included a button element that we're
going to bind a click handler and do the play/pause functionality
from. Throughout my code examples, when I refer to the play
object it will refer to this button element:
<button class=”play” title=”play”>&#x25BA;</button/>
We're using &#x25BA; , which is a geometric XML entity that looks
like a play button. Once the button is clicked, we'll start the
video and switch the value to two pipes using &#x2590; , which
looks (a little) like a pause, as shown in Figure 4.4 .
For simplicity, I've included the button element as markup, but
as we're progressively enhancing our video controls, all of
these additional elements (for play, pause, scrubbing, and so on)
should be generated by the JavaScript.
In the play/pause toggle, we have a number of things to do:
1. If the user clicks on the toggle and the video is currently
paused, the video should start playing. If the video has pre-
viously finished, and our playhead is right at the end of the
video, then we also need to reset the current time to 0, that
is, move the playhead back to the start of the video, before
we start playing it.

FIguRE 4.4 Using XML
entities to represent play and
pause buttons.

2. Change the toggle button's value to show that the next

time the user clicks, it will toggle from pause to play or play
to pause.

3. Finally, we play (or pause) the video:

playButton.addEventListener('click', function () {
if (video.paused || video.ended) {
if (video.ended) {
video.currentTime = 0;
}
this.innerHTML = ''; // &#x2590;&#x2590; doesn't
¬ need escaping here
this.title = 'pause';
video.play();
} else {
this.innerHTML = ''; // &#x25BA;
this.title = 'play';
video.pause();
}
}, false);