Приглашаем посетить
Добычин (dobychin.lit-info.ru)

Linking to Multimedia Files

Previous Page
Table of Contents
Next Page

Linking to Multimedia Files

The simplest and most reliable option for incorporating a video or audio file into your web site is to simply link it in with <a href>, exactly as you would link to another HTML file. (See Hour 3, "Linking to Other Web Pages," for coverage of the <a> tag.)

For example, the following line could be used to offer an AVI video of a hockey game:

<a href="hockey.mov">View the hockey video clip.</a>

When the user clicks the words View the hockey video clip., the hockey.mov QuickTime video file is transferred to her computer. Whichever helper application or plug-in she has installed automatically starts as soon as the file has finished downloading. If no AVI-compatible helper or plug-in can be found, the web browser offers her a chance to download the appropriate plug-in or save the video on the hard drive for later viewing.

By the Way

In case you're unfamiliar with helper applications (helper apps for short), they are the external programs that a web browser calls on to display any type of file it can't handle on its own. Generally, the helper application associated with a file type is called on whenever a web browser can't display that type of file on its own.

Plug-ins are a special sort of helper application installed directly into a web browser, and they allow you to view multimedia content directly within the browser window.


Listing 19.1 contains the code for a web page that uses a simple image link to play a QuickTime video. The page is a modified version of the familiar pond example from Hour 9, "Custom Backgrounds and Colors."

Listing 19.1. The <a> Tag Is Used to Link an Animated GIF Image to a QuickTime Video
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Michael's Pond</title>
  </head>

  <body style="background-image:url(water.jpg)">
    <p style="text-align:center">
      <img src="pondtitle.png" alt="Michael's Pond" />
    </p>
    <p>
      My backyard pond is not only a fun hobby but also an ongoing home
      improvement project that is both creative and relaxing. I have numerous
      fish in the pond, all Koi from various places as far as Japan, Israel,
      and Australia. Although they don't bark, purr, or fetch anything other
      than food, these fish are my pets, and good ones at that. The pond was
      built in a matter of weeks but has evolved over several years through
      a few different improvements and redesigns. I still consider it a work in
      progress, as there are always things to improve upon as I continue to
      learn more about how the pond ecosystem works, how to minimize
      maintenance, and how to get a more aesthetically pleasing look.
    </p>
    <p style="text-align:center">
      <a href="pond1.jpg"><img src="pond1_sm.jpg"
      alt="The Lotus, Floating Hyacinth, Japanese Lantern, and Waterfall All
      Add to the Drama of the Pond" style="border-style:none" /></a>
      <a href="pond2.jpg"><img src="pond2_sm.jpg"
      alt="Feeding Time is Always Full of Excitement"
      style="border-style:none" /></a>
      <a href="pond3.jpg"><img src="pond3_sm.jpg"
      alt="One of the Larger Fish Cruises for Dinner"
      style="border-style:none" /></a>
      <a href="pond4.jpg"><img src="pond4_sm.jpg"
      alt="A Dragonfly Hovers Over the Lotus for a Quick Drink"
      style="border-style:none" /></a>
    </p>
    <p style="text-align:center">
      To view a video of my fish playing in the pond, click the video below:
      <br />
      <a href="pond.mov"><img src="projector.gif" alt="Pond Video"
      style="border-style:none" /></a>
    </p>
  </body>
</html>

Most of the code in the listing is from the original pond example. However, the following code in particular is new:

<a href="pond.mov"><img src="projector.gif" alt="Pond Video"
style="border-style:none" /></a>

This code uses the projector.gif animated GIF image as a link to the pond.mov QuickTime video clip. Figure 19.1 shows the pond sample page with the projector image in view.

Figure 19.1. The projector.gif animated GIF image is used as an image link to a QuickTime movie.

Linking to Multimedia Files


All you must do to view the video is click the animated projector. This results in the browser either playing the video with the help of a plug-in, if one is found that can play the clip, or deferring to a suitable helper application. Figure 19.2 shows Mozilla Firefox playing the QuickTime movie using a plug-in.

Figure 19.2. When you follow the image link, the pond.mov QuickTime movie is played using the QuickTime browser plug-in.

Linking to Multimedia Files


By the Way

If your browser has no support for QuickTime, you can download the QuickTime player free from Apple at http://www.apple.com/quicktime/. Even if you do have QuickTime installed, some browsers may still play QuickTime movies differently based on whether a plug-in is installed. For example, on my Windows computer Internet Explorer and Firefox both play QuickTime movies directly in the browser window via a plug-in, whereas Opera launches QuickTime as a helper application.


As you might have guessed, this approach of using a simple link to play multimedia files offers the best backward compatibility because it puts all the responsibility of figuring out how to play a multimedia clip on the browser. The downside to this is that you don't have much control over how a clip is played, and you definitely can't play a clip directly in the context of a page.


Previous Page
Table of Contents
Next Page