HTML and CSS Reference
In-Depth Information
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 that it will resume
playing:
//Hit Pause
iif ( ( mouseY >= pauseY ) && ( mouseY <= pauseY + bH ) && ( mouseX >= pauseX ) &&
( mouseX <= pauseX + bW ) ) {
iif ( videoElement . paused == false
false ) {
videoElement . pause ();
} else
else {
videoElement . play ();
}
}
}
Figure 6-12 shows what the canvas looks like when the video is displayed with controls.
NOTE
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 used only
paused . In reality, you could have only one button and swap out the play or paused graphic, depend-
ing on the paused state. That would make these controls work more like the default HTML video
controls.
Search WWH ::




Custom Search