HTML 4_01 Weekend Crash Course - G. Perry
.pdf
S E S S I O N
19
Activating Pages with
Multimedia and Rollovers
Session Checklist
Speed up your multimedia processes with bandwidth
Add sound to your Web site
Add video to your Web site
Learn how to code the rollover effect, thereby offering movement to Web pages
Why would you want to add multimedia elements to your Web pages?
To make the pages more enjoyable, to make them stand apart from the crowd, to give them zing! Why would you not want to add multimedia elements to your Web pages? After 18 sessions, you know the answer: Extras will
slow your page-loading time and lose viewers. In this session, you learn how to add multimedia and changing content while still maintaining quick-loading pages.
250 |
Saturday Evening |
Speeding Up the Multimedia Process with Bandwidth
Fortunately, you have time on your side. Bandwidth, the avenue of speed on which Web pages travel, is only getting faster, not slower. The faster the average user’s bandwidth becomes, the more successfully you can add multimedia to your site. Still, you need to be conservative a while longer, because most users are still tied to modem technology and will be for a few more years.
Some Web sites require more multimedia than others. For example, you may want to present audio information in a radio show format. You might create a Web page for a movie production company that wants to embed previews on the site. Such sites can be slower than normal for the slow-bandwidth users because these users know what to expect. This session describes the multimedia options you have for Web pages.
Adding Sound to Web Pages
Sound is perhaps the easiest form of multimedia to add to a Web site. You can play a Windows-like intro clip as someone first views your site. In addition, you might want to put a list of recorded conferences from your company meetings on the site. Table 19-1 lists the most common audio formats that you can store on a Web page. By far, the most popular formats are MPEG for music files and RealAudio for
radio and voice files.
You can learn more about these two formats at http://www.mp3. com/ and http://www.real.com/. Both sites offer players you can use to preview audio clips, and both provide much content
Cross-Ref
for your enjoyment.
Many sites use short WAVE sound clips to welcome a user to the Web page. Short clips don’t consume much load time, although they certainly impact the load time. If you want to use a sound clip, you can find several by searching your computer’s disk drive for those that your operating system utilizes for its messages. In addition, http://www.wavecentral.com/ offers several WAVE files you can use, both royalty-based and royalty-free, for sound effects.
Session 19—Activating Pages with Multimedia and Rollovers |
251 |
Table 19-1
Common Audio Formats
Name |
Extension |
Description |
MIDI |
.mid |
Individual instrumental sounds |
|
|
|
MPEG |
.mp3 |
Songs and online radio broadcasts, often used |
|
|
for storing audio CD content on computers |
|
|
|
RealAudio |
.ra or .rm |
Songs, voice, and online radio broadcasts |
|
|
|
WAVE |
.wav |
Sounds such as those produced by Windows |
|
|
|
Sound with HTML
A sound clip requires very little effort to include on a Web page. Basically, you create a hyperlink to the sound file just as you might create a link to another Web page. Consider the HTML code in Listing 19-1, which describes and provides the Windows 98 start-up sound on a Web page. Figure 19-1 shows the Web page that this short HTML code produces.
Listing 19-1
Providing the Windows 98 start-up sound on a Web page
<html>
<head>
<title>Starting Windows 98</title> </head>
<body>
<h1>Windows 98 Tutorial</h1> <h2>The Start-up</h2>
<font size=3 face=”Arial”>Once you start a computer running Windows 98, the computer performs a self-test and then <br>Windows 98 loads. Toward the end of the loading, you’ll hear the <a href=Start.wav>Windows 98
Evening Saturday—IV Part
19 Session
Continued
252 |
Saturday Evening |
Listing 19-1 |
Continued |
start-up sound</a>. </font>
</body>
</html>
Figure 19-1
When the user clicks the hyperlink, the sound plays.
|
Just as you save your site’s graphics in a single images directory, |
|
save your sounds in their own folder as well, named “sounds.” If |
Tip |
a sound appears twice throughout a site, the user’s browser only |
has to load the sound once. If the same clip appears in multiple |
|
|
directories, the browser has to load the same sound twice. Once |
|
you create video content, as explained in the section named |
|
“Adding Video to Web Pages,” you should store the video in its |
|
own folder called “videos” as well. |
Better sound management
When offering sound or any other kind of multimedia event, be sure to provide the size of the clip, perhaps in a ToolTip message. Give the user some idea of the length of the clip and the size of the file. Otherwise, the user may have to wait longer than expected for the clip to load.
By adding the following title to the hyperlink in Listing 19-1, you enable the user to rest the mouse cursor over the link to preview the sound parameters before deciding to play the sound:
<a href=Start.wav title=”The start-up sound will play, 4 seconds, 676K”>Windows 98 start-up sound</a>
Session 19—Activating Pages with Multimedia and Rollovers |
253 |
Not only does such a title help warn the user that a long delay may be waiting ahead, but also, users without sound equipment and hearing-impaired users will know what the link produces from your description.
Depending on the type of sound file, your user may or may not be able to play the clip without some kind of accessory program. Although most users can play WAVE files, not all users have an MPEG or a RealAudio player on their system. If they do not, and if another sound player such as Windows Media Player or the Mac’s QuickTime player does not support your sound file’s format, the user will not hear the audio. You may want to provide a link to the format’s home site, such as the RealAudio Web site, so that the user can go there to download the proper player before clicking on your sound’s link. The problem is that the users will often move on to another site rather than spend the time downloading the right player. Fortunately, MPEG and RealAudio formats are so popular today that you can usually assume that users have the correct players needed for your clips.
Adding Video to Web Pages
If sound adds pounds to a Web page, video adds tons. Even short video clips consume massive amounts of storage and bandwidth. Nevertheless, more and more sites are providing limited if not full video capabilities for their users. Movie sites provide film previews, training companies provide online walk-throughs, and news services frequently provide news clips of the top stories on their home pages. The advent of the video connection port for many of today’s new computers also means that more personal home pages will be putting up more and more videos of the family and pets.
Obviously, preparing the user for a possibly long wait is extremely important if you provide video clips. Tell the user exactly how large the file will be and how many seconds or minutes of playtime the file consumes.
|
You can provide some video, as well as audio such as RealAudio |
|
files, in a streaming format. Instead of the user having to wait |
Note |
for the entire clip to arrive in the user’s browser, the clip begins |
playing after a few seconds. As the user watches or listens to the |
|
|
clip, the rest of the clip loads in the background. |
Table 19-2 lists three common video formats you’ll run across as you create Web pages. They all play video content that includes motion and sound. As with the audio formats, your users must have the appropriate players to play these files.
Evening Saturday—IV Part
19 Session
254 |
Saturday Evening |
Fortunately, these video formats are becoming so common that most users have players installed that will take over when such a clip is loaded in the browser.
Table 19-2
Common Video Formats
Name |
Extension |
AVI |
.avi |
MPEG |
.mpg and .mpeg |
QuickTime |
.mov |
Two forms of Web page video exist. They are external video and internal video.
Specifying external video clips
An external video clip is a clip that plays, when the user selects the appropriate link, using a program that is external to the browser. For example, when an external QuickTime video clip is requested, the browser idles while the user’s QuickTime player program automatically starts and plays the video sent to it. When the user closes the player window, the Web page appears on the screen in the same state it was in before the user clicked the link, except that the link’s color will now reflect the fact that the link has been visited.
To specify an external video, simply hyperlink to the video file. The user’s browser is responsible for sending a request to the operating system to start the external player that will play the clip. Here is some HTML code that produces such a clip by inserting a link to the AVI file:
<br>
<a href=”window.avi”>This window video</a> (1.02 Meg AVI, 11 seconds)
shows the many analogies between the physical
<br>windows you open and close and your operating windows.</font>
When the user selects the clip, the user’s default player for that video format begins, as shown in Figure 19-2.
Session 19—Activating Pages with Multimedia and Rollovers |
255 |
Figure 19-2
When the user clicks the video’s hyperlink, the external player begins.
|
Many browsers will not instantly start the clip but will give the |
|
user a chance to save the clip instead of opening, or running, |
Note |
the clip. Rarely, computer viruses can reside inside multimedia |
format, although clips from known Web sites should be safe to |
|
|
load. By saving the clip, the user can better control how the |
|
clip plays. |
As with all hyperlinks, you can make an image a link as well as text. Perhaps a still image from the video would make a good hyperlink because it offers a preview of the clip the user is about to see.
Specifying internal video clips
Instead of letting an external video player begin, you can specify that the video play directly inside your Web page. Although the AVI video format is the format best supported, most of today’s browsers support the other video formats as internal video clips as well.
When you specify an internal video clip, you can control the following aspects of the video:
The location of the video play
Whether or not the video begins as soon as the page loads or only when the user clicks the Play button
Evening Saturday—IV Part
19 Session
256 |
Saturday Evening |
Whether the video repeats continuously or plays only once
The width and height of the embedded video player
The <embed> tag controls the internal playback of AVI videos. As a matter of fact, the <embed> tag is useful for embedding any file of any type in a Web page, but the file is to remain hidden unless the browser has the correct plug-in, a helper application program that can open files of that type. Most modern browsers have ample plug-in support for all the popular multimedia file types described in this session, but not all users use modern browser versions that support all these files. Therefore, use <embed> with discretion.
Note
The <object> tag is a standard that began with HTML 4 that enables you to embed a file of any type in a Web page; if the proper plug-in is available, that file will activate properly. The <embed> tag is better supported, however, by Netscape and Internet Explorer, still the two most popular browsers.
Listing 19-2 contains a simple but complete Web page that plays a video clip internally.
Listing 19-2
Embedding a video inside the Web page
<html>
<head>
<title>Mastering Windows 98</title> </head>
<body>
<h1>Windows 98 Tutorial</h1> <h2>The Start-up</h2>
<font size=3 face=”Arial”>Once you start a computer running Windows 98, the computer performs a self-test and then
<br>Windows 98 loads. Toward the end of the loading, you’ll hear the <a href=Start.wav>Windows 98
Session 19—Activating Pages with Multimedia and Rollovers |
257 |
start-up sound</a></font>. <br><br>
<h2>Familiarizing Yourself With Window Operations</h2> <font size=3 face=”Arial”>
The beauty of a windowed environment is that this environment uses familiar terminology. You open a window, <br>you close a window, you select one of the window’s
panes.
<br><br>
As you learn the process of window management, consider how you work with windows in the real world.
<br>
<center>
<!-- The video plays internally in a 300x200 window, not starting until the user clicks the play button, and repeating continuously -->
<embed src=”window.avi” width=300 height=220 autostart=true loop=true>
</center>
<br>This window video (1.02 Meg AVI, 11 seconds) shows the many analogies between the physical <br>windows you open and close and your operating
system windows.</font>
</body>
</html>
Figure 19-3 shows the Web page that results from Listing 19-2’s HTML code. If you don’t want the video to start until the user clicks the Play button, set the autostart= attribute to false. If you want the video to play only one time, set the loop= attribute to false. One final attribute, hidden=, determines whether the user sees the video or only hears the sound. Because you can embed files of any data type using <embed>, you can embed a sound file with <embed> and set the hidden= attribute to true to hide the audio player but still permit the user to hear the audio.
Evening Saturday—IV Part
19 Session
258 |
Saturday Evening |
Play Stop
Figure 19-3
The user can stop the video and replay it by clicking the appropriate control buttons.
The Rollover Effect
One of the most impressive features of any Web page is the rollover effect that causes a button or label to change when the user runs the mouse over the button. The button’s text may change color or the font may grow, but whatever happens, the rollover effect provides the user with active feedback that shows exactly what the mouse pointer is pointing to.
Rollover effects have nothing to do with typical multimedia features such as sound and graphics, although you certainly can generate a sound within a rollover effect if you want to. You achieve rollover effects by writing a mini-program using