Linking to an Audio or Video File
If you'd like to provide links to media on your site, you can do so just as easily as linking an image. Many file types exist for audio and video, the most popular these days being the MP3, QuickTime, Real, and Windows Media files.You first place your media file into a subdirectory. As with images, this is a convention that helps you keep all your various files organized. In this case, I've named the subdirectory media (how's that for brilliant?) and placed two files in it, one an MP3 audio file and the other an .avi video file. Example 3-5 shows my document and how I've linked to my media files.
Example 3-5. Linking to audio and video
I've added text within the links and placed a break between the two links so they appear on top of one another rather than side by side, for the sake of clarity. This results in the links as shown in Figure 3-8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Chapter 3</title>
</head>
<body>
<a href=">Link to Audio Sample</a><br />
<a href=">Link to Video Sample</a>
</body>
</html>
Figure 3-8. Links to audio and video samples.

Beware Browser Behavior DiffersDifferent browsers and different browser configurations influence the way that linked audio and video is displayed. As the link is selected, some browsers automatically download the file into an external media player and play the audio or video clip. Other browsers provide a pop-up option asking whether you'd like to open the file with the appropriate application, or download it and save it to your hard drive. Because of these differences in behavior, it's helpful to let your visitors know as much about the link they're about to click on as possible. |
Figure 3-9. Providing helpful details for audio and video links.

Example 3-6. Adding details for your visitors
[View full width]
<a href=" title="audio of molly singing">Link to Audio Sample</a>.Size: 1,300KB<br />
<a href=" title="video of sarah's dance class">Link to Video Sample</a>. Size: 29,000KB