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.
Search WWH ::

Custom Search