javascript

Chapter 21: Upcoming API s
The JavaScript code here simply attaches an event handler to the button that either pauses or plays the
video, depending on its current state. Then, an event handler is set for the < video > element ’ s load event
so that the duration can be displayed. Last, a repeating timer is set to update the current time display.
You can extend the behavior of this custom video player by listening for more events and making use of
more properties.
The media elements haven ’ t been implemented in any released browsers as of July 2008, although there
are some experimental browser builds that have partial implementations. The media elements are
scheduled to be implemented in Firefox 3.1 and Safari 4, though there is no word on other browsers
implementing them as of the time of this writing.
The < canvas > Element
One of the most unique additions to HTML 5 is the < canvas > element, which provides a surface for
drawing bitmaps on a page. Firefox 1.5, Opera 9, Chrome, and Safari 2 have implemented < canvas > to
varying degrees of completeness. The drawing canvas always begins empty, and the only way to set its
display is through JavaScript. The < canvas > element requires at least its width and height attributes to
be set in order to indicate the size of the drawing to be created. Any content appearing between the
opening and closing tags is fallback data that is displayed only if the < canvas > element isn ’ t supported.
For example:
< canvas id=”drawing” width=”200” height=”200” > A drawing of something. < /canvas >
As with other elements, the width and height attributes are also available as properties on the DOM
element object and may be changed at any time. The entire element may be styled using CSS as well.
To begin drawing on a canvas, you need to retrieve a drawing context. The < canvas > element officially
supports a single 2D drawing context (though a 3D context may be added later). A reference to the
drawing context can be retrieved using the getContext() method and passing in “ 2d ” as follows:
var drawing = document.getElementById(“drawing”);
//make sure < canvas > is completely supported
if (drawing.getContext){
var context = drawing.getContext(“2d”);
}
//more code here
When using the < canvas > element, it ’ s important to test for the presence of the getContext() method.
Some browsers create default HTML element objects for elements that aren ’ t officially part of HTML. In
that case, the getContext() method would not be available and could cause script execution errors.
The 2D drawing context has its origin (0,0) at the upper left of the element. Coordinate values are
calculated in relation to that point. By default, the width and height indicate how many pixels
are available in each direction.
682