Mixing HTML5 Video and Canvas - HTML5 Canvas - page 311

If the stop button was clicked, we set the paused property of the video to true , and set
the currentTime property to 0 so that the video will return to the first frame:
//Hit Stop
if ( (mouseY >= stopY) && (mouseY <= stopY+bH) && (mouseX >= stopX) &&
(mouseX <= stopX+bW) ) {
videoElement.pause();
videoElement.currentTime = 0;
}
If the pause button is clicked and the paused property of the video is false , we call the
pause() function of the video to—you guessed it—pause the video on the current frame.
If the paused property is true , we call the play() function of the video so it will resume
playing:
//Hit Pause
if ( (mouseY >= pauseY) && (mouseY <= pauseY+bH) && (mouseX >= pauseX) &&
(mouseX <= pauseX+bW) ) {
if (videoElement.paused == false) {
videoElement.pause();
} else {
videoElement.play();
}
}
Figure 6-12 shows what the canvas looks like when the video is displayed with controls.
You will notice an odd relationship between the play and pause buttons.
When one is “on,” the other is “off.” This is because we have only one
property to look at: paused . There is a property named playing that exists
in the HTML5 specification, but it did not work in all browsers, so we
only used paused . In reality, you could have only one button and swap
out the play or paused graphic depending on the paused state. That
would make these controls work more like the default HTML video
controls.