HTML and CSS Reference
In-Depth Information
FIGURE 2.3
A simple
HTML5 audio example
(see simple-audio.html
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:
<audio controls>
<source src=”audio/heavymetal.mp3” type=”audio/mp3”>
<source src=”audio/heavymetal.ogg” type=”audio/ogg”>
<!-- fallback content here -->
</audio>
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-
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.
