HTML and CSS Reference
In-Depth Information
var
var
x
;
var
var
y
;
iif
(
event
.
pageX
||
event
.
pageY
) {
x
=
event
.
pageX
;
y
=
event
.
pageY
;
}
else
else
{
x
=
e
.
clientX
+
document
.
body
.
scrollLeft
+
document
.
documentElement
.
scrollLeft
;
y
=
e
.
clientY
+
document
.
body
.
scrollTop
+
document
.
documentElement
.
scrollTop
;
}
x
-=
theCanvas
.
offsetLeft
;
y
-=
theCanvas
.
offsetTop
;
mouseX
=
x
;
mouseY
=
y
;
//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.
Then,wetesttheplaybutton.Noticethatthosevariableswecreatedtorepresenttheupper-left
x
and
y
locations of the button (
playX
and
playY
) help us make this calculation. 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
iif
( (
mouseY
>=
playY
)
&&
(
mouseY
<=
playY
+
bH
)
&&
(
mouseX
>=
playX
)
&&
(
mouseX
<=
playX
+
bW
) ) {
iif
(
videoElement
.
paused
) {
videoElement
.
play
();
}
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
iif
( (
mouseY
>=
stopY
)
&&
(
mouseY
<=
stopY
+
bH
)
&&
(
mouseX
>=
stopX
)
&&
(
mouseX
<=
stopX
+
bW
) ) {
