Mixing HTML5 Video and Canvas - HTML5 Canvas - page 281

Figure 6-6. Displaying a video on HTML5 Canvas
HTML5 Video Properties
We have already talked about some properties of HTMLVideoElement (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);