Web Design with HTML and CSS

260

The <video>, <audio>, and <canvas> elements

Web Design with HTML and CSS Digital Classroom

The reasons for these incompatibilities are complex and are related to licensing issues for the

video and audio codecs (the compression techniques used to reduce fi le size). To use these

new tags, you should provide multiple versions of your video and audio, thereby allowing

the browser to choose the fi rst supported format it can fi nd; so a more reliable method of

providing video might look like this:

<video width="400" height="300" controls>

<source src="catz.mp4" type='video/mp4; codecs="avc1.42E01E,

mp4a.40.2"'>

<source src="catz.ogv" type='video/ogg; codecs="theora, vorbis"'>

</video>

Note that older browsers that do not support the video and audio tags will need an alternative

way of playing video; currently, the best way to provide this capability is to add the option to

use Flash video, which is widely supported in current and older browsers.

The documentation for HTML5 is updated constantly; however, one of the best online resources is

Mark Pilgrim’s “Dive into HTML5” resource, located at http://diveintohtml5.org/video.html.

Provide drawing and animation features using the <canvas> element

The <canvas> element works as a drawing surface on your page. Within this drawing

surface, you can create shapes, colors, gradients, and pattern fi lls.

This example might be visually unremarkable, but the

addition of a native drawing format in HTML is notable.