Mixing HTML5 Video and Canvas - HTML5 Canvas - page 310

Listening for the button presses
We also need to listen for the mouse button click. This process is very similar to how
we accomplished much the same thing in the Video Puzzle application. First, back in
the canvasApp() function, we set an event handler, eventMouseUp() , for the mouseup
event:
theCanvas.addEventListener("mouseup",eventMouseUp, false);
The eventMouseUp() function works very similar to the same function we created earlier
for Video Puzzle. First, we find the mouse pointer's x and y positions based on the way
the browser tracks those values, and we put those values into local mouseX and mouseY
variables:
function eventMouseUp(event) {
var mouseX;
var mouseY;
if ( event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
//Hit Play
Next, we test for a hit test point inside each button by checking the bounds (right, left,
top, bottom) on the canvas to see whether the mouse pointer was over any of our
buttons when it was clicked. If so, we detect a hit.
First, we test the play button. Notice that those variables we created to represent the
upper-left x and y locations of the button ( playX and playY ) help us make this calcula-
tion. They also help us because the names of the buttons self-document what we are
trying to accomplish in each test of this function.
If the play button has been clicked, and the video paused property is true , we call the
play() function of the video to start playing:
//Hit Play
if ( (mouseY >= playY) && (mouseY <= playY+bH) && (mouseX >= playX) &&
(mouseX <= playX+bW) ) {
if (videoElement.paused) {
videoElement.play();
}