HTML and CSS Reference
In-Depth Information
izing playback:
controls
, which displays a standard set of audio playback control but-
tons for the user;
autoplay
, which makes the audio play automatically, as soon as it's
been loaded; and
loop
, which makes the audio repeat over and over and over...
<audio id="new_slang" src="new_slang.wav"
controls autoplay loop
>
No song for you!
</
audio>
Note that HTML5 permits boolean attributes to be supplied without a corresponding
value (e.g.,
controls
instead of
controls="true"
), but at the present time, for better
compatibility in ereaders that are expecting XHTML content, I recommend including
attribute values:
<audio id="new_slang" src="new_slang.wav"
controls="true" autoplay="true"
loop="true"
>
No song for you!
</audio>
Note that the value of the attribute is immaterial: its mere presence is always equivalent
to
true
and triggers its functionality. So, somewhat counterintuitively, both
con
trols="true"
and
controls="false"
(or
controls="
whatever
"
) will all trigger the play-
back buttons to be displayed. If you don't want playback buttons, don't include the
controls
attribute.
<video
id="dancing_pony" width="300" height="300">
<source src="dancing_pony.mp4" type="video/mp4"/>
<source src="dancing_pony.ogg" type="video/ogg"/>
(Sorry, <audio> element not supported in your
browser/ereader, so you will not be able to listen to
this song.)
</video>
The
width
and
height
attributes on the
<video>
element specify the dimensions of the
video. Additionally,
<video>
also supports the same boolean
controls
,
autoplay
, and
loop
attributes as
<audio>
, as well as the same shorthand markup if you only have one
video format:
<video id="dancing_pony" width="300" height="300" src="dancing_pony.mp4"
controls="true" autoplay="true" loop="true"
>
No pony for you!
</video>
Also, as with
<audio>
, browser/ereader compatibility varies for different video formats.
Encoding video in both
MPEG-4
and Ogg formats is a safe bet (see
“HTML5 Audio/
Video Compatibility in the Browser and Ereaders” on page 38
for more details). In
the following sections, we'll look at a couple of simple demos of audio and video in
action.
An Audio-Enabled Glossary
One great use of HTML5 audio element is to add supplemental text-to-speech func-
tionality to your book content. In this example, we'll add audio functionality to a glos-
