Do you want to add multimedia to your Web pages? Multimedia offers interesting ways to tell stories, describe products, and provide interactivity to your viewers. This chapter shows you how to integrate video, audio, Java applets, and more to enliven your pages and attract users to your site. It also teaches you what users need to have installed in order to view these advanced features.
Understanding Multimedia Elements 198
Link to Video or Audio Files 200
Embed a Video File 202
Embed an Audio File 204
Embed a Flash Movie 206
Add a Java Applet 207
The term multimedia encompasses all kinds of dynamic visual and audio data, including graphics, sound, animation, and movies. Multimedia can create an ambiance for the site, enhance your site's message, illustrate a product or service, or simply entertain. You can incorporate your multimedia elements into your HTML pages in a variety of ways, but you should first understand how such elements work on the Web.
Delivering Media Files
You can deliver multimedia files to your Web site visitors in several ways. You can link to an external media file, embed the file into your page, or stream the file. The method you choose depends on the way in which you want the user to interact with the file. This chapter covers linking to external files and embedding files. Regardless of the method, you must specify the location of the file — either on your Web server, where the multimedia files are stored with your HTML, or on an external host. When choosing a media file and format to add to your page, always consider your target audience. It is usually a good idea to include information about the multimedia elements in case the user needs to install special programs or plug-ins to view them.
External Media Files
One way to incorporate a multimedia element into your page is to supply a link to an external media file. For example, you might allow a visitor to click a link and download a PDF slide show of your vacation pictures or an MP3 music file of your latest song. If the user decides to access the file, the browser helps him or her determine how to download it and where to store it. After downloading the file, the user can play the file in a separate window using the appropriate media player or program.
Embedded Files
You can integrate a multimedia file directly onto your page by embedding the file. When the user accesses the page, the file plays as part of the page content. For example, you might embed a video file to play in an area on the Web page. The file could be located on your server or on an external host such as YouTube. Depending on the file type and setup, the file may play immediately when the user displays the page or when the user clicks a button or other feature on the page.
Plug-ins
Plug-ins are specialized applications that work with the browser to play media files, typically focusing on a particular file format. If users do not have the right plug-in to play your file, they can download the plug-in, install it, and use it as part of their Web browser. First introduced by Netscape, plug-ins are now popular among all the browsers. For example, you can install a Flash Player plug-in to allow your browser to play Flash multimedia files.
Media Players
Media players are separate programs designed to handle many types of media files. Often called all-in-one players, media players can work both separately and alongside browsers to play multimedia files encountered on and off the Web. Popular media players include Windows Media Player from Microsoft, QuickTime player from Apple, and RealPlayer from RealNetworks. Users can download copies of these popular media players from the Internet. You can help your users by providing links to download locations.
You can insert links on your Web page that, when clicked, download and play an audio or video file. When you link to a file, the file may open within the Web browser or in a separate application window, depending on the configuration of your computer. Linking is the least complicated way to deliver multimedia files to your Web page visitors.
If you are hosting the multimedia content yourself, make sure you upload the audio or video file along with the HTML document when publishing your content.
Note
See Chapter 6 to learn more about creating HTML links.
When you open the HTML document, the Web browser displays the link on the page.
Note
See Chapter 2 to learn more about viewing your HTML document as an offline Web page.
In this example, a QuickTime player is displayed within the Web browser to play the audio file.
Note
Does my page need to include information about the multimedia file to which I am linking?
It is always good practice to give your Web page visitors all the information they need to know in order to download and view any type of multimedia file. For example, you can include a brief description of the file, list the file format and size, and provide a link to any plug-ins or media players the user might need to play the file.
How can I add background music to my page?
You can assign an audio clip to play in the background while users visit your page using the BGSOUND tag. The tag is not part of the official HTML standard; it works in Internet Explorer but does not work in some other browsers such as Firefox. You reference the audio file using the SRC attribute, such as <BGSOUND SRC="audio.mp3">.
You can use the <EMBED> tag to add an embedded video clip to your HTML page. Embedded videos play directly on your page. Playback controls also appear on the page, allowing the user to start and stop the video.
You can control the size of the window in which an embedded video appears. You can also control whether the video starts automatically when the page loads and whether the video repeats, or loops, after it finishes. To add embedded sound to your page, see "Embed an Audio File."
Popular video file formats include Audio/Video Interleaved (.avi), QuickTime (.mov), and Windows Media Video (.wmv).
When you open the HTML document, the Web browser displays the embedded video window and playback controls on the page.
Note
How do I embed a video hosted on YouTube?
You can embed a video from YouTube (www.youtube.com) on your Web page by inserting HTML from the video's Embed text box. The video owner must have embedding enabled for this box to be available. To add the video, click the Embed box on the YouTube page for the video to select the HTML. Then click Edit and then Copy in your browser to copy the code for pasting into your HTML document. You can edit the WIDTH and HEIGHT attribute values in the code to change the dimensions of the inserted video.
You can add an embedded sound to your HTML page using the <EMBED> tag. You can surround the <EMBED> tag with <OBJECT> tags to make your code compatible with more Web browsers. The OBJECT tag requires class ID information that tells the browser what type of multimedia file is being played.
You can adjust the space in which the sound controls appear on the page. To add embedded video to your page, see "Embed a Video File."
You can experiment with the values to make the controls the right size for your page.
In this example, the QuickTime plug-in is specified with a class
IDof02BF25D5-8C17-4B23-BC80-D3488ABDDC6B.You can perform a Web search to find the class IDs for other popular plug-ins.
When you open the HTML document, the Web browser displays the sound controls on the page.
The embedded sound controls allow you to play, pause, and stop the sound as well as control the volume.
Note
What audio file formats are common on the Web?
Here is a list of common audio formats supported by most browsers, plug-ins, and media players:
You can add a Flash movie to your Web page. Introduced in 1996, Flash is a popular method for adding animations, interactive games, and movies to Web pages. Using an ActiveX class ID along with the OBJECT element, you can instruct the browser with the necessary information to load and play the Flash file. Flash movies usually have a file extension of.swf, which stands for Shockwave Flash, or.flv, which stands for Flash Video.
You can add Java applets to your Web pages to add animation and interactivity. Java applets are programs written in the Java programming language. Many applets are available for downloading on the Web. The Java Boutique (www.javaboutique.internet.com) and JavaShareware.com (www.javashareware.com) are good places to start. You can also conduct a Web search to find more free Java applets. To view Java applets, viewers must be using a Java-enabled Web browser. A browser plug-in is included with the Standard Edition of Java, which can be downloaded at www.java.com.
