HTML and CSS Reference
In-Depth Information
Figure 3-2.
Shortcut menu for the audio player in IE9
All the browsers also reveal a shortcut menu if you right-click the audio player (see Figure 3-2). You
can use the shortcut menu to control audio playback.
The
<audio>
tag also provides some useful attributes that let you fine-tune how audio files are played.
By default, when you run a page using
<audio>
, the audio file isn't played until you click the Play button. If
you wish to play the file automatically, you can add the
autoplay
attribute as follows:
<audio src="Audio1.mp3" controls="controls" autoplay="autoplay"></audio>
The
autoplay
attribute is handy for playing a background sound as users read the content of your web
page.
By default, an audio file isn't replayed when it completes. To play the same file over and over again,
you can set the
loop
attribute:
<audio src="Audio1.mp3" controls="controls" loop="loop"></audio>
The
loop
attribute is useful in scenarios when users tend to be on a page a long time and you wish to
play background audio without interruption.
There is also a
preload
attribute that governs how an audio file is loaded by the browser. This attribute
has three possible values:
auto
,
metadata
, and
none
. The
auto
value indicates that the entire audio file
should be loaded as soon as the web page loads in the browser.
metadata
indicates that only metadata
information such as the length of the audio file should be loaded. Finally,
none
indicates that the file
shouldn't be loaded at all. In this case, the file is loaded only when it's played in the browser. The default
value for the
preload
attribute varies from browser to browser. If the
preload
attribute is omitted, the result
varies from one browser to another. The following markup shows how to use the
preload
attribute:
<audio src="Audio1.mp3" controls="controls" preload="auto" ></audio>
Using the
preload
attribute, you can control how much media data is downloaded on the client side.
For example, if you're displaying a long list of audio files on a single page, setting
preload
to
auto
might
download too much data. Setting
preload
to
metadata
can be more efficient in such cases. Note that
preload
is ignored if the
autoplay
attribute is present.
Playing Video
The HTML5
<video>
element lets you play video files. It supports the same set of attributes as the
<audio>
tag and provides a few more. The basic use of
<video>
is shown here:
<video src="Video1.mp4" controls="controls"></video>
The
src
attribute points to a video file, and the
controls
attribute displays the playback controls.
Figure 3-3 shows a video file being played in IE9.
