|
|
by Dick Oliver
For better or worse, multimedia has come to the Web-and in a big way. In the last year, dozens of new formats for the compression or streaming transmission of audio and video data have been released publicly or incorporated into widely distributed software products. Meanwhile, the HTML specification has evolved so quickly that two variant forms-each with its own strong and weak suits regarding multimedia content-have advanced well beyond the canonical version overseen by the Internet Engineering Task Force and the World Wide Web Consortium. The trend seems to be picking up speed, as developer after developer rushes to lay claim to that most elusive of all digital media titles: "The Industry Standard."
The new wave of World Wide Web applications is providing multimedia developers and content creators with more bells, whistles, gongs, and interactive-design options than ever possible before. The question is no longer "Can I add multimedia to my Web site?" but rather "Which tools are best for the specific type of multimedia experience I'm envisioning?" There are also many to choose from. This chapter provides you with a solid understanding of how to make your way through this minefield of choices and add multimedia content to your Web pages.
Obviously, before you can place anything on your Web page, you first have to obtain it-or create it from scratch. Creating multimedia of any kind is a challenging and complicated task-one that is made no easier by the fact that the very tools used in its creation are constantly changing. If you're planning to create your own content from scratch you might want to consider skipping ahead to Chapter 23, "Creating Online Audio," Chapter 24, "Working with Video," or Chapter 25, "Adding Interactivity with Shockwave for Director." There you will find detailed information regarding the creation and formatting of your content. You can return to this point when you're ready to begin looking at how to place your new creations into your Web pages.
For those of us who are artistically challenged, a number of alternative ways to obtain useful multimedia assets are available. Aside from the obvious ("hire an artist"), here are a few suggestions:
| Note |
It's still a good idea to double-check with the accredited author or current owner of the content; you don't want to get sued for copyright infringement. In addition, various offices of the U.S. government have spent a good deal of time and money generating content that, by law, belongs to all Americans (any NASA footage found online, for instance); these assets are free for you to use. Consult your favorite search engine or the hotlist on the CD-ROM. |
| Note |
If you plan to make money off your site in any way-and maybe even if you don't-it is advisable to seek the services of an attorney who is familiar with copyright law and to spell out the terms of ownership in a formal agreement. |
For the examples in this chapter, we 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 morphed with PhotoMorph 2 software to create a short video (see Figure 22.1). We then recorded and mixed a voice-over with GoldWave (see Figure 22.2), with some music by a friend (Dana Robinson) in the background. Finally, the sound and video were combined, clipped, and compressed with Video Action ED (see Figure 22.3), a low-cost, commercial video-editing program.
All these tools-and many similar ones-are inexpensively available in software stores and on the Internet (except Windows Sound Recorder, which is included with Microsoft Windows). The quality of the end result (which you can see in examples/downeast/downeast.htm on the CD-ROM) isn't great, but it's about as good as anything on the Web that you can reasonably play back over a 28.8 Kbps or slower modem. The point is that you don't need to own a multimillion-dollar production studio to create multimedia that looks and sounds as good as you can expect within the bandwidth restrictions of today's Web.
For more details on producing and optimizing multimedia content with free and inexpensive tools, refer to Chapters 23 and 24.
In the past, browsers have been limited to prerecorded and canned sequences, retrieved as full files. Video and audio files took minutes and sometimes hours to retrieve, thus severely limiting the inclusion of video and audio. The goal that everyone is moving toward is the creation of video that will be small enough to "stream" over the Web. This means you will not have to completely download the clip before you can start to watch it. Streaming video or audio will play in real time while the data is being received.
The real-time transfer of video data streams introduces new problems of maintaining adequate playback quality in the face of network congestion and client load. Nevertheless, a large number of companies are making streaming video a reality (with varying levels of success).
MPEG-1 is emerging as the video file-format standard because it produces video files that are typically one-quarter the size of other video formats. Unfortunately, MPEG-1 is not currently supported by QuickTime, so at present most of the streaming video technologies are limited to pc users.
A number of packages are cross-platform at present, but they require special server software that is out of the price range of most individual users. By the time you read this, however, Apple should have released a beta version of QuickTime 2.5, and a number of other companies are also planning products to serve and receive streaming MPEG over normal modem lines. For late-breaking news on this promising development, keep your eye (and ear) on the multimedia news-sites hotlist on the CD-ROM included with this book.
Meanwhile, streaming playback is now widely supported for Windows AVI and WAV files through Microsoft Internet Explorer and Netscape Navigator 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.
When it comes to placing audio, video, and animation (as well as any other sort of data you might want to send to a browser) in your Web pages, these media are not that different at all. In fact, as far as standard HTML is concerned, the only difference between one kind of file and another is the corresponding media type, which is indicated by the file extension (the three or four letters following the dot at the end of the filename). Given this significant piece of information (and, of course, the data in the file itself), the browser will marshal its helpers or plug-ins to handle everything as seamlessly as possible.
The tag you use to place a file into your Web page determines how (and if) it responds when browsed. There are a couple of things you'll have to consider when doing this-namely, which browsers you intend on serving best, and whether or not you're going to stick to the authorized, "official" HTML spec (which is specifically designed to minimize incompatibilities and display errors among all known browsers).
The following discussion demonstrates how to embed video and sound into your Web pages so that users of all major browsers can enjoy the multimedia experience.
You are by now familiar with the function of the <IMG> tag, which is used to incorporate inline graphics (which are displayed directly "in" the page, as opposed to within the window of an external viewer). As of this writing, the <IMG> tag as implemented by Netscape Navigator 3.0 recognizes only gif or JPG formats, but Microsoft Internet Explorer 3.0 enables you to include BMP images and-more significantly-AVI videos and three-dimensional VRML worlds.
Figure 22.4 shows an AVI video clip embedded in a Web page in
Microsoft Internet
Explorer 3.0.
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, older browsers that don't support DYNSRC will simply display the SRC image instead. This is a very painless way to ensure backward compatibility!
Two more new attributes can be used along with DYNSRC in an <IMG> tag, too. CONTROLS causes a set of controls to be displayed beneath the video clip. LOOP=INFINITE makes the video automatically repeat forever, whereas 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.
| Note |
As of version 3.0, Netscape Navigator does not support the DYNSRC attribute. You'll see how to handle embedded video for Netscape later in this chapter. |
You can achieve a click-and-download effect by simply placing the file name in an anchor tag with an HREF, as shown in this line:
<A HREF="/WINDOWS/MEDIA/CANYON.MID">Click Here to Download</A>
This way, of course, the associated helper program is triggered as soon as the file has finished downloading, and executes the file (in the example above, for instance, the MIDI helper would fire up and play CANYON). If no helper program has been specified under General Preferences (in Netscape) or the Windows Associations (in Explorer), your browser will ask if you wish to save the file.
To make the lobster video in the DownEast Restaurant sample page available to users who don't have Internet Explorer 3.0, you could enclose the IMG tag with an ordinary A HREF link, and perhaps include the words "Click me!" or something similar in the SRC image; for example,
<A HREF="lobstah.avi"> <IMG DYNSRC="lobstah2.avi" SRC="lobstah.jpg" WIDTH=160 HEIGHT=120>
</A>
Figure 22.5 shows the result of an Internet Explorer 2.0 user clicking on the lobstah.jpg image; a separate AVI window appears and plays back the video. This is exactly the same page as seen with Explorer 3.0 in Figure 22.4 (examples/downeast/downeast.htm). Users of other browsers would see whatever AVI viewer their software was configured to use as a helper app, or they would be given the chance to save the AVI file to disk if no viewer was available.
| Note |
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:
<BGSOUND SRC="lobstah.wav">
The background sound may not synchronize exactly with video content on the page, but in situations where that's okay 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.
A particularly effective way to reduce the file sizes on your page is to use a short video with the LOOP attribute to repeat it several times (or continually), while a longer background sound plays. This was used in the downeast.htm example on the CD-ROM to reduce the total multimedia file size for the page from over 500 K (lobstah.avi) to less than 200 K (lobstah8.wav and lobstah2.avi), while keeping the same voice over and a similar video effect.
To save even more space, you can specify a MIDI music file as the BGSOUND SRC. Because MIDI files are usually at least ten times as compact as a WAV file of the same time duration, you can use MIDI to effectively serve quite lengthy soundtracks-even to 14.4 Kbps modem users.
Netscape Navigator versions 2.0 and 3.0 can be extended to handle inline data of any type. This makes for a seamless presentation, compared to the original method of making the target app a helper for nonnative media types; the nonnative data is output right into the displayed page, rather than being sent to any external applications or opening more windows.
In order for the seamless presentation to occur, however, the 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 that is fused into Navigator itself. Rather than executing anything external or launching files from the desktop, it adds a new set of display capabilities directly into the Netscape browser.
The Plug-Ins Development Kit, available for free from Netscape, enables developers to create new plug-ins for their own products and data types. For more information, see Netscape's Web site at
http://www.netscape.com/comprod/development_partners/plugin_api/index.html
In addition to the audio, video, and virtual reality plug-ins that are included with Netscape Navigator 3.0, third-party plug-ins are available for almost all common media types. Many of the most promising plug-ins make use of special encoding techniques that enable streaming of massive data files (such as high-fidelity audio or video data); this makes for more immediate output and shorter download time, without degrading the quality of the user's experience.
Netscape maintains a Web page that lists all registered plug-ins and plug-in developers. To check out the current assortment, simply fire up your trusty browser and head out to the Netscape home site:
http://home.netscape.com/
If you're serious about staying up-to-date as far as your plug-in collection is concerned, you'll probably want to stop by fairly regularly because new plug-ins are frequently added to the list.
As mentioned earlier, every media file embedded within an HTML page possesses a media type, which tells the browser how the file should be handled upon receipt (that is, which plug-in or helper app the data should be passed to). Media types are automatically associated with the appropriate files (based upon file extensions or the existence of a self-descriptive header within the body of the file itself). The transmission process is fairly transparent while it happens-assuming proper installation, the flow of multiple media formats can be quite seamless.
Unfortunately, the programs used to process these files-plug-ins especially-are still relatively new (even by the youthful standards of the World Wide Web). In realistic terms, this means that many users will have to expend some effort to obtain and install the necessary plug-ins or helper programs before they'll be able to view your media files.
Basically, we're talking about asking your online visitors to undergo the equivalent of a software upgrade. Even though most plug-ins are easy to install and available as freeware (for the time being, at least), this is still something that many people may be reluctant to do. Fortunately, you can do a number of simple things to help make this entire process as painless as possible for your Web guests. Keep these details in mind:
Just when you think you've mastered the last HTML element you'll ever need to know, along comes another set of expansions to the specification. You might as well get used to it-HTML's rapid evolution shows no sign of stopping any time soon. Besides, they wouldn't add a new tag if it weren't a good and necessary thing, right? (Don't answer that question without donning your asbestos longjohns; this is the sort of stuff religious wars are based on….)
Whereas 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, but only for people who have a plug-in or helper app installed and configured to accept the media type you embed. For example, the following line of HTML
<EMBED SRC="lobstah.avi">
would embed a video clip named lobstah.avi at the current position on the page, as long as visitors to the page have an AVI-compatible plug-in or helper app. (You'll find out shortly what happens if the user doesn't have an AVI viewer.)
Notice that, like the <IMG> tag, <EMBED> possesses an SRC attribute, which indicates the URL of the embedded document or application. Also like <IMG>, the <EMBED> tag can take ALIGN, WIDTH, and HEIGHT attributes.
The <EMBED> tag also enables you to set any number of optional parameters in order to pass startup values to the program being called. For instance, the page in Figure 22.6 includes the following:
<EMBED SRC="lobstah.avi" WIDTH=160 HEIGHT=120 ALIGN="left" AUTOPLAY="on" OncURSOR="play">
| Note |
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 preconfigured 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. |
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 AUTOPLAY and OncURSOR parameters are not standard attributes of the <EMBED> tag, so the browser simply hands it over to the user's plug-in program to interpret. If a user happens to have the CoolFusion AVI viewer plug-in installed, CoolFusion will interpret the OncURSOR="play" command to mean that whenever the user passes the mouse cursor over the video, it should restart. It is important to know that this parameter is meaningful only to CoolFusion, and that most other plug-ins have their own particular parameters that they can understand. If a user has a different AVI plug-in, or no plug-in at all for handling AVI files, then this parameter will do nothing at all. The LiveVideo plug-in included with Netscape Navigator 3.0, for example, will ignore the OncURSOR parameter but will interpret the AUTOPLAY="on" parameter as an instruction to immediately play the video when it loads. Refer to the Web pages of each plug-in developer for information on the commands that its plug-in will accept as attributes in the <EMBED> tag.
| Tip |
If you want to support two or more popular plug-ins for the same media type that understand different parameters, you can put parameters for each of them in the same <EMBED> tag. Any parameters that aren't meaningful to the particular plug-in a user has installed will simply be ignored. |
<EMBED> works great when all the visitors to your site have the appropriate plug-in installed. But what will people who don't have the right plug-in see? That depends, unfortunately, on circumstances beyond your control as a Web-page publisher.
One thing you can be certain of is this: Users of Microsoft Internet Explorer 2.0 (and most other older browsers) will ignore the <EMBED> tag completely. However, users of Netscape Navigator 2.0 may see an unsightly puzzle-piece icon and a message saying Plugin Not Loaded, as shown in Figure 22.7. If they click on the Get the Plugin 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 (see Figure 22.8).
Figure 22.8 : Clicking Get the Plugin in Figure 22.7 takes you to this page on Netscape's site.
Experienced Web surfers will probably find it fairly easy to navigate from the links on Netscape's "About the page you've requested" page to the site where the plug-in they need can be downloaded. But many novice users are likely to throw up their hands in confusion, and blame the problem on something they "shouldn't have done." Those people may or may not ever make it back to your Web page. To avoid this confusion, you should provide your own links to any plug-ins that visitors to your site will need, along with an explanation of how to download and install them. This preferably should be done on a home page that will be seen before any pages where <EMBED> tags are used.
To thicken the plot, Microsoft Internet Explorer 3.0 interprets the <EMBED> tag differently from previous versions of Explorer. Although Internet Explorer does not support Netscape plug-ins, it does support embedded helper applications. This means that when Explorer encounters an <EMBED> tag, it looks for the Windows 95 program that is registered to display the media type specified in the SRC attribute and embeds that application in the Web page. Figure 22.9 shows this for the AVI video and the <EMBED> tag in the page from Figure 22.6. Netscape Navigator 3.0 also supports embedded helper applications (see Figure 22.10), but only when it can't find a suitable Netscape plug-in.
| Note |
Embedded helper apps work only 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 OLE plug-in controls discussed later in this chapter. Though they do rely on the same underlying software technology, embedded helper apps do not require any sort of Netscape plug-in to function. Note that the helper app will restrict its display to the area you specified with the WIDTH and HEIGHT attributes, which may result in squashed or warped output if controls are included that a plug-in wouldn't display (see Figure 22.11). You can avoid this by leaving out the WIDTH and HEIGHT attributes, but then any text or images further down the page will not be displayed until the entire media file is done downloading-which might be a long time if you've embedded a big video file! You may be wondering how Internet Explorer and Netscape Navigator know which helper app to invoke to go with each embedded media type. If you guessed that they refer to the helper app list that a user can access by selecting Options | General Preferences | Helpers, you're wrong! Those helper configurations are used only for media linked with an <A HREF> tag and are ignored for the <EMBED> tag. Instead, the Windows file-type associations registry is used to find the appropriate application to handle the embedded media type. |
Figure 22.12 shows how to edit the Windows 95 associations to control which embedded helper app will get which file types, and the following list steps you through the process in more detail.
Be aware that any changes you make here will affect all OLE embedding in any Windows program-not just Netscape Navigator. For example, if you change the application program associated with AVI video files, any AVI video embedded in Microsoft Word documents is displayed with the new application from then on.
Though multimedia files are an obvious use of embedding, you can actually embed any media type for which a plug-in or OLE application is configured. In Figure 22.13, for instance, a TIF image has been embedded into a Web page and Netscape invoked Paint Shop Pro to display it. (The separate Paint Shop Pro editing window was opened only when the embedded image was double-clicked.)
The HTML code to embed this TIF was just the same as for any other media type: <EMBED SRC="lobstah.tif">
Unfortunately, you as a Web page author have no control over or knowledge of which file types and applications that 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 in which the page publisher has some control over the intended audience's computer setup.
Because Netscape and Microsoft knew that their browsers would be the first (and perhaps only) to support the <EMBED> tag, they provided an easy way to provide alternate content for other browsers. Immediately following an <EMBED> tag, you can specify any amount of HTML code for other browsers, surrounded by <NOEMBED> (and </NOEMBED>) tags. For example, the examples/downeast/downeast.htm document shown in the figures throughout this chapter contains the following code:
<EMBED SRC="lobstah.avi" WIDTH=160 HEIGHT=120 ALIGN="left" AUTOPLAY="on">
<NOEMBED>
<BGSOUND SRC="lobstah8.wav">
<A HREF="lobstah.avi">
<IMG SRC="lobstah.jpg" DYNSRC="lobstah2.avi" LOOP=INFINITE
WIDTH=160 HEIGHT=120 ALIGN="left" BORDER=0>
</A>
</NOEMBED>
Here's how this code will work in various browsers:
The preceding sections detail the principle uses of the <EMBED> tag-namely, to display inline versions of the specified file or to enable the user to launch the associated helper program in order to view/play the file. However, <EMBED> has a tricky side as well: The tag can be used to push just about any common type of file to the user's machine by causing the client to perform what you might call a forced download.
The syntax for this function is exactly the same as the typical <EMBED> tag, including an SRC attribute that refers to the URL of the file you want to send, as shown in this line:
<EMBED SRC="filename.zip">
There are two major conditionals on the use of <EMBED> for this purpose. First, it does not work with EXE files (obviously, this would be a major security risk). Second, it will work only as described here if the user has a helper application associated with the media type (file extension) in question. If no helper (or plug-in) exists on the user's machine, all the user receives is an inline picture of the default "dead" icon, indicating that Netscape doesn't know what to do with the file. When working with the more common file types, this stipulation should pose no problem at all; but if the file is of some rare type, it is necessary to make the associated helper app available before the forced download will work.
This function is useful if you want to send a file automatically on page load (that is, as soon as a Netscape browser displays your page), or if you need to get a file to people who are unfamiliar with FTP and uncomfortable with computers in general. The user doesn't even have to click on an icon to receive the file, which will be sent automatically to whatever folder is specified in his or her Temporary Directory settings under General Preferences | Apps.
Another thing that makes this feature so useful is that the source file (on the server) does not have to exist within a publicly accessible directory (as would be the case with a typical FTP); embedding the file's URL into your page effectively bypasses this necessity.
Needless to say, this function should be used rarely and responsibly.
The <EMBED> tag has come under fire for a number of reasons, both technical and political. As of this writing, the W3C seems highly unlikely to accept the <EMBED> tag; in fact, they've even drafted a sort of counter-proposal that specifies a new tag called <OBJECT> (both Netscape and Microsoft were involved in the creation of this second proposal, though it was Microsoft's idea to call the tag <OBJECT> instead of the originally proposed <INSERT>). The <OBJECT> tag will do everything Netscape wants the <EMBED> tag to do, plus a lot more. You'll find out the details of how to use the <OBJECT> tag with Microsoft Internet Explorer and Macromedia's Shockwave player in Chapter 25.
None of this has stopped Netscape from using <EMBED> as originally proposed. Indeed, the <EMBED> tag is an integral element of Netscape's current plug-in system, which has already won much support from users and vendors alike. Obviously, the goal for Netscape is to make sure that use of the <EMBED> tag becomes so common that the WC3 has no alternative but to accept it as an official part of HTML. Netscape has moved quickly and openly toward this goal, and thanks to the dozens of third-party vendors who've already invested time and money in the creation of plug-ins for embedded media, Netscape may stand a chance of getting what it wants.
Microsoft, meanwhile, has decided to stick with the original unfortunately named <IMG> tag, and has proposed a number of additional attributes that would enable it to be used for embedding sound and AVI files, as explained earlier in this chapter.
Keep your eye on the W3C pages at http://www.w3.org/pub/WWW/ for more on this topic-the <EMBED> wars are far from over.
In this chapter, you've seen how to embed video and sound into a Web page. But remember that the <EMBED> 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.
In Chapter 23, "Creating Online Audio," and Chapter 24, "Working with Video," you'll get some tips and instructions for producing your own clips for use on the Web. Chapter 25, "Adding Interactivity with Shockwave for Director," introduces true interactive multimedia for the Web, with the ever-popular Macromedia Director software.
