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:
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.
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.
The following sections show you how to add some audio and video to a Web page in four different ways:
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).
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.
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.
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.
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.
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:
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.
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.
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:
Here's how this will work in various browsers:
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.
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
(Note: The <OBJECT> tag was under revision when this guide went to press. Check http://www.w3.org for current standard usage.)