HTML and CSS Reference
In-Depth Information
If
loadCount
is equal to or greater than
itemsToLoad
, we call
canvasApp()
to start the ap-
plication:
function
function
itemLoaded
() {
loadCount
++
;
iif
(
loadCount
>=
itemsToLoad
) {
canvasApp
();
}
}
Placing the buttons
We need to set some variables in
canvasApp()
that will represent the locations of the three
buttonswewilldisplay:play,pause,andstop.Westartbyspecifyingthestandardbuttonwidth
and height as the variables
bW
and
bH
. All the images in the
videobuttons.png
tile sheet are
32×32 pixels, so we will set
bW
and
bH
accordingly. Then we proceed to create variables that
represent the
x
and
y
locations of each button:
playX
,
playY
,
pauseX
,
pauseY
,
stopX
, and
stopY
. We could use literal values; however, these variables will make a couple of the more
complicated calculations easier to swallow:
var
var
bW
=
32
;
var
var
bH
=
32
;
var
var
playX
=
190
;
var
var
playY
=
300
;
var
var
pauseX
=
230
;
var
var
pauseY
=
300
;
var
var
stopX
=
270
var
var
stopY
=
300
;
In the
drawImage()
function, we need to test for the current state of the playing video and
render the buttons accordingly. For this application, we will use the
paused
state of the video
object's attribute to render the buttons properly in their “up” or “down” states.
When a video first loads on the page and is not yet playing, its
paused
attribute is set to
true
.
When a video is playing, its
paused
attribute is set to
false
. Knowing this, we can create the
actions for these simple buttons.
First, if we know that the video is not in a
paused
state, it must be playing, so we display the
“down” version of the play button. The “down” position is in the second row on the tile sheet
is where the
y
position of the image we want to display starts on the tile sheet. If
paused
is
true
,it means that the video is not playing, so we display the “up” version ofthe play button.
It starts at
y
position
0
: