HTML and CSS Reference
In-Depth Information
8.4.1. Playing video through the <canvas> element
The first requirement is to be able to modify the video as it's being played back. You could
do this by layering elements on the page and hiding and showing things at the required
time. If you were stuck using plug-ins to render the video, that would be your only option
for modifying the video from HTML. But the
<video>
element makes its data available
as images. You can access each frame of the video as it's ready and treat it as image data.
It's then quite straightforward to use the
<canvas>
element to grab that image data and
display it.
Step 1: Add the <canvas> element
The following listing shows the basic setup required in the markup. The
<style>
element
should be placed in the head section of the document, or you can add the rule to your exist-
ing
<style>
element. The
div
replaces the existing one, where your
<video>
element
is located.
Listing 8.9. index.html—Adding a
<canvas>
element to display video
