Mixing HTML5 Video and Canvas - HTML5 Canvas - page 309

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 bW = 32;
var bH = 32;
var playX = 190;
var playY = 300;
var pauseX = 230;
var pauseY = 300;
var stopX = 270
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 in Figure 6-11 . The third parameter of the call to the drawImage() function
is 32 because that is where the y position of the image we want to display starts on the
tile sheet. If paused is true , it means the video is not playing, so we display the “up”
version of the play button. It starts at y position 0 :
if (!videoElement.paused) {
context.drawImage(buttonSheet, 0,32,bW,bH,playX,playY,bW,bH); //Play Down
} else {
context.drawImage(buttonSheet, 0,0,bW,bH,playX,playY,bW,bH); //Play up
}
Displaying the pause button is simply the opposite of play. If the video paused property
is true , we display the “down” version of the pause button. If the video is playing, it
means the pause property is false , so we display the “up” version. Notice that the
second parameter is 32 because to display the pause buttons in the tile sheet, we need
to skip over the play button and start at the x position of the pause button:
if (videoElement.paused) {
context.drawImage(buttonSheet, 32,32,bW,bH,pauseX,pauseY,bW,bH); //down
} else {
context.drawImage(buttonSheet, 32,0,bW,bH,pauseX,pauseY,bW,bH); // up
}
context.drawImage(buttonSheet, 64,0,bW,bH,stopX,stopY,bW,bH); // Stop up