Hour 12. Using Multimedia in Your Web Site

The term multimedia encompasses everything we see and hear on a web page: audio, video, and animation, as well as static images and text. In previous hours, you learned how to use images and text, so in this hour, you’ll learn about including the other types of multimedia in your web sites. You won’t learn how to create any particular audio, video, or animation, but you will learn how to include such files in your site, through either linking or embedding the content.

Before even thinking about including multimedia in your site, remember that not every user has devices that will play your media type, nor do all users have broadband Internet connections which allow these large files to transfer quickly. Always warn your visitors that the links they click will take them to multimedia files, and offer them the choice to view or listen to the content—don’t force the files upon them.

Linking to Multimedia Files

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.

For example, the following line could be used to offer a MOV video of a hockey game:

When the user clicks the words View the hockey video clip., the hockey.mov QuickTime video file is transferred to her computer from your web server. Whichever helper application or plug-in she has installed automatically starts as soon as the file has finished downloading. If no compatible helper or plug-in can be found, the web browser will offer her a chance to download the appropriate plug-in or save the video on her hard drive for later viewing.

Listing 12.1 contains the code for a web page that uses a simple image link to play a video in Windows Media file format. In addition to the image link, a link is also placed within the text to provide context for the user.

Listing 12.1 Using the <a> to Link an Image to a Windows Media Video

This code simply uses the projector.gif animated GIF image as a link to the pond.wmv video clip. Figure 12.1 shows the pond sample page with the projector image in view. When the image is clicked, the Windows Media Player is invoked and begins to play the movie.

Figure 12.1 The projector.gif animated GIF image is used as an image link to a Windows Media file that launches an external helper application.

To view the video, you need only to click the animated projector (or the text link in the paragraph). This action results in the browser either playing the video with the help of a plug-in (if one is found that can play the clip) or deferring to a suitable helper application.

If you change the link from pond.wmv (Windows Media) to pond.mov (QuickTime), your browser handles the link differently. Instead of launching another program, the QuickTime plug-in allows you to view the movie clip directly in the browser window (see Figure 12.2).

Figure 12.2 When you follow the image link, the pond.mov QuickTime movie is played using the QuickTime browser plug-in.

As you might have guessed, this approach of using a simple link to play multimedia files offers the best backward compatibility because the browser bears all the responsibility of figuring out how to play a multimedia clip. The downside to this is that you don’t have much control over how a clip is played, and you definitely can’t play a clip directly in the context of a page.

Embedding Multimedia Files

XHTML contains a standard <object> tag that is the preferred way to embed multimedia of any kind in a web page. This tag is used instead of the old <embed /> tag that you might still see in some HTML source code.

Embedding a multimedia file into a page produces a set of software controls that allow the file to be played directly—no secondary window is necessary, and there’s no need to navigate away from the page you are on. Following is code to embed the pond video, which you saw earlier, using the <object> tag by itself:

This code isn’t too terribly complicated when you consider that it literally embeds a video directly into your web page (see Figure 11.3). The messiest part of the code is the classid attribute of the <object> tag, which is set to a long alphanumeric code. This code is the “global ID” for Windows Media Player, which means that you’re telling the <object> tag to embed Windows Media Player on the page to play the video clip. You can just copy and paste this code into your own web pages.

Figure 12.3 The <object> tag allows you to embed a video clip on a web page while specifying which media player is to play it.

The width and height attributes of the <object> tag determine the size of the embedded Windows Media Player window. Some browsers will automatically size the embedded player to fit the content if you leave these attributes off, whereas others won’t show anything at all. Play it safe by setting them to a size that suits the multimedia content being played.

There are four <param> tags within the <object> tag that are responsible for additional details about how the clip is to be played. Each tag has two attributes, name and value, which are responsible for associating data (value) with a particular setting (name). In this example, the URL for the media clip is set to pond.wmv. The third parameter, uiMode, determines which buttons and user interface options are made available by Windows Media Player—full indicates that all user interface features are enabled, such as the control buttons and volume slider. Finally, the autoStart parameter is set to false so that the video clip does not automatically start playing when the page is opened in a browser.

The type parameter is perhaps the trickiest. It identifies the type of media being displayed, which in this case is a Windows Media Video (WMV) file. This media type must be specified as one of the standard Internet MIME types.

A MIME type is an identifier for uniquely identifying different types of media objects on the Internet. MIME stands for Multipurpose Internet Mail Extensions, and this name comes from the fact that MIME types were originally used to identify email attachments. These MIME types should be used in the type attribute of the <object> tag to identify what kind of multimedia object is being referenced in the data attribute.

Following are the MIME types for several popular sound and video formats you might want to use in your web pages:

• WAV Audio—audio/x-wav

• AU Audio—audio/basic

• MP3 Audio—audio/mpeg

• MIDI Audio—audio/midi

• WMA Audio—audio/x-ms-wma

• RealAudio—audio/x-pn-realaudio-plugin

• AVI—video/x-msvideo

• WMV—video/x-ms-wmv

• MPEG Video—video/mpeg

• QuickTime—video/quicktime

Listing 12.2 shows the relevant code for the pond web page, where you can see the <object> tag as it appears in context.

Listing 12.2 Using an <object> Tag to Directly Embed a WMV Video Clip

You might notice that there’s some extra code that didn’t appear in the earlier <object> tag example. Unfortunately, as discussed earlier in the hour, not all web browsers are entirely consistent in their support of the <object> tag. For this reason, it is necessary to include an <embed /> tag within the <object> tag to account for browser inconsistencies. This isn’t an ideal solution, but it’s all we have while browser vendors continue to lag behind prevailing standards. If you pay close attention, you’ll notice that the <embed /> tag contains all the same information as the <object> tag.

The <object> tag is a bit more complex than what is revealed here. However, you don’t need to know how to use the more advanced facets of the <object> tag just to play multimedia content. In other words, it isn’t important for you to become a multimedia guru in order to share some multimedia clips on your web pages.

Additional Tips for Using Multimedia

Before you add video, audio, or animations to your web site, first ask yourself if you really should. When you use these types of multimedia, be sure to do so for a reason. Gratuitous sound and video, just like gratuitous images, can detract from your overall message. Then again, if your message is “Look at the videos I have made” or “Listen to my music and download some songs,” then multimedia absolutely must play a role in your web site.

Here are a few additional tips to keep in mind:

• Don’t include multimedia in a page and set it to automatically play when the page loads. Always give users the option to start (and stop) your sound or video.

• When possible, give users a choice of multimedia players. Don’t limit yourself to multimedia content playable by only one type of player on only one operating system.

• Multimedia files are larger than the typical graphics and text files, which means you need to have the space on your web server to store them, as well as the bandwidth allotment to transfer them to whomever requests them via your web site.

• If your site is entirely audio or video and offers very little by way of text or graphics, understand that a certain segment of your audience won’t see or hear what you want to present because of the limitations of their system or bandwidth. Provide these users with additional options to get your information.

• Leverage free online video hosting services, such as YouTube (http://www.youtube.com/). Not only does YouTube provide storage for your video clips, it will provide you with the code necessary to embed the video in your own web page. For example, Figure 12.4 shows the YouTube page for the cutest puppy in the world. If you copy and paste the text from the “Embed” area shown in the figure, you would get the following:

Figure 12.4 YouTube provides storage of your video files as well as links and <object> code for use in your own pages.

You could then insert the code into your web page.

Summary

In this hour, you’ve learned how to embed video and sound into a web page. You learned how to use a simple link to a multimedia file, which is the most broadly supported but least flexible option for playing media content. You then learned how to use the <object> tag to embed a media player directly in a web page. Not only that, you learned that for maximum browser compatibility, it helps to assist the <object> tag with the <embed /> tag. The <object> and <embed /> tags can be used to include a vast array of media types, including WAV, MP3, RealAudio, and MIDI files—not to mention AVI, WMV, and QuickTime videos, to name just a few.

Table 12.1 summarizes the tags discussed in this hour.

Table 12.1 HTML Tags and Attributes Covered in Hour 12

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 plays while the data is being received. In other words, you don’t have to completely download the clip before you can start to watch it or listen to it.

Streaming playback is now widely supported through most media players, in both standalone versions and plug-ins. When you embed a media object using the <object> tag, the underlying media player automatically streams the media clip if streaming is supported in the player.

Q How do I choose an audiovisual file format among QuickTime, Windows AVI/WAV, RealVideo/RealAudio, and MPEG? Is there any significant difference among them?

A QuickTime is the most popular video format among Macintosh users, though QuickTime players are available for Windows as well. Similarly, AVI/WMV and WAV/WMA are the video and audio formats for Windows users, but you can get players for the Macintosh that support these formats. MPEG is another popular audio and video standard. MPEG-3 (MP3 is already extremely popular as the high-fidelity audio standard of choice). One other audio format that is based on MPEG is Apple’s AAC format, which might be more familiar to you as the native iTunes music format.

If most of your audience uses Windows, use AVI/WMV for video and WAV/WMA or MP3 for audio. If your audience includes a significant number of Macintosh users, use QuickTime or RealVideo/RealAudio, or at least offer some alternative. MP3 is also a viable option for Mac audio. If cross-platform compatibility is essential, consider going specifically with MP3 for audio or RealVideo/RealAudio—although only those who download special software from http://www.real.com/player/ will be able to see RealVideo/RealAudio clips.

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. What’s the simplest method to provide access to a video on your web site for the widest possible audience?

2. What HTML would you use to embed a video file named myvideo.avi into a web page so that the users of all major web browsers will be able to see it? The video requires an area on the page that is 320[ts]305 pixels in size.

3. How would you code a <param> tag within an <object> tag so that a media clip is played repeatedly?

Answers

1. Just link to it:

2. Because the video clip is in a Microsoft format (AVI), you should embed a Windows Media player object using the following HTML code:

3.

Exercises

• Try your hand at creating your own video clip and embedding it in a web page, or find some freely available clips from the web and practice placement within your text.

• The techniques and tags covered in this hour for embedding media also work with Flash files. To find out how you can use Flash to put interactive animations in your web pages, check out the Flash home page at http://www.adobe.com/products/flash/.