HTML and CSS Reference
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 videoElement ;
var videoDiv ;
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 buttonWait = 5 ;
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
We used the canplay event instead of canplaythrough because, most of the time, a user
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
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.
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.