Audio and video - HTML5 and CSS3 - page 148

<video id="myvideo" controls>
<source src="00092.webm"
media="video/webm">
No video!
</video>
You need something for the user to
click to signal that they want to grab a
frame. A <button> element is easiest:
<button onclick="snap();">
Snap
</button>
Place that before the <video> element.
You also need a <canvas> element to
put the frame in later:
<canvas id="mycanvas"></canvas>
Put the <canvas> element after the div with id 'source' . All the action
happens in the snap() function:
function snap() {
var video = document
.getElementById('myvideo');
var canvas = document
.getElementById('mycanvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
}
Most of this function is plumbing—
grabbing references to the relevant
elements and setting the width and
height of the canvas to match the
video. The code that draws the cur-
rent frame on the canvas is this:
ctx.drawImage(video, 0, 0);