• Choose a category
• All
• Classic-Fiction

By Root 6491 0

(inherited from HTMLMediaElement), but now that we have a video loaded onto the canvas, it would be interesting to see them in action.

In this example, we are going to display seven properties of a playing video, taken from the HTMLVideoElement object: duration, currentTime, loop, autoplay, muted, controls, and volume. Of these, duration, loop, and autoplay will not update because they are set when the video is embedded. Also, since we call the play() function of the video after it is preloaded in JavaScript, autoplay may be set to false, but the video will play anyway. The other properties will update as the video is played.

To display these values on the canvas, we will draw them as text in the drawScreen() function called by setInterval(). Below is the drawScreen() that we have created to display these values:

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

}

Figure 6-7 shows what the attributes look like when displayed on the canvas. Notice that we have placed the

This demo should give you a very good idea of the relationship between the video on the canvas and the one embedded with the

Figure 6-7. Video on the canvas with properties displayed and

You can see Example 6-7 in action by executing CH6EX7.html from the code distribution.

Example 6-7. Video properties