Multimedia in Web Pages
Multimedia is a popular buzzword for sound, motion
video, and interactive animation. This chapter shows you how to include audiovisual and
interactive media in your Web pages.
The first thing you should be aware of is that
computer multimedia is still in its youth, and Internet multimedia is barely in its
infancy. The infant technology's rapid pace of growth creates three obstacles for anyone
who wants to include audiovisual material in a Web page:
- There are many incompatible multimedia file formats
to choose from, and none have emerged as a clear "industry standard" yet.
- Most people do not have fast enough Internet
connections to receive high-quality audiovisual data without a long wait.
- Each new Web browser version that comes out uses
different HTML tags to include multimedia in Web pages.
The moral of the story: Whatever you do today to
implement a multimedia Web site, plan on changing it before too long.
The good news is that you can sidestep all three of
these obstacles to some extent today, and they are all likely to become even easier to
overcome in the near future. This chapter will show you how to put multimedia on your Web
pages for maximum compatibility with current Web browsers, and then introduce you to the
new standard way that Web page multimedia will be handled in future Web browsers.
Just A Minute: The Microsoft ActiveX controls
and Java applets discussed in Chapter 20, "Scripting, Applets, and ActiveX," can
be used with many of the same types of media files discussed in this chapter. Be sure to
read Chapter 20 before you make any final decisions about how you will incorporate
multimedia into your Web site.
To Do: Before you see how to place multimedia on
your Web pages in any way, you need to have some multimedia content to start with.
Creating multimedia of any kind is a challenging and
complicated task. If you're planning to create your own content from scratch, you'll need
far more than this guide to become the next crackerjack multimedia developer. Once you've
got some content, however, this chapter will show you how to place your new creations into
your Web pages.
on a Web Page
The following sections show you how to add some
audio and video to a Web page in four different ways:
- The "old way" for maximum compatibility
with all Web browsers
- The "Microsoft way" that works best with
Microsoft Internet Explorer 2.0 and 3.0
- The "Netscape way" that's best for Netscape
Navigator 2.0 and 3.0
- The "new way" that will work with future
versions of all Web browsers, including those from Microsoft and Netscape.
For the examples in this chapter, I created a Web
page allowing hungry Web surfers a chance to preview the daily menu for a (fictitious)
seafood restaurant. A picture of a lobster was modified to create a short video. We then
recorded and mixed a voice-over with some music in the background. All this was done with
readily available software and hardware costing less than $200 (not counting the
Just A Minute: In this chapter's sample page,
I use Windows AVI video and WAV sound files. For better compatibility with non-Windows
computers, you could use Apple's QuickTime audio/video format or any other video format
supported by today's Web browsers. The procedures shown in this chapter for incorporating
the files into your Web pages are the same, no matter which file format you choose.
the Old-fashioned Way
The simplest and most reliable option for
incorporating a video or audio file into your Web site is to simply link it in with <A
HREF>, exactly as you would link to another HTML file. (See Chapter 3,
"Linking to Other Web Pages," for coverage of the <A> tag.)
For example, the following line could be used to
offer an AVI video of a Maine lobster:
<A HREF="lobstah.avi">Play the lobster video.</A>
When someone clicks on the words "Play the
lobster video," the lobstah.avi video file will be transferred to their
computer. Whichever helper application or plug-in the user has installed will
automatically start as soon as the file has finished downloading.
Just A Minute: In case you're not familiar
with helper applications (or helper apps for short), they are the external programs that a
Web browser calls upon to display any type of file that it can't handle on its own. You
can see what helper apps your browser is set up to use by selecting Options | General
Preferences | Helpers in Netscape Navigator 3.0 or selecting View | Options | Programs |
File Types in Microsoft Internet Explorer 3.0. Plug-ins are a special sort of helper
application that is specifically designed for tight integration with Netscape Navigator.
You'll read more about plug-ins under the "Multimedia the Netscape Way" section
later in this chapter.
Video the Microsoft Way
In Chapter 9, "Putting Images on a Web
Page," you learned to use the <IMG> tag. Microsoft Internet Explorer
3.0 also allows you to include AVI videos in a Web page with <IMG>.
The HTML code to include the video can be as simple
<IMG DYNSRC="lobstah.avi" WIDTH=160 HEIGHT=120>
The DYNSRC stands for dynamic source, and
tells Explorer that this is a motion video file instead of just a still SRC
image. If you include both SRC and DYNSRC attributes in an IMG
tag, then older browsers that don't support DYNSRC will simply display the SRC
Two more new attributes can be used along with DYNSRC
in an IMG tag, too. CONTROLS displays a set of controls beneath the
video clip. LOOP=INFINITE makes the video automatically repeat forever, while LOOP=n
plays the video n times and then stops (for example, LOOP=3 would play three
times). Naturally, you can also use any of the standard IMG attributes, such as ALIGN,
BORDER, and so on.
Figure 19.1. This page includes embedded video and
audio that will be played only by Microsoft Internet Explorer.
Figure 19.2. The page listed in Figure 19.1. (The
lobster looks like an ordinary image when printed in this guide, but it's a short video.)
To make the lobster video in the DownEast Restaurant
sample page available to users who don't have Internet Explorer 3.0, I enclosed the <IMG>
tag with an <A HREF> link, and included the words "CLICK ME!" in
the SRC image, as you can see in Figure 19.3.
Figure 19.4 shows what happens when a Netscape
Navigator 3.0 user clicks on the image. The first frame of the AVI video appears, and
users can click on it to play the video (or right-click for a menu of playback options, as
seen in Figure 19.4). Users of other browsers see whatever AVI viewer their software was
configured to use, or they may be given the chance to save the AVI file to disk if no
viewer is available.
Figure 19.3. Users of Netscape (and other browsers)
see a still image, which they can click for the AVI video.
This is the same page as seen with Explorer 3.0 in Figure 19.2.
Figure 19.4. Clicking on the image in Figure 19.3
lets users play the video using whatever AVI-compatible plug-in or helper app they have
Just A Minute: Note that DYNSRC
begins playing video clips as soon as they begin downloading, but users whose browsers
don't support DYNSRC have to wait until the video is completely done downloading
before they begin to see it.
Video files embedded with <IMG DYNSRC>
can include soundtracks, but Microsoft Internet Explorer also lets you specify a
background sound for a page like this:
The background sound may or may not synchronize
exactly with video content on the page, but when synchronization isn't important to you, BGSOUND
can offer several advantages. Not only does the background sound usually start playing
sooner than video, but you can include more than one video on the page, and use BGSOUND
to provide a master soundtrack for all of them.
the Netscape Way
While Microsoft opted to add the DYNSRC
attribute to the old familiar <IMG> tag, Netscape chose instead to
introduce an entirely new tag called <EMBED>.
The <EMBED> tag enables you to place
any type of file directly into your Web page. In order for the media to appear on the Web
page, however, every user must have a plug-in that recognizes the incoming data type and
knows what to do with it. A plug-in is like a helper application that is fused into
Navigator itself; it adds a new set of display capabilities directly into the browser.
The plug-ins that come bundled with Netscape
Navigator 3.0 can handle most common media types, including WAV, AU, MPEG, MID, EPS, VRML,
and many more. Many other plug-ins are also available from other companies to handle
almost any type of media file.
The following line of HTML would embed a video clip
named lobstah.avi at the cur- rent position on the page, as long as visitors to
the page have an AVI-compatible plug-in or helper app.
Notice that, like the <IMG> tag, <EMBED>
requires a SRC attribute to indicate the address of the embedded media file. Also
like <IMG>, the <EMBED> tag can take ALIGN, WIDTH,
and HEIGHT attributes. The SRC, WIDTH, HEIGHT, and ALIGN
attributes are interpreted by the browser just as they would be for a still image.
However, the actual display of the video is handled by whichever plug-in or helper app
each user may have installed.
The <EMBED> tag also enables you to
set any number of optional parameters, which are specific to the plug-in or player
program. For instance, the page in Figure 19.5 includes the following:
WIDTH=160 HEIGHT=120 ALIGN="left"
AUTOPLAY="true" LOOP="true" ONCURSOR="play">
AUTOPLAY, LOOP, and ONCURSOR
are not standard attributes of the <EMBED> tag, so the browser simply hands
them over to the plug-in program to interpret. AUTOPLAY="true" and LOOP="true"
are specific to the Netscape Navigator 3.0 LiveVideo plug-in (they tell it to
automatically play the video as soon as it loads, and to play it over again each time it
If a user happens to have the CoolFusion AVI viewer
plug-in (from Iterated Systems, Inc. at http://www.iterated.com),
CoolFusion will interpret the ONCURSOR="play" command to mean that
whenever the user passes the mouse cursor over the video, it should restart. If a user has
a different AVI plug-in, or no plug-in at all for handling AVI files, this attribute will
do nothing at all. (Refer to the Web pages of each plug-in developer for information on
the commands that their plug-in will accept as attributes in the <EMBED>
Figure 19.5. The <EMBED> tag embeds
multimedia files directly into a Web page in Netscape Navigator.
Figure 19.6. With the appropriate Navigator plug-in
installed, AVI files appear on the Web page just as if AVI support were built in to
Just A Minute: Netscape Navigator 2.0 did not
include a plug-in to view AVI files, so users had to install a third-party plug-in, such
as CoolFusion, before they could view video clips. But the Navigator version 3.0 comes
precon-figured with a plug-in for AVI files, so most new users of Netscape will be able to
see embedded videos without installing any additional software.
If a suitable plug-in can't be found for an <EMBED>
tag, the Windows 95 versions of both Netscape Navigator 3.0 and Microsoft Internet
Explorer 3.0 may embed an OLE-compliant application to play the media file. For example,
Figure 19.7 shows the same page as Figure 19.6 viewed with Microsoft Internet Explorer
3.0. The Windows Media Player application is embedded directly in the Web page.
Figure 19.7. Microsoft Internet Explorer 5.0 may
embed a separate helper appli-cation to play a media file in an <EMBED>
Basically, when Navigator and Explorer encounter an <EMBED>
tag, they try their hardest to find some way to embed the media file directly in the Web
page. As a Web page author, you can't predict what plug-in or helper application will be
selected, but you can at least put some instructions on the Web page telling your audience
where to download a suitable player.
Just A Minute: Embedded helper apps only work
in Windows 95 and Windows NT. They will not function for Macintosh or UNIX users. Also,
you should not confuse this use of Windows object linking and embedding (OLE) with the
ActiveX controls discussed in the next chapter--even though they do rely on the same
underlying OLE technology.
You can use <EMBED> with any type of
audio, video, or interactive multimedia files as long as your audience has the correct
player software installed.
Unfortunately, you as a Web page author have no
control over or knowledge of which file types and applications people who visit your pages
will have configured on their computers, or even how many visitors will be using a
Microsoft Windows operating system. So the exotic uses of <EMBED> are
probably best left to corporate intranets or other situations where the page publisher has
some control over the intended audience's computer setup.
Because Netscape knew that its browser would be the
first (and perhaps only) browser to support the <EMBED> tag, they provided
an easy way to include alternate content for other browsers. Immediately following an <EMBED>
tag, you can specify any amount of HTML code for other browsers, between the <NOEMBED>
and </NOEMBED> tags. For example, Figure 19.5 contains the following code:
<EMBED SRC="lobstah.avi" WIDTH=160 HEIGHT=120 ALIGN="left"
AUTOPLAY="true" LOOP="true" ONCURSOR="play">
<IMG SRC="lobstah.jpg" DYNSRC="lobstah2.avi" LOOP=INFINITE
WIDTH=160 HEIGHT=120 ALIGN="left" BORDER=0>
Here's how this will work in various browsers:
- Netscape Navigator 3.0 sees only the EMBED
tag and ignores everything between <NOEMBED> and </NOEMBED>.
It ignores the Microsoft-specific <BGSOUND> tag. (If the Netscape LiveMedia
plug-in is installed, it interprets AUTOPLAY and LOOP as discussed
earlier. If the CoolFusion plug-in is installed, it interprets the ONCURSOR
- In Netscape Navigator 2.0, if no AVI-compatible
plug-in is installed, users may see an unsightly puzzle-piece icon and a message saying Plug-in
Not Loaded. If they click on the Get the Plug-in button, they will be taken to a page
on Netscape Corporation's Web site explaining how to get and install plug-ins and helper
- Microsoft Internet Explorer 3.0 looks in the Windows
file type registry for a player for the <EMBED> tag. If it can't find one,
it plays the video specified in <IMG DYNSRC> with its internal video
player. It also plays the sound in the <BGSOUND> tag.
- Microsoft Internet Explorer 2.0 sees the <BGSOUND>
and IMG tags. It plays the lobstah8.wav sound file in the background and
displays the lobstah.jpg image. I added the words "CLICK ME!" to this
image so that users with an AVI helper app can click on the image to play the lobstah.avi
video clip specified in the A HREF attribute.
- Most other browsers see only the IMG SRC
attribute and display the lobstah.jpg still image. If they have an AVI-compatible
helper application installed, they can click on the image to see the video play in a
- Netscape Navigator version 1.2 is actually a special
problem case because it recognizes the <EMBED> tag, but not the <NOEMBED>
tag. It displays both the image specified in IMG SRC and an embedded OLE display
or, more often, a broken image icon resulting from a failed attempt to display the <EMBED>
tag. Clicking on the "CLICK ME!" image will still launch an AVI helper app if
one is available.
To thicken the plot, some people who already have
the software they need to view your EMBED media files may see a message
announcing boldly "Warning: There is a possible security hazard here," which
appears in Figure 19.8. What this message really means is that the user has a helper app
available on his system that can display the media file, and Netscape Navigator (version
2.0 or 3.0) is about to run it. The alarmist tone of the message is very unfortunate,
because the likelihood of having any security risk is actually no greater than any other
time a helper app is invoked or a page is displayed.
Some novice users are sure to become convinced that
they must click Cancel or risk having the monitor blow up, but what you really want them
to do is click Continue, so they can watch a totally harmless video clip.
Unfortunately, there's really nothing you can do as
a Web page author to control whether this message appears, or any of the configuration
options discussed in the next few pages. However, you should still be aware of what users
may see so you can intelligently choose if and when to use the <EMBED> tag,
and what sort of caveats to offer along with your embedded media.
Figure 19.8. This alarmist message may appear in
Netscape Navigator before users can see your innocent media files.
the New Way
Both Microsoft's <IMG DYNSRC> and
Netscape's <EMBED> tag have come under fire for a number of reasons, both
technical and political. At present, it looks nearly certain that they will be made
obsolete very soon by a new tag called <OBJECT>, which has the blessing of
Netscape, Microsoft, and the official World Wide Web Consortium (W3C) standards-setting
committee. The <OBJECT> tag will do everything Netscape wants the <EMBED>
tag to do, plus a lot more.
You can read more about the <OBJECT>
tag, including an example of its use, under "ActiveX Controls" in Chapter 20,
"Scripting, Applets, and ActiveX." The exact usage of <OBJECT> is
still under revision by the standards committee, so you should also keep an eye on the W3C
pages at http://www.w3.org/pub/WWW/ for more information.
In this chapter, you've seen how to embed video and
sound into a Web page. But remember that the <EMBED> tag (and its
successor, the <OBJECT> tag) can be used to include a vast array of media
types besides just Windows AVI and WAV files. Some of these media types are alternative
audio and video formats that aim to achieve greater compression, quality, or compatibility
than the Windows standard formats. Others, such as Shockwave and QuickTime VR, add a
variety of interactive features that old-fashioned audiovisual media types lack.
Table 19.1 summarizes the tags discussed in this
Table 19.1. HTML tags and attributes
covered in Chapter 19.
||Normally inserts an
image, but Microsoft Internet Explorer 3.0 also supports the inclusion of AVI video with
the following attributes. (All <IMG> attributes covered in Chapter 9 can
also be used with DYNSRC video.)
||The URL of the image to
be shown by browsers that can't show video.
||The address of a video
clip in the Windows AVI format (dynamic source).
||Used to display a set of
video playback controls.
||The number of times a
video clip will loop. (-1 or INFINITE means to loop indefinitely.)
||When a DYNSRC
video clip should start playing. Valid options are FILEOPEN (play when a page is
displayed) or MOUSEOVER (play when a mouse cursor passes over the video clip).
||Plays a sound file as
soon as the page is displayed (in Microsoft Internet Explorer version 2.0 or higher only).
||The URL of the WAV, AU,
or MIDI sound file to embed.
||The number of times a
video clip will loop. (-1 or INFINITE means to loop indefinitely.)
||Embeds a file to be read
or displayed by a Netscape plug-in application.
||The URL of the file to
||The width of the embedded
object in pixels.
||The height of the
embedded object in pixels.
||Determines the alignment
of the media window. Values are the same as for the <IMG> tag.
||The space between the
media and the text above or below it.
||The space between the
media and the text to its left or right.
||Draws a border of the
specified size in pixels around the media.
||Alternate text or images
to be shown to users who do not have a plug-in installed or are using browsers that don't
recognize the <EMBED> tag.
||Inserts images, videos,
Java applets, ActiveX controls, or other objects into a document.
(Note: The <OBJECT> tag was under
revision when this guide went to press. Check http://www.w3.org
for current standard usage.)
Just A Minute: In addition to the <EMBED>
attributes listed in Table 19.1, you can designate applet-specific attributes to be
interpreted by the plug-in which displays the embedded object.
- Q I hear a lot about "streaming" video
and audio. What does that mean?
A In the past, video and audio files took minutes and sometimes hours to retrieve
through most modems, which severely limited the inclusion of video and audio on Web pages.
The goal that everyone is moving toward is streaming video or audio, which will play while
the data is being received. This is to say that you will not have to completely download
the clip before you can start to watch it.
Streaming playback is now widely supported for Windows AVI video and WAV audio files
through Microsoft Internet Explorer 3.0's built-in features and Netscape Navigator 2.0 and
3.0 plug-ins. The examples in this chapter use these media types to demonstrate both
streaming and the old-fashioned download-and-play methods of delivering audiovisual media.
Q How do I choose between video formats such as QuickTime, Windows AVI, and MPEG? Is there
any significant difference between them?
A QuickTime is the most popular format among Macintosh users, though QuickTime players
are available for Windows 3.1 and Windows 95 as well. Similarly, AVI is the format of
choice for Windows users, but you can get AVI players for the Macintosh. However, both
QuickTime and AVI are almost certain to be eclipsed by MPEG as the online video standard
of choice within the next couple of years. MPEG-1 is best for Internet transmission
because it is far more compact than MPEG-2. Unfortunately, few people have MPEG-compatible
players installed now.
So how do you choose? If your audience is mostly Windows users, pick AVI. If it includes a
significant number of Mac users, pick QuickTime. In either case, plan to switch to MPEG
Q When I say I want multimedia on my Web pages, everybody tells me to get Shockwave. What
is it, and do I need it?
A Macromedia Director is by far the most popular multimedia development platform, both
for CD-ROMs and on the Internet. The online player for Director files is called Shockwave,
and you should certainly take a look at it if you're serious about creating your own Web
page multimedia. See Macromedia's site at http://www.macromedia.com for more
(There are also many other excellent multimedia development tools available--too many to
list in this chapter!)
- 1. What's the simplest way to let the widest
possible audience see a video on your Web site?
2. Write the HTML to insert a video clip named thevideo.avi that will be seen
only by users of Microsoft Internet Explorer 3.0. Users of other browsers should see an
image named standin.gif instead. While you're at it, make the video automatically
play when the page loads and repeat as long as the page is showing.
3. Write the HTML to embed a video file named myvideo.avi into a Web page so
that both Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0 users will be able to
see it, and users of other browsers would see an image linking to it.
4. What tag will soon replace both <IMG DYNSRC> and <EMBED>,
and work with future versions of all major Web browsers?
- 1. Just link to it, like this:
<A HREF="myvideo.avi">My Video</A>
2. <IMG DYNSRC="thevideo.avi" SRC="standin.gif"
3. Use the following HTML:
<EMBED SRC="myvideo.avi"> <NOEMBED> <A
- If you include multimedia elements that require
special players, you might need a special page to help people understand and set up what
they need to make the most of your site. A link to that page should be prominently located
near the top of your home page, steering newcomers aside just long enough to give them a
- The techniques and tags covered in this chapter for
embedding media also work with Virtual Reality Modeling Language (VRML) files. To find out
how you can use VRML to put interactive three-dimensional scenes and objects in your Web
pages, check out the VRML home page at