HTML and CSS Reference
In-Depth Information
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
variable it will refer to the button element:
<button class=”play” title=”play”>&#x25BA;</button/>
We're using &#25BA; , 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 video is currently paused, start playing, or if the video
has fi nished then we need to reset the current time to 0,
that is, move the playhead back to the start of the video.
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:
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();
}
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
FIGURE 4.4 Using XML
entities to represent play and
pause buttons.
Search WWH ::




Custom Search