HTML and CSS Reference
In-Depth Information
<video id="myvideo" controls>
<source src="00092.webm"
No 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();">
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
var canvas = document
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);
Search WWH ::

Custom Search