Chapter 19

• Putting Video on a Web Page
• Multimedia the Old-fashioned Way
• Embedding Video the Microsoft Way
  • Figure 19.1.
  • Figure 19.2.
  • Figure 19.3.
  • Figure 19.4.
• Microsoft Background Sounds
• Multimedia the Netscape Way
  • Figure 19.5.
  • Figure 19.6.
  • Figure 19.7.
• Trying to Please Everybody
  • Figure 19.8.
• Multimedia the New Way
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 19

Embedding 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.

Putting Video 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 computer).

---

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.

---

Multimedia 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.

---

Embedding 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 as

<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 image instead.

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 installed.

---

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.

Microsoft Background Sounds

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:

<BGSOUND SRC="lobstah.wav">

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.

Multimedia 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.

<EMBED SRC="lobstah.avi">

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:

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 finishes).

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> tag.)

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 Netscape Navigator.

---

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> tag.

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.

Trying to Please Everybody

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:

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 command.)
• 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 apps.
• 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 separate window.
• 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.

Multimedia 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.

Summary

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 chapter.

Table 19.1. HTML tags and attributes covered in Chapter 19.

(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&A

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 eventually.

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 information.

(There are also many other excellent multimedia development tools available--too many to list in this chapter!)

Quiz Questions

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?

Answers

1. Just link to it, like this:
<A HREF="myvideo.avi">My Video</A>

2. <IMG DYNSRC="thevideo.avi" SRC="standin.gif" START="fileopen" LOOP="infinite">

3. Use the following HTML:
<EMBED SRC="myvideo.avi"> <NOEMBED> <A HREF="myvideo.avi"><IMG SRC="theimage.gif"></A> </NOEMBED>

4. <OBJECT>

Activities

• 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 clue.
• 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