HTML and CSS Reference
FIGURE 2.3 A simple
HTML5 audio example
in the chapter2 folder).
<video> and <audio> both work in a similar way, however note that <audio>
doesn't include the attributes not relevant to it, like poster , width , and height .
Here is an <audio> example:
<source src=”audio/heavymetal.mp3” type=”audio/mp3”>
<source src=”audio/heavymetal.ogg” type=”audio/ogg”>
<!-- fallback content here -->
The audio example produces a display like the one shown in Figure 2.3 .
The fallback content implied by the HTML comments in the preceding examples
can be anything you like, whether it is a message telling users their browser doesn't
support HTML5 video/audio with a direct link to download the media, or better, a
Flash video/audio player fallback that can play the MP4/MP3 versions of your media.
Many other parts of HTML5 allow you to build in fallback content in this man-
ner or will at least gracefully degrade to simpler content that people with older
browsers will still be able to use.
NOTE: Check out “Simple HTML5 video player with Flash fallback and custom controls”
by Bruce Lawson and Vadim Makeev (http://dev.opera.com/articles/view/simple-html5-
video-flash-fallback-custom-controls) to see the Flash fallback technique in action.
Or, check out “Everything you need to know about HTML5 video and audio” by
Simon Pieters ( http://dev.opera.com/articles/view/everything-you-need-to-know-
about-html5-video-and-audio) for more details on <video> in general.
HTML5 <video> and <audio> represent a very exciting area that has many new
features to keep an eye out for (coming soon in a browser near you!); for example,
elements such as <track> for adding text tracks like subtitles, APIs for accessing
web cams and microphones ( getUserMedia ), APIs for generating and manipulating
sound (Web Audio API), and more.