Mixing HTML5 Video and Canvas - HTML5 Canvas - page 308

Along with videoElement and videoDiv , we also create another new variable, button
Sheet . This is a reference to the image we load that holds the graphical buttons we will
use for the video player interface:
var videoElement;
var videoDiv;
var buttonSheet
We now must make some updates to our standard eventWindowLoaded() function that
we have used for most of this chapter. First, we are going to change the canplay event
handler for the video to a new function, itemLoaded :
videoElement.addEventListener("canplay",itemLoaded,false);
We used the canplay event instead of canplaythrough because, most of the time, a user
wants to start watching a video as soon as enough data has been buffered to play, and
not after the entire video has loaded.
Next, we need to load our tile sheet. We create a new Image object and set the src
property to videobuttons.png , which is the file shown in Figure 6-11 . We also set its
onload event handler to itemLoaded , just like the video:
buttonSheet = new Image();
buttonSheet.src = "videobuttons.png";
buttonSheet.onload = itemLoaded;
}
Finally, we create the itemLoaded() event handler function. When this function is called,
we increment the loadCount variable and test it against the itemsToLoad variable.
loadCount should never be greater than itemsToLoad if your application
is running correctly. However, we find it safer to limit the use of the
strict == test if possible. Why? Because if somehow, somewhere, some-
thing gets counted twice, the app will never load properly.
If it is equal to or greater than itemsToLoad , we call canvasApp() to start the application:
function itemLoaded() {
loadCount++;
if (loadCount >= itemsToLoad) {
canvasApp();
}
}
Placing the buttons
We need to set some variables in canvasApp() that will represent the locations of the
three buttons we will display: play, pause, and stop. We start by specifying the standard
button width and height as the variables bW and bH . All the images in the videobut-
tons.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 ,