Section 16.1. Understanding Multimedia

16.1. Understanding Multimedia

Multimedia is a catch-all term that includes a variety of different technologies and file types, all of which have dramatically different computer requirements and pose different Web design challenges. Before you can jazz up your site with audio or video, you need to understand a few basics.

16.1.1. Linking and Embedding

One of the key choices you'll make when outfitting your Web pages with multimedia is whether to link or embed the files you're adding.

Linking to your multimedia content is the simplest but least glamorous approach. The basic idea is that you create a link that points to the audio or video file that you've stored alongside all the other HTML and image files on your site. There's really nothing to creating linked multimedia. All you need is the lowly anchor tag (see Chapter 8) to create the link. The href attribute of the link points to your file, as in this example:

Would you like to hear <a href="IndustrialNoiseBand.mp3">Industrial Noise</a>?

Figure 16-1 shows what happens when you click one of these babies.

Figure 16-1. When you click a linked multimedia file, the browser asks whether to save the multimedia file or open it straight way. If you choose the latter, the browser first downloads the file, and then launches it using a separate program. The actual program that's used to play the file depends on what software you have installed on your computer. For example, if you use the popular Winamp ( to play MP3 files, the downloaded song heads straight to your Winamp play list. Other common players include Apple QuickTime Player and Windows Media Player.

Note: It makes absolutely no difference what kind of software is running on your Web server when you add linked audio to your site. The audio is always downloaded to the Web surfer's computer and played there.

Embedding multimedia is a more advanced approach that aims to integrate ordinary HTML content with background music or a video window. Embedding multimedia can be a challenge. Depending on what kind of file you're embedding, your visitor's browser might not support it. Another problem is that you might need to have special software on your Web server. Usually, the role of this software is to take a large multimedia file (like a five-minute movie clip), and send it out to browsers piece by piece. This process, known as streaming , allows the Web surfer's computer to start playing the multimedia file before it's completely downloaded.

Note: The distinction between linking and embedding multimedia is the same as the difference between linking to a picture (with the <a> tag), and embedding it right in your page (with the <img> tag). The only difference is that images are a basic, well-supported part of the HTML standard, so embedding never causes much concern. However, embedding audio and video takes you into less-charted waters.

16.1.2. Types of Multimedia Files

The decision to link or embed will be decided, at least partly, by the type of multimedia content you want to show. Because HTML doesn't have any multimedia standard of its own, other companies have innovated to fill the gaps. Today, there's a slightly bewildering field of choices.

Here are the types of multimedia you'll see in this chapter:

  • Synthesized music (MIDI) . MIDI files are very small, low-quality music files. Although the audio quality depends on the sound hardware in your site visitor's computer, the results most commonly resemble a cheesy Casio keyboard. But because they're lightweight and supported on almost all browsers, MIDI files are the most common type of Web page background music. (MIDI stands for Musical Instrument Digital Interface.)

  • Digital audio (WAV and MP3) . These file types store recorded audio, which makes for far better quality. However, WAV files are enormous , which makes them unsuitable for all but the most bloated Web sites. MP3 files are 10 times slimmer, but browsers often don't support them directly, which means you can't always embed MP3 files.

  • Digital video (MPEG, AVI, MOV, and WMV) . These file types are the heavy hitters of multimedia. They allow you to show full video that ranges in quality from a jerky thumbnail- sized window to DVD-quality playback. Digital video is a challenge for any Web page creator, because it's ridiculously large. In order to have even a chance of making it work, you need to compress, shrink, and reduce the size and quality of your video clips with video editing software.

  • Animated GIFs . Animated GIFs are small animations that actually consist of a sequence of static images shown one after the other (like a flipbook). If you see a Web site with a dancing carton character, spinning text, or pulsing globe (don't ask), you're probably looking at an animated GIF. Most Web-heads don't consider these to be real multimedia, because they're so simple. However, GIF files are small, pretty easy to create, and they're widely supported.

  • Flash . Flash is an animation standard that's designed especially for the Web. Flash movies are vector-based , which means they're built out of animated shapes rather than a series of video frames . That makes them much smaller than digital video, and perfect for creating animated logos, commercials, and dazzling intro screens (see Figure 16-2). Flash animations can also be interactive, which means a Flash guru can use Flash to build slick menus and games . However, in order to create a Flash animation, you need to buy specialized software from Macromedia, which runs into the hundreds of dollars. And even if you shell out the cash, you'll find that creating the professional Flash animations you want requires the skill of a talented Flash artiste. Finally, Flash movies won't even appear at all in a Web surfer's browser unless it has the Flash plug-in installed (which most do). (A plug-in is a small program that extends the browser with extra features, like the ability to handle otherwise foreign types of files.)

Figure 16-2. The news and current affairs site makes nonsubscribers sit through a short commercial before gaining access to any articles. Though the commercial varies, it's always a Flash animationa fact you can confirm by right-clicking (Control-clicking, on a Mac) on it at any time. Instead of seeing options that let you download it (as you would with a picture), you'll see a command for changing playback settings.

It's difficult to digest all the information in this list at once. If you're still mulling over you're different choices, take a look at the scenarios in Table 16-1 to help you sort out the roles of the different multimedia types.

Table 16-1. Multimedia Scenarios

If You Want To:

Then Use:

Embedded or Linked

Play a synthesized version of your favorite pop tune in the background

MIDI files


Play a short loop of digital audio continuously in the background

Flash (You can use the MP3 format instead, but not all browsers will support it, and the looping is less precise.)


Let visitors download your band 's newest indie recordings

MP3 files (Record your music using WAV files and then covert them into MP3 format to save space.)


Show a stock animation effect, like clapping hands, a flashing star, or a dancing bean

Animated GIFs


Let visitors see your favorite home movie

MPEG, AVI, or MOV files (But make sure you use video editing software to dramatically reduce the file size.)

Either one (although linking is easiest ).

JavaScript or Flash (JavaScript only works with Internet Explorer; Flash works with all browsers, but takes more work)

Flash (This can also be done through JavaScript, but browser support is more limited.)


Show an animated intro screen or commercial

Flash (Animated GIFs are used sometimes, but they look chintzy.)


Show a humorous animated story that you've created



Tip: If you plan to create a Web site with a significant amount of digital audio and video, you'll need to reconsider your space and bandwidth requirements (see page 66). Unlike ordinary HTML and Web graphics, multimedia files can grow quite large.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: