Linking to Multimedia FilesThe 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. 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.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.
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. |