Adding Sound and Video

Used correctly, sound and video clips can greatly enhance the content in your Web pages. Imagine a Web page about Dr. Martin Luther King, Jr. that didn't include something about his famous "I Have a Dream" speech. The text of the speech is moving, but the delivery is what made it so powerful. You can add sound and video clips to your own Web pages using some HTML tags you've already learned.

Tip

You can hear the "I Have a Dream" speech at http://www.americanrhetoric.com/speeches/Ihaveadream.htm.

This lesson discusses several methods for adding sound and video clips. You should know that the one method that is sure to work with every browser on every platform is also the simplest: the <a> tag.

<a href="http://www.americanrhetoric.com/mp3clips/ politicalspeeches/mlkihaveadream35348.mp3"> Listen to the I Have a Dream speech.</a>

When your visitors click on the words Listen to the I Have a Dream speech, the mlkihaveadream35348.mp3 file will download to their computers and begin playing. If the visitors do not have the correct plug-in to hear the sound clip, the browser should prompt them to save the file for later. It will not, however, prompt them to download the correct plug-in. You will need to provide that information on your page.

Tip

Try typing "sound clips" into your favorite search engine to find sound files you could use on your own pages.

Video clips can be handled in exactly the same way:

<a href="    http://www.lucidcafe.com/library/96jan/96jangifs/    MLK630828Video.ram"> Watch a video of Dr. King's greatest speech.</a>

Caution

Use sound and video sparingly and make the wait worthwhile. Even short clips can have a large file size and may take a very long time to load. Make sure that you give your visitors some idea of the content of the clip so that they can decide whether to wait for the download.

<embed>

Netscape invented a new tag called <embed> to enable you to include a sound or video clip on a Web page. Microsoft's Internet Explorer browser also accepts this non-standard tag. The following sample shows how the <embed> tag works to add a video clip.

Tip

If you'd like to duplicate the following sample, you can download the video clip from http://download.microsoft.com/download/0/9/d/09d051c4-decc-4d39-9c57-f520187213a1/Amazing_Caves_720.exe and save it to your own desktop. Then just change the src attribute to suit your needs.

<p>Click the video to see a clip from the IMAX movie Journey    into Amazing Caves.</p>      <embed src="/books/1/174/1/html/2/C:\Documents and        Settings\qc04818\Desktop\Amazing_Caves_720.wmv"        width="360" controls="true" autostart="true"        loop="false">          <noembed>            <a href="C:\Documents and             Settings\qc04818\Desktop\Amazing_Caves_720.wmv">             Click for a surprise.</a>          </noembed>      </embed> <p>You will need the <a href="http://www.microsoft.com/      windows/windowsmedia/download/      AllDownloads.aspx?displang=en&qstechnology=">      Windows Media Player</a> to see this clip.</p>

The browser displays the control panel for the media device you use, as shown in Figure 12.1. You can add width and height attributes to the <embed> tag to control the size of the video still. The <noembed> tag provides an alternate way for visitors to download the video if their browser doesn't recognize the <embed> tag.

Figure 12.1. When embedded, a control panel for the device used to play the video or sound clip, appears in the browser.

Notice that I've included four attributes for the <embed> tag in this example: width, controls, autostart and loop. Width sets the width of the video. It is not necessary to set the height since the video will size the image proportionally. Controls ensures that the video player controls are included. Autostart, which you can set to true or false, tells the browser whether to begin playing the clip immediately upon loading the page. The loop attribute tells the browser how many times in a row to play the clip before stopping. You can set the loop attribute to any whole number.

Another attribute you can set is autorewind. This attribute is automatically set to true, but if for some reason you don't want to rewind the clip after it plays, you can set it to false. The hidden attribute hides the player's VCR controls from the user. Hiding the controls gives you, the developer, more control over the use of the clip, but may annoy your visitors if they are not allowed to turn your clip on or off.

<object>

The <embed> tag is nonstandard, which means that the W3C doesn't recognize it as a legitimate HTML markup tag. The W3C prefers that Web page developers include sound and video clips using the <object> tag. You will learn more about this tag in Lesson 14, "Creating Active Web Pages."

<p>Click the video to begin playing.</p>     <object class>     </object> <a href="C:\Documents and    Settings\qc04818\Desktop\Amazing_Caves_720.wmv">Surprise!</a>

Caution

Unfortunately, the <object> tag does not yet work consistently in all browsers, although it is the W3C-preferred tagging method. Be prepared to either always include an alternate <a href> tag for sound and video elements, or duplicate your work by including the <embed> tag as well.

The <object> tag also comes with a multitude of attributes that you can set to help control the use of the clip in your Web page. You can add a border around the object by using the appearance attribute and setting the value to 1. The <object> tag also has an autostart and autorewind attribute.