HTML and CSS Reference
In-Depth Information
New HTML5 Multimedia Tags
As mentioned earlier, HTML5 has two new tags for multimedia: the <audio> and
<video> tags. These tags take the place of the <object> tag discussed in the next sections.
We keep the <object> tag information in the topic because of the limitations of the new
HTML5 tags. With this knowledge, you can fall back on the <object> tag to embed audio
and video clips. You will use both the <audio> and <video> tags to insert the clips for this
project, so both of these tags are discussed later in the chapter.
The Object Tag
The object element supports many different media types, including: pictures,
sounds, videos, as well as other objects. The term
object
is used to describe the things
that people want to place in HTML documents. Appendix A lists the attributes that can
be used with the <object> tag. The purpose of the <object> tag is to support plug-ins. The
plug-ins launched by the <object> tag can be used to play audio and video. The object
element references a plug-in for playing audio, and that the features of the plug-in can be
defined by the <param> tag. Tables 8-1 and 8-2 detailed some of the media players that
are used to playback specific audio and video file formats.
The code for inserting an audio file using the <object> tag is as follows:
<object data="longfellow-audio.mp3" height=”45” width=”250”>
<param name=”URL” value=”longfellow-audio.mp3” />
</object>
The object statement includes the
height
and
width
attributes—that is, the height
and width of the object in pixels. You will include the height and width when specifying
the audio file to identify the view of the player control panel that you want to display.
Table 8-3 shows how the control panel will appear at different widths. In all cases in
Table 8-3, the height of the object is 45 pixels, which provides enough height to display
the player control vertically. (Note that these are not exact numbers, but suggestions for
a width that displays the image in the right column.) You can experiment with the width
and height to see what might best fit your application. As with most Web development
decisions, your purpose would dictate why you would select a specific width. For instance,
if you wanted to allow Web site visitors to only play and pause the audio clip, without
being able to vary the volume, you would set the width to 42 pixels.
Table 8-3 Control Panel Views for Windows Media Player
Width Setting
Resulting Control Display
Image
42 pixels
Displays the fast forward and
play/pause buttons
66 pixels
Displays the rewind, fast forward,
play/pause, and stop buttons
118 pixels
Adds the previous and
next buttons
250 pixels
Adds a volume control
(full control panel)
