HTML and CSS Reference
In-Depth Information
Mozilla's work with canvas and HTML5 video can be found at
nipulating_video_using_canvas . You can see the HTML5 Doctor's work at
video-canvas-magic/ . Deutsch's beautiful work can be found at . A
follow-up effort that generalized the canvas/audio combination, but without Twitter, can be found at .
I'm going to emulate the good HTML5 Doctor's effort by creating a video filter. First, though,
I'm going to go through the steps to just get the video playing in a canvas element.
Playing a Video in an Canvas Element
To play the video in a canvas, we'll need to add both the video element and the canvas ele-
ment to the web page:
<video id="videoobj" controls width="480" height="270">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
<canvas id="canvasobj" width="480" height="270"></canvas>
In this example, both the canvas and video elements are the same size, specified in the width
and height attribute for both.
When we work with a canvas, we're really working with two different objects: the element
and the context. The canvas element supports more than one context, but the one we're more
familiar with is the two-dimensional (2D) context, created as follows:
var canvasObj = document.getElementById("canvasobj");
var ctx = canvasObj.getContext("2d");
To draw the video onto the canvas, we're going to use the 2D Canvas API method
drawImage. This method takes whatever is given in the first parameter, and draws it into the
canvas element. There are three versions of the drawImage method:
drawImage(image, dx, dy); // draw image starting at canvas position
drawImage(image, dx, dy, dw, dh); // draw image starting at dx,dz
w/dimensions dw,dh
// draw from image given image dimensions to canvas given canvas
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
Search WWH ::

Custom Search