Native Video - HTML5 - page 125

Set preview dimensions
Next, define the dimensions for each of the canvas drawings in the function:
canvas1.width = 320;
canvas1.height = 180;
canvas2.width = 160;
canvas2.height = 90;
Add an event listener
Then add an event listener to trigger the canvas drawing upon video play:
video.addEventListener('play', function(){
drawVideo(this,context1,context2);
},false);
and close out the function:
video.play();
}
Draw previews
Lastly, add the function that draws each of the canvas previews:
function drawVideo(video,canvas1,canvas2) {
if(video.paused || video.ended) return false;
canvas1.drawImage(video,0,0,320,180);
canvas2.drawImage(video,0,0,160,90);
setTimeout(drawVideos,25,video,canvas1,canvas2);
}
</script>
This function first checks to see if the video is playing:
if(video.paused || video.ended) return false;
If so, we use drawImage with scaling to draw a canvas image that is half the size of the
original video:
canvas1.drawImage(video,0,0,320,180);
and a second canvas that is half the size of previewMed :
canvas2.drawImage(video,0,0,160,90);
The scaling parameters in these examples are:
object.drawImage ( source , x , y , width , height );
where x and y represent the top-left corner of the image on the target canvas , and
width and height are the image's size on the target canvas .
Finally, tell drawPreviews to call itself every 25 milliseconds, which roughly equals 40
frames per second (1000ms / 40fps = 25):
setTimeout(drawVideos,25,video,canvas1,canvas2);