• Choose a category
• All
• Classic-Fiction

//video

context.drawImage(videoElement , 85, 30);

//Draw Buttons

//Play

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

}

if (videoElement.paused) {

context.drawImage(buttonSheet, 32,32,bW,bH,pauseX,pauseY,bW,bH); // Pause down

} else {

context.drawImage(buttonSheet, 32,0,bW,bH,pauseX,pauseY,bW,bH); // Pause up

}

context.drawImage(buttonSheet, 64,0,bW,bH,stopX,stopY,bW,bH); // Stop up

}

function eventMouseUp(event) {

var mouseX;

var mouseY;

if ( event.layerX || event.layerX == 0) { // Firefox

mouseX = event.layerX ;

mouseY = event.layerY;

} else if (event.offsetX || event.offsetX == 0) { // Opera

mouseX = event.offsetX;

mouseY = event.offsetY;

}

//Hit Play

if ( (mouseY >= playY) && (mouseY <= playY+bH) && (mouseX >= playX) &&

(mouseX <= playX+bW) ) {

if (videoElement.paused) {

videoElement.play();

}

}

//Hit Stop

if ( (mouseY >= stopY) && (mouseY <= stopY+bH) && (mouseX >= stopX) &&

(mouseX <= stopX+bW) ) {

videoElement.pause();

videoElement.currentTime = 0;

}

//Hit Pause

if ( (mouseY >= pauseY) && (mouseY <= pauseY+bH) && (mouseX >= pauseX) &&

(mouseX <= pauseX+bW) ) {

if (videoElement.paused == false) {

videoElement.pause();

} else {

videoElement.play();

}

}

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

var bW = 32;

var bH = 32;

var playX = 190;

var playY = 300;

var pauseX = 230;

var pauseY = 300;

var stopX = 270

var stopY = 300;

theCanvas.addEventListener("mouseup",eventMouseUp, false);

setInterval(drawScreen, 33);

}

Animation Revisited: Moving Videos

Now we are going to revisit the bouncing balls demo from Chapter 5 to show you how you can achieve the same effect with images and videos. Since we covered this in detail in Example 5-5 (CH5EX5.html), we don’t need to examine all the code—just the changes that make the videos move.

NOTE

Remember that videos are drawn in much the same way as images, so with very few changes this application would work just as well with a static image.

While there are a few other changes, the most important is in the drawScreen() function when we draw the videos onto the canvas. Recall that in Chapter 5 we created an array named balls and a dynamic object to hold the properties of each ball that looked like this:

tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle,

xunits:tempXunits, yunits:tempYunits}

For videos, we will create a similar array, named videos, but we will alter the dynamic object:

tempvideo = {x:tempX,y:tempY,width:180, height:120, speed:tempSpeed, angle:tempAngle,

xunits:tempXunits, yunits:tempYunits}

The big difference here is that we no longer need a radius that represents the size of the ball; instead, we need the width and height so we can render the video to our desired size in the drawScreen() function.

Back in Chapter 5 we used the canvas drawing command to draw balls on the screen like this:

context.beginPath();

context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);

context.closePath();

context.fill();

To draw videos, we need to change the code:

context.drawImage(videoElement, video.x, video.y, video.width, video.height);

That is pretty much all you need to do! There are some others changes here (e.g., we start all the videos in the center of the screen before they start moving), but the items mentioned above are the main things you need to concentrate on to move video, not yellow balls, around the screen. Figure 6-13 shows what the example looks like with bouncing videos instead of balls. You can see the full code in Example 6-12.

Figure 6-13. Canvas video animation demo

Example 6-12. Multiple