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 below shows my document and how I've linked to my media files.
Example: Linking to audio and video
<!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>tutorial 3</title>
</head>
<body>
<a href="media/audio-sample.mp3">Link to Audio Sample</a><br />
<a href="media/video-sample.avi">Link to Video Sample</a>
</body>
</html>
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.
Links to audio and video samples.
So far, pretty easy, right? Well, there are a few more things to do with links to give visitors an easier time managing the audio and video.
Beware Browser Behavior Differs
Different 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.
Because most audio and video clips are quite large, it's helpful to provide the file sizes on the page so visitors are prepared. You can do this by simply typing the details into the link or directly after it.
Some folks even go so far as to provide a range of file sizes for their low-, medium-, and high-bandwidth visitors.
Another way to assist is to place a description of the file into the title attribute of the link.
Figure: Providing helpful details for audio and video links.
This helps provide more detail to all and also alerts those folks who can't see or hear to understand what the link is for.
Example: Adding details for your visitors
<a href="media/audio-sample.mp3" title="audio singing">Link to Audio Sample</a>. Size: 1,300KB<br /> <a href="media/video-sample.avi" title="video of sarah's dance class">Link to Video Sample< /a>. Size: 29,000KB