• Choose a category
• All
• Classic-Fiction

function canvasApp() {

if (!canvasSupport()) {

return;

}

function drawScreen () {

//Background

context.fillStyle = '#ffffaa';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10);

//video

context.drawImage(videoElement , 85, 30);

// Text

context.fillStyle = "#000000";

context.fillText ("Duration:" + videoElement.duration, 10 ,280);

context.fillText ("Current time:" + videoElement.currentTime, 260 ,280);

context.fillText ("Loop: " + videoElement.loop, 10 ,290);

context.fillText ("Autoplay: " + videoElement.autoplay, 100 ,290);

context.fillText ("Muted: " + videoElement.muted, 180 ,290);

context.fillText ("Controls: " + videoElement.controls, 260 ,290);

context.fillText ("Volume: " + videoElement.volume, 340 ,290);

}

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

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

videoElement.play();

setInterval(drawScreen, 33);

}

NOTE

You can see all the events and properties for the HTMLVideoElement at http://www.w3.org/2010/05/video/mediaevents.html.

Video on the Canvas Examples

In the last section, we learned that the video playing on the canvas and the video embedded with the

Well, sometimes simply displaying a video and playing it is not enough. You might want events to occur as the video is playing, or perhaps you want to use transformations on it, use it in a game, create custom video controls, or animate it and move it on the canvas.

The following five examples will show you in very specific detail why the canvas can be an exciting way to display video.

Using the currentTime Property to Create Video Events

The first way we will use video in conjunction with Canvas is to use the currentTime property of a playing video to trigger events. Recall that the currentTime property is updated as the video plays, and it shows the video’s elapsed running time.

For our example, we are going to create a dynamic object in JavaScript containing the following properties:

time

The elapsed time to trigger the event

message

A text message to display on the canvas

x

The x position of the text message

y

The y position of the text message

First, we will create an array of these objects and place them into a variable named messages. We will then create four events (messages that will appear) that will take place at the elapsed currentTime of 0, 1, 4, and 8 seconds:

var messages = new Array();

messages[0] = {time:0,message:"", x:0 ,y:0};

messages[1] = {time:1,message:"This Is Muir Beach!", x:90 ,y:200};

messages[2] = {time:4,message:"Look At Those Waves!", x:240 ,y:240};

messages[3] = {time:8,message:"Look At Those Rocks!", x:100 ,y:100};

To display the messages, we will call a for:next loop inside our drawScreen() function. Inside the loop, we test each message in the messages array to see whether the currentTime property of the video is greater than the time property of the message. If so, we know that it is OK to display the message. We then display the message on the canvas using the fillStyle property and fillText() function of the Canvas context, producing the results shown in Figure 6-8:

for (var i = 0; i < messages.length ; i++) {

var tempMessage = messages[i];

if (videoElement.currentTime > tempMessage.time) {

context.font = "bold 14px sans";

context.fillStyle = "#FFFF00";

context.fillText (tempMessage.message, tempMessage.x ,tempMessage.y);

}

}

Figure 6-8. Canvas video displaying text overlay events

Of course, this is a very simple way to create events. The various