• Choose a category
• All
• Classic-Fiction

Figure 8-4: The HTML 5 audio tag puts a simple audio player on the page.

If you remember old-school HTML, you might wonder if the

The

Video Demo

Your browser does not support embedded video

through HTML 5. Try Firefox 3.5 or greater.

This video is a trailer for the incredible short move

“Big Buck Bunny.” This experiment proves that talented

volunteers can produce a high-quality professional video

using only open-source tools.

Go to

http://www.bigbuckbunny.org to see the entire video.

As with audio, the W3 standard does not specify any particular video format, so the various browser manufacturers are free to interpret this requirement differently. Most of the current browsers support the open-source Ogg Theora format. (Yep, it’s related to Ogg Vorbis.)

Video is more complex because the file format doesn’t necessarily imply a particular coding mechanism. I encoded this video with the Ogg Vorbis wrapper using the AVI codec for the video portion and MP3 for the audio portion. This approach seems to be working in the two HTML 5 browsers I access.

Figure 8-5 is an example of a page showing a fun video created with free tools.

Figure 8-5: The video tag allows you to embed videos into HTML 5 pages easily.

The actual movie I show in the example is a trailer to the excellent short movie Big Buck Bunny. This incredible cartoon shows what can be done with completely open-source tools and rivals works from commercial studios. Thanks to the Blender foundation for releasing this hilarious and impressive film under a creative commons license.

The Canvas Tag

HTML 5 offers at least one more significant new feature. The tag allows developers to draw directly on a portion of the form using programming commands. Although this technique requires some JavaScript skills, it opens substantial new capabilities. Figure 8-6 shows a simple page illustrating the tag.

Figure 8-6: The canvas tag allows programmers to create dynamic graphics.

The code for canvasDemo.html relies on JavaScript, so check Book IV for details on how to write this code and much more. As an overview, though, here’s the code: