HTML and CSS Reference
In-Depth Information
NOTE
Mozilla's work with canvas and HTML5 video can be found at
https://developer.mozilla.org/En/ma-
nipulating_video_using_canvas
.
You can see the HTML5 Doctor's work at
http://html5doctor.com/
video-canvas-magic/
.
Deutsch's beautiful work can be found at
http://9elements.com/io/?p=153
.
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" />
</video>
<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
dx,dy
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
dimensions
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);