HTML and CSS Reference
In-Depth Information
Step 2: Grab and display image data
Now you need to listen for the
play
event on the
<video>
element and use that
as a trigger to start grabbing video frames and rendering on the canvas. The
$(document).ready
in the next listing should replace the existing function you added
previously in
listing 8.8
.
Listing 8.10. index.html—Adjusting the
draw()
function to use the
<canvas>
element
Now you're able to play back the video through the
<canvas>
element, but you'll notice
that something is missing. The controls you got for free as part of the
<video>
element
are no longer accessible now that the video is being played through
<canvas>
. The next
section deals with creating your own controls.
8.4.2. Creating custom video playback controls
In this section you'll create a simple menu of buttons to control video playback.
Figure 8.7
shows the final effect. Obviously, we're not aiming to win any points for design here; it's
the functionality we're interested in.
