Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Audio and Video

Last updated Oct 17, 2003.

By Molly Holzschlag

Well-managed audio and video can bring your Web pages to life. Poorly managed audio and video can drive your audience away. Who hasn't quickly left a site to escape a droning background sound clip? Who hasn't been excited to see a great video on the Web, only to find out that you must commit a good part of an afternoon to download it? Audio and video can add a great deal to your site, but it will take some thought and experimentation on your part to make it work for your audience.

If you are interested in venturing into the world of audio and video, there are many factors you must consider. How can you produce high-quality audio and video? How much quality should you sacrifice for efficiency? Should you use downloadable files or streaming technology? Does your audience have the software they need to experience your work?

You must also look at any potential hardware investment as well as software purchases for encoding and processing media. When you encode audio video, you capture it to your hard drive. The faster the computer, the faster you'll be able to work with your audio and video. To produce professional quality audio and video, you need a very fast machine and high-quality audio and video capture cards.

Downloadable Multimedia

Downloadable multimedia files are ones that are completely loaded onto the user's hard drive before they are played.

There are two ways in which you can place and access Web-based audio and video that will be read successfully across browsers: by using the anchor tag and the embed element.

Using the anchor element is the same as placing any link within a document:

<a href ="labor-day.mpeg">View some video of our Labor Day bash!</a>

If you use this method, your users will either save the file to their desktops, launch a plug-in application, or load a new browser page—depending on which browser they're using and how they have set their preferences.

If you want the audio or video to appear on the same page as the rest of the content, you must embed the clip in the page by using the embed element. Use of the embed tag is similar to the use of the img tag. However, the embed tag requires users to have the appropriate plug-in installed, or they will not see your work.

The following sample is for a video clip, but the embed tag also works for audio files, as well as for streaming video and audio.

<embed src="/media/labor-day.mpeg" height="105" width="100" 
[ccc]controller="false" autoplay="
true" pluginspage="getplug.html" loop="palindrome" />

CAUTION

The embed element is not a standard element. The only way to adhere to standards and embed media is to use the object tag. You can choose to use the object tag to embed media; however, you won't have the flexibility and interoperability due to cross-browser and platform problems. At this time, it's still recommended that you use embed or combine embed and object when working across platforms and browsers.

TIP

In this section's Online Resources section, there's a link to an article ("Flash Satay") that addresses this issue.

Streaming Audio and Video

An attempt to avoid the eternal bandwidth problem is streaming technology. In 1994, RealAudio introduced a way of delivering Internet audio based on the User Datagram Protocol (UDP) rather than the usual Transmission Control Protocol (TCP). This technology was later used for transferring video files as well.

Streaming technology does not require confirmation of the receipt of all the data; instead, it delivers the file as quickly as possible. This means that a user can begin playing the audio or video file even before the whole file is received. The user's wait time is cut dramatically. Over time, a wide range of streaming products and services have brought streaming enhancements to the Web, from as simple as the streaming of songs and short video clips, to live cameras and full-service online radio stations.

Adding streaming media to your Web site is not a decision to be made lightly. You and your client may agree that streaming audio will greatly enhance the site, but you must also weigh the expense in terms of both time and money.