Mixing HTML5 Video and Canvas - HTML5 Canvas - page 316

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.
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 .