Advanced Media Element Scripting - HTML5 Media - page 121

The imageshown in the methods can be one of three different types of objects:
▪ An HTMLImageElement object instance (an img element)
▪ An HTMLCanvasElement object instance (another canvas element)
▪ An HTMLVideoElement object instance (an HTML5 video element)
We're only interested in the last method, which takes a video element instance as its first
parameter.
THE HTMLVIDEOELEMENT INTERFACE
I haven't covered the HTMLVideoElement interface previously. In Chapter , I covered the HTMLMe-
diaElement interface, but both audio and video have their own unique object interfaces: HTMLAudi-
oElement and HTMLVideoElement, respectively.
HTMLAudioElement has little functionality beyond what HTMLMediaElement provides.
HTMLVideoElement does have some additional properties:
▪ height , width : The height and width of the element, reflecting the height and width attrib-
utes
▪ poster : reflects the poster attribute
▪ videoHeight , videoWidth : the intrinsic height and width of the video in CSS pixels
Most of the programming functionality for the audio and video element derives from HTMLMedi-
aElement. However, the HTMLAudioElement and HTMLVideoElement interfaces do allow us to add
media appropriate functionality to each, and to restrict use to one or the other (such as restricting the
first element in the canvas element's drawImage method to a video element only).
Once we have access to the canvas element's context and a reference to the video object, all
we need to do to draw a single frame of a video object into the context (beginning at the left/
top of the canvas element) is add the following JavaScript:
var videoObj = document.getElementById("videoobj");
ctx.drawImage(videoObj, 0,0);
The drawImage method isn't a livemethod, which means we have to call it every time was
want to draw a video frame into the canvas. My first inclination is to use the video object's
timeupdate event handler function to invoke the drawing action. After all, the custom control
application in Chapter had success using the timeupdate event handler to manage the play-
back indicator.
Incorporating the new event handler results in the application shown in Example 4-1 .
Example4-1.A first cut at drawing video data to a canvas element