Mixing HTML5 Video and Canvas - HTML5 Canvas - page 514

Alongwith videoElement and videoDiv ,wealsocreateanothernewvariable, buttonSheet .
This is a reference to the image we load that holds the graphical buttons we will use for the
video player interface:

var var videoElement ;

var

var videoDiv ;
var var buttonSheet ;

In some web browsers, multiple mouseup events are fired for mouse clicks. To help fix this,
we are going to create a counter to accept a click only every five frames. The buttonWait
variable is the time to wait, while the timeWaited variable is the counter:

var var buttonWait = 5 ;

var var timeWaited = buttonWait ;

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 false );

We used the canplay event instead of canplaythrough because, most of the time, a user
wantstostartwatchingavideoassoonasenoughdatahasbeenbufferedtoplay,andnotafter
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 ,whichisthefileshownin Figure 6-11 . Wealsosetits onload eventhandler
to itemLoaded , just like the video:

buttonSheet = new 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.

NOTE

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, something gets counted twice, the app will never load properly.