HTML and CSS Reference
In-Depth Information
The <audio> element also accepts a handful of optional boolean attributes for custom-
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! </
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.
The standard HTML5 <video> element i s structured similarly to <audio> :
<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, &lt;audio&gt; 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!
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
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-
Search WWH ::

Custom Search