Chapter 19. Plugins, ActiveX, and Java

CONTENTS

 

•  Extending the Browser with Plugins and ActiveX
•  Extending the Browser with Java
•  Summary

Chapters 17 and 18 showed how DHTML can be used to add complex interactivity and visual effects to web pages subject only to the limitations of the browser itself. In this and the next chapter, you'll see how you can add different kinds of media and interactivity by extending the browser's capabilities. This chapter discusses how plugins, ActiveX controls, and Java can enable you to go beyond the browser, and how Dreamweaver helps you work with all of those so-called "rich media" technologies. In particular, this chapter covers Shockwave, QuickTime, RealMedia, and Windows Media. Because of the extensive integration of Dreamweaver with Flash, Chapter 20, "Building Web Pages with Flash," covers that topic.

Extending the Browser with Plugins and ActiveX

The most common way to extend browser functionality and create media-rich pages is through plugin content. Creating web pages that rely on this kind of browser extension can be a frustrating experience even in Dreamweaver! unless you understand the limitations of the technology underneath it and how to use that technology intelligently.

How Plugin Media Works in the Browser

Browsers are essentially HTML decoders. Their job is to translate the markup instructions in an HTML file into a visible, functional screenful of information. By adding JavaScript to your HTML, you can add a certain amount of interactivity to web pages. By themselves, however, browsers cannot handle the rich variety of media you might want your pages to contain. They cannot display video, they cannot manipulate and present sound, and they cannot present PDF content. Because of browser differences, it's also difficult to reliably create complex interactive content that will work across browsers and across platforms, solely through JavaScript and HTML.

Lucky for us, browsers are extensible: They call on external entities to do what they alone cannot do. In fact, they do this frequently as you surf the web, whether you're aware of it or not.

MIME Types, Plugins, and Helper Applications

Every time a browser encounters a file, it must determine what kind of file it is and what should be done with it. Browsers do this by examining the file's MIME type. The MIME (Multipurpose Internet Mail Extension) type is part of the information the web server usually sends along with the file when a web page is downloaded to a user's computer. The MIME type includes a description of the file's category, and helps the browser determine what should be done with it.

As a backup, in case the web server does not send the MIME information with the downloaded file, the browser also examines the suffix, or filename extension, of all downloaded files. Some standard MIME types, along with their associated filename extensions, are shown in Table 19.1.

Table 19.1. Common MIME Types and Associated Filename Extensions

MIME Type	Filename Extensions
image/gif	.gif
image/jpeg	.jpg, .jpeg
audio/wav	.wav
audio/aif	.aif, .aiff
audio/x-midi	.mid, .midi
video/mov	.mov
video/avi	.avi
application/zip	.zip
application/x-macbinary	.bin
application/pdf	.pdf
application/x-shockwave-flash	.swf
application/vnd.rn-realmedia	.rm

If the MIME type or filename extension indicates that the file is something the browser can't deal with, it calls on outside help. This help is either a helper application or a plugin.

A helper application is a program that can deal with the file type in question. A helper application can be any program on your computer. Any time the browser comes across a file with an extension of .doc or a MIME type of application/doc, for instance, it will probably attempt to find and launch Microsoft Word or an equivalent word processor that has been defined as the helper application for that kind of file. Any of these programs also can be launched independently of the browser.

A plugin, like a helper application, has functionality the browser doesn't, but it is not a standalone application. Plugins cannot launch and run on their own. Instead, they add functionality to the browser. Plugins must reside in the Plugins folder, inside the browser's own application folder. The Flash, QuickTime, and Shockwave plugins, as well as the Flash and Shockwave ActiveX controls, are examples of this kind of help. When the browser comes across a file with an extension of.swf or a MIME type of application/x-shockwave-flash, it will probably look for and attempt to launch the Flash Player plugin.

Configuration and Customization

You might be wondering why the browser will probably respond in a certain way to a certain MIME type? Because each browser must be configured to interpret certain MIME types in certain ways; and any two browsers even if they're the same version of the same browser, on the same platform might be configured differently. Browsers are already configured when you install them; depending on where you got the browser (promotional or application CD, computer manufacturer install, download from Microsoft or Netscape, and so forth), it might be configured differently from other copies of the same browser obtained from somewhere else. And of course, individual browser users also can customize the configuration if they like.

Potential Configuration Problems

Web authors can't control how browsers will handle given file types; they can only try to predict how their target audience will have their browsers configured, and set pages up to deal gracefully with failure in this regard. (Authoring strategies are discussed later in this chapter.) The most common configuration problems are:

• Unavailable plugins or helpers. Just because a plugin or helper application is called for in the configuration setup doesn't mean it's available on the user's computer. This is the most common problem plaguing web designers who want a variety of plugin-based media on their pages.

• Unknown MIME types. If a file is downloaded that the browser does not recognize, either by MIME type or filename extension, the user will be asked what to do with the file.

• Unexpected or inappropriate disposition. The helper or action specified in the default configuration might not be the one that is expected; it might not even be the best choice, given the particular setup of a user's computer system.

Netscape Plugins Versus ActiveX Objects

Years ago, to enable web authors to put media content on HTML pages, Netscape developed the capability to add plugins to itself; to support plugin-based media content, Netscape created its own, nonstandard HTML tag <embed>. Although the <embed> tag was never made part of the W3 Consortium's official HTML specification, it was a big hit with users. Internet Explorer adopted the <embed> tag and the plugin system, and for several years it was the standard method used to insert media into web pages.

Meanwhile, Microsoft was developing its own set of technologies to allow applications of all kinds to share information and work together. Object Linking and Embedding (OLE) and the Component Object Model (COM) eventually developed into ActiveX technology. For web use, Microsoft built into its browser the capability to understand miniprograms called ActiveX controls, which could control and share information with ActiveX objects placed on a web page using the <object> tag. ActiveX controls can be written to work with various applications, including Internet Explorer. Microsoft's scripting language, VBScript, can be used to communicate between the ActiveX control and the browser, much as JavaScript (which was developed by Netscape) communicates between plugins and the browser.

As a result, there are two ways to insert media content into browsers: as plugin objects using <embed>, or as ActiveX objects using <object>. And there are two sets of browser technology available for interpreting that content: Netscape-style plugins and ActiveX controls. Only IE supports ActiveX; and, because ActiveX is so tied in with Microsoft's other technologies, it works only on the Windows platform. Until recently, both Netscape and IE supported Netscape-style plugins; but starting with versions 5.52-SP2, IE/Win no longer supports plugins, only ActiveX controls (though it does still support the <embed> tag for ActiveX content). Older versions of IE/Win, and all versions of IE/Mac, while they do theoretically support plugins, don't offer very good support. In Netscape, you can communicate with plugin content using JavaScript; Internet Explorer does not allow JavaScript access to plugin objects or ActiveX objects; VBScript can be used to communicate with ActiveX objects, but not with plugin objects. And because Internet Explorer/Macintosh does not support ActiveX, this severely limits what you can do to control cross-browser, cross-platform media content.

Note

It's confusing but important to remember that, although IE/Windows no longer supports Netscape-style plugins, it does support the <embed> tag. When the browser sees an <embed> tag, it first looks for an ActiveX control to handle the content. If there is no ActiveX control, older versions of the browser will look for a plugin; the newest versions will not.

As a web author, you tread daily through this minefield. Dreamweaver helps by offering support for both technologies and by taking care of as many details as it can to make your pages accessible to all.

Note

According to the World Wide Web Consortium's official HTML specification, the <object> tag is to be used for placing all media elements the browser can't normally display (including Java applets) on web pages. In practice, however, browser support for this tag is not widespread beyond Internet Explorer's ActiveX technology.

Netscape Plugins (The <embed> Tag)

In Dreamweaver, to insert media content using the <embed> tag, use the Plugin object, found in the Media category of the Insert bar. This generic object can be used with a variety of plugin and MIME types. Figure 19.1 shows the object as it appears in the Insert bar, and the Property inspector that goes with it.

Figure 19.1. The Plugin object, and its associated Property inspector.

The Property inspector for elements created with this object includes the following generic parameters, which can be used with any media content:

• src. The URL of the source file for the content. Required.

• pluginspage (Plg URL). The URL of a site where the required plugin can be downloaded. If a value is entered in this parameter, and the user's browser does not have the appropriate plugin to handle the source file, the broken plugin icon will link to this URL. Optional, but recommended.

• name. As with any HTML element, media content must be named if it will be referred to by scripts. Optional.

• width and height. Specifies the dimensions the content will take up on the page. These values default to 32x32 pixels, because Dreamweaver cannot determine the dimensions of plugin content. Required by most plugins.

• vspace and hspace. Adds white space around the content. Optional.

• align. Determines how the content will align with text when it is placed inline on a page. Optional.

• border. Adds a border around the content area. Optional.

Accessing Plugin Specific Parameters

Because the Plugin object's Property inspector must work for any type of embedded plugin content, it includes only generic attributes. Most plugins will accept more attributes than this. To add plugin specific attributes, click the Parameters button in the Property inspector, which accesses a special Parameters dialog box (see Figure 19.2). For each parameter added in this way, you must know the parameter's name and what values it will accept.

Figure 19.2. The Parameters dialog box for adding attributes not available in the Plugin or ActiveX object Property inspector.

Playing Embedded Content

Dreamweaver won't automatically display embedded media content in the Document window; instead, it shows a generic placeholder. Click the Play button in the Property inspector to see and hear the media. As long as you have the relevant plugin installed in any browser on your system, Dreamweaver will be able to preview the media. (See the sidebar on "How Dreamweaver Plays Media Content.")

How Dreamweaver Plays Media Content

Dreamweaver uses Netscape plugins to play embedded media. Every time you click the Play button to preview a media element, Dreamweaver looks for the required plugin, first in its own Configuration/Plugins folder, and then in the Plugins folders of all installed browsers. If it finds the plugin, the media will play. If not, the media won't play.

Dreamweaver/Windows users take note, however! Dreamweaver uses plugins not ActiveX controls to preview media content. If the only browser installed on your system is Internet Explorer, or if your other browser(s) have no plugins installed, you will not be able to preview embedded media from within Dreamweaver unless you do one of two things:

• Install Netscape or Opera (or any other plugin-using browser), and configure that browser with the required plugins.

• Obtain a copy of the required plugin from another computer, or from the company that has created the plugin and copy its class file (such as ShockwavePlugin.class) to your Dreamweaver/Configuration/Plugins folder.

This isn't an issue for Dreamweaver/Mac users, because all Macintosh browsers use Netscape plugins.

If the particular content you are working with has no related plugin only an ActiveX Control you won't be able to preview it in Dreamweaver no matter what you do. Windows users, preview in the browser; Mac users, you can't preview at all.

ActiveX Objects (The <object> Tag)

In Dreamweaver, to insert ActiveX content using the <object> tag, use the ActiveX object, found in the Media category of the Insert bar. Figure 19.3 shows the object as it appears in the panel, and the Property inspector that goes with it. Like the Plugin object, this is a generic object that can be used with a variety of ActiveX controls.

Figure 19.3. The Insert ActiveX object, and its associated Property inspector.

In addition to the parameters listed for plugin objects, the Property inspector for ActiveX objects includes the following:

• classid (Class ID). The name of the ActiveX control to be used to handle the content. The Shockwave, Flash, and RealMedia controls appear on the pop-up list; names of any other controls must be typed in. After a control name has been manually entered, it will appear in the pop-up list until removed (by clicking the minus (-) button next to the pop-up list).

• id. Used to refer to the object in scripting. Optional.

• codebase (Base). The URL of a site where the required control can be downloaded. If a value is entered in this parameter, and the user's browser does not have the appropriate ActiveX control to handle the source file, the control will be automatically downloaded if possible. Optional, but recommended.

• data. The URL of the source file for the content. This parameter is not required by many ActiveX controls (including Flash, Shockwave, and RealPlayer). Some controls, such as RealPlayer, require a src parameter instead. But as the Property inspector doesn't offer this as an option (except as part of the <embed> tag, discussed in the next section), src must be added using the generic Parameters dialog box.

Note

Coding note: If you examine your code after inserting an ActiveX object, you'll see that the <object> tag doesn't follow the standard HTML syntax of <tag attribute="value">. Instead, each attribute generates a nested tag with the syntax <param name="attribute" value="value">. For your web authoring purposes, the effect is the same as if these were standard attributes.

In addition to the previous options, which are added as parameters to the <object> tag, the following will create tags nested within the main <object> tag, both to be used as alternate content:

• Alt image. Specifying an image file here adds an <img> tag within the <object> tag. If the required ActiveX control is not available in a particular browser, the image specified here will display in the browser instead.

• Embed. If enabled, this adds an <embed> tag inside the <object> tag, to support Netscape on all platforms and Internet Explorer on non-Windows platforms. The src parameter listed in the Property inspector is used with this tag (not with the <object> tag).

Playing ActiveX Content

Click the Play button in the Property inspector to see and hear the media (see Figure 19.3). As long as you have the relevant plugin (not ActiveX control!) installed in any browser on your system, Dreamweaver will be able to preview the media. (For more on this, see the sidebar on "How Dreamweaver Plays Media Content.")

Note

Almost any media element can be accessed without using either <embed> or <object>, by linking directly to it. To create a link to a media file, just set up a text or image link on a page; then, in the Property inspector's Link field, browse to the media file. This is a fairly crude way to get media on your web site, however, because it gives no control over parameters or scripting.

Working with Specific Plugins

To use plugin media content effectively on your web pages, you need to familiarize yourself with the various plugins and ActiveX controls, and how each works in the browser, and in Dreamweaver.

Shockwave

Shockwave is a plugin and related file format that allows content developed with Macromedia Director to be viewed in the browser. Director has long been industry-standard software for developing interactive CD-ROMs. Director movies can contain sound, video, and animation. Director's internal scripting language, Lingo, can create sophisticated interactivity. The current version of Director (8.5) includes support for 3D content, including extensive scripting of 3D worlds. Using Director Multiuser Server software, Director movies can even be used for multiplayer games, chat rooms, and other web application tasks. Director content is sprite-based, for efficient memory use, and makes use of client-side streaming for efficient web delivery. Director is also extensible through dozens of third-party Xtras, allowing Director content to include database connectivity, PDFs, and sophisticated printing functionality.

For CD-ROM use, Director movies are saved as standalone applications called projectors. For web use, movies are saved in a special "shocked" format, with the .dcr filename extension and application/x-director MIME type. To view this content, users must have the Shockwave plugin from www.macromedia.com.

Note

To learn more about Shockwave, visit www.macromedia.com/shockzone.

Shockwave Issues

Shockwave is a cross-browser and cross-platform plugin. It is available as a Netscape plugin and an ActiveX control. Many corporate web sites use Shockwave content to provide fun, illustrative, or heavily interactive content to entice users. According to Macromedia, 167 million users worldwide have the Shockwave plugin installed.

Inserting a Shockwave Object

In Dreamweaver, inserting Shockwave content is done with the Shockwave object (shown in Figure 19.4). This object is located in the Media category of the Insert bar. The object inserts Shockwave content using the <object> tag, with an included <embed> tag.

Figure 19.4. The Shockwave object and its associated Property inspector.

Tip

If you have a site defined, you can also use the Assets panel to organize, preview and insert your Shockwave movies. Just click the Shockwave icon in the panel to view your movies. (See Chapter 22, "Local Site Management," for more on the Assets panel.

The Property inspector for Shockwave content is fairly sparse, because several basic parameters such as pluginspage and codebase are set automatically by Dreamweaver. Note that width and height are not set automatically; Dreamweaver sets these to a default of 32x32 pixels, regardless of the movie's dimensions. You must find the correct movie dimensions in Director itself, or by using trial and error in the browser. If the width and height parameters in the Property inspector are set smaller than the original movie size, the movie will be cropped; if the dimensions are set larger than the original size, empty space will be added around the edges of the movie.

Passing Parameters to Shockwave

As Table 19.2 shows, it's possible to pass all sorts of information to a Shockwave movie in the form of parameters entered in the <object> and <embed> tags, as long as the movie knows what to do with the information it's receiving. These parameters include basics such as autostart and loop, as well as a whole series of parameters that Director authors can tie into the movie's Lingo scripting. Inside Director, these parameters are accessed through the externalParamValue(), externalParamNumber(), and externalParamName() functions. The parameter defined in Dreamweaver must have exactly the same name as the parameter called in the Lingo code.

Table 19.2. Parameters a Shockwave Movie Will Accept, with a Description of Each and Suggested Values Where Applicable

Parameter Name	Value	Description
name	One-word name	Required by the <embed> tag if the movie is to referred to by scripting.
id	One-word name	Required by the <object> tag if the movie is to be referred to by scripting.
width	Number of pixels	The horizontal space the movie will be allotted on the page. Dreamweaver cannot determine this automatically. If the width assigned is different from the movie's width, the movie will be cropped or sur rounded by empty space.
height	Number of pixels	The vertical space the movie will be allotted on the page. Dreamweaver cannot deter mine this automatically. If the height assigned is different from the movie's height, the movie will be cropped or sur rounded by empty space.
align	(Choose from the pop-up menu)	Determines how the browser will align the movie when text or other page elements are placed next to it (in the same table cell or paragraph, for instance).
bgcolor	(Choose from the color picker or enter a 6-digit hexadecimal number)	If the width and height values assigned are larger than the movie's dimensions, this is the color that will fill up the rest of the allotted space.
vspace	Number of pixels	Adds empty white space above and below the movie. Specify a number of pixels.
hspace	Number of pixels	Adds empty white space to the right and left of the movie. Specify a number of pixels.
autostart	true or false	Whether the movie will start playing as soon as it loads.
loop	true or false	Whether the movie will repeat indefinitely, or play only once. This only has effect if the movie's own internal scripting doesn't have its own looping or stopping controls.
sound, progress, swLiveConnect, swRemote, swStretchStyle, swStretchHAlign, swStretchVAlign, swAudio, swBanner, swBackColor, swForeColor, swColor, swFrame, swList, swName, swPassword, swPreloadTime, swSound, swText, swURL, swVolume, swPreLoadTime, sw1, sw2, sw3, sw4, sw5, sw6, sw7, sw8, sw9	Can take any value	These parameters can be used to pass any values to a Shockwave movie. The movie's internal scripting must specifically call the parameter for it to take effect. It's up to the author whether swSound, for instance, passes any information about sound to the movie, or whether it passes completely unrelated information. Internet Explorer requires that passed parameters to Shockwave use these names and these names only. (In Netscape, any parameter name can be used, as long as the Director movie's internal scripting calls on that parameter.)

To access and assign other parameters for the Shockwave movie, click the generic Parameters button to open the parameters dialog box. From here, click the plus (+) button to get a list of potential parameters that can be set. (Figure 19.5 shows this happening.)

Figure 19.5. The Parameters dialog box for assigning Shockwave-specific parameters.

Exercise 19.1 Inserting a Shockwave Movie

In this exercise, you'll place a Shockwave movie on an HTML page and test its basic properties. Before you begin, copy the chapter_19 folder from the companion CD to your hard drive and define a Dreamweaver site named chapter_19 with this folder as its root directory. The current exercise uses files in the chapter_19/shockwave folder.

1. Open shockwave_sampler.html. This is a formatted but otherwise empty document, ready to receive media content.

2. Using the Shockwave object, place welcome.dcr onto the page.

3. Resize the movie to its correct dimensions, 640x340.

4. Click the Play button in the Property inspector to play the movie; then click the button again to stop the movie, so you can continue working on it.

   Note

   

   Windows users: Because IE uses ActiveX Controls instead of plugins, and Dreamweaver uses plugins to preview media content, Dreamweaver might not be able to play your plugin content if you only have IE installed. To solve this problem, install Netscape or install the respondent plugin from the plugin website and copy the dll file to your Macromedia/Dreamweaver MX/Configuration/Plugins folder. Alternatively, you can press the F12 button to preview the page in IE using the ActiveX control.

5. Experiment with resizing the movie and playing it. Set the movie's dimensions to smaller than they should be; then play the movie. Set the dimensions to larger than they should be; then play the movie. You'll see how the movie is either cropped or surrounded by empty white space, but its contents are never resized.

6. Examine the code. You'll see that the <object> tag has been used to place the movie, with an <embed> tag included.

7. This isn't just an ordinary Shockwave movie. This movie is programmed to expect a parameter called sw1 that specifies the name of a person to be welcomed. All you have to do in Dreamweaver is set that parameter and you can personalize the movie.

   With the movie selected, click the Parameters button to access the Parameters dialog box. When the dialog box appears, click the plus (+) button to access the pop-up list of parameters, and choose sw1.

8. For the value of the parameter, enter your name. Click OK to apply the SWI parameter, and click OK agian to close the Parameters dialog box.

9. Try the movie out in a browser. Does the name you entered come up in the welcome banner? It should. (If it doesn't, double-check that you used the sw1 parameter in your code.) What's the benefit of this? Imagine how easy it can be to quickly customize Shockwave presentations on a web site, without having to generate new Shockwave movies. Movies can be multipurposed so that the same movie, downloaded once, can serve in several places on the web site.

QuickTime

Don't be fooled. Just because QuickTime is made by Apple doesn't mean it's only for Macs. QuickTime is a cross-platform, system-level extension and browser plugin that provides synchronized media and interactivity similar to that found in Shockwave and Flash. QuickTime movies are made of synchronized tracks video tracks, sound tracks, music tracks, sprite tracks (for interactive and animated elements), 3D tracks (for 3D modeling), VR (virtual reality) tracks, text tracks, even Flash tracks, each of which can contain an entire Flash movie, interactivity and all. QuickTime 4+ movies automatically use client-side streaming (called FastStart). When used with special QuickTime server software, they also can use true server-side streaming. QuickTime movie files use the.mov filename extension.

All professional-level audio, video, and animation software is capable of creating QuickTime content. QuickTime authoring programs include Electrifier Pro (Mac only), LiveStage (Mac/PC) and Adobe GoLive (Mac/PC), which includes a pretty nifty little QuickTime authoring miniprogram inside the web editor. Limited authoring capabilities are also built in to Apple's QuickTime Pro utility. Flash also can export interactive presentations as QuickTime movies. Various free utilities for working with QuickTime are available at http://developer.apple.com/quicktime/quicktimeintro/tools/.

Note

To learn more about QuickTime, visit www.apple.com/quicktime. For more on the new QuickTime ActiveX control, visit www.apple.com/quicktime/download/qtcheck and www.apple.com/quicktime/products/tutorials/activex.html.

QuickTime Issues

The QuickTime plugin has long been considered a staple of web multimedia, ubiquitous and reliable on both Windows and Mac platforms, in both major browsers. According to a recent Apple announcement, 100 million copies of the QuickTime player and browser plugin have been distributed and installed worldwide. QuickTime has long been available as a plugin; recently, in response to Microsoft's decision not to support plugins for IE/Windows, Apple has released QuickTime as an ActiveX control as well.

Inserting a QuickTime Object

In Dreamweaver, you can insert QuickTime content using the Plugin or ActiveX object. For best compatibility with the newest versions of Internet Explorer, it's best to use ActiveX though, at the time of this writing, the QuickTime plugin is more responsive than its (brand-new) ActiveX cousin. Whichever method you use, the Property inspector will be generic, with no QuickTime-specific options. As with Shockwave, width and height are always set to a default value of 32x32 pixels. If the dimensions are set smaller than the original movie size, the movie will be cropped; if the dimensions are set larger than the original size, empty space will be added around the edges of the movie.

Passing Parameters to QuickTime

QuickTime movies accept a wide variety of parameters. As with other media types, use the Parameters dialog box, accessible by clicking the Property inspector's Parameters button, to assign these attributes. Table 19.3 shows a list of some useful parameters that QuickTime movies can accept. (This list is not exhaustive.)

Table 19.3. Some Useful Parameters That Can Be Used with QuickTime Content

Parameter	Value	Description
autostart	true or false	Whether the movie will start playing as soon as it loads.
loop	true or false	Whether the movie will repeat indefinitely, or play only once.
controller	true, false, qtvr	Whether a controller bar will appear at the bottom of the movie, and what kind of controller bar it will be. Use the qtvr controller for QuickTime virtual reality movies. (If the controller is visible, set the height parameter to the movie's height plus 16 pixels. Otherwise, the controller will be cropped.)
scale	Aspect, ToFit, or a number	This determines whether the movie will appear at its original size, or enlarged or reduced. ToFit will scale the movie to match the width and height parameters; Aspect will do the same, but without distorting its aspect ratio. A scale value of larger than 1 will enlarge the movie; smaller than 1 will reduce the size.
bgcolor	Color	If the width and height values assigned are larger than the movie's dimensions, this color will fill up the rest of the allotted space.
volume	0 100	Determines the volume of any audio in the movie.
kioskmode	true or false	If true, doesn't allow the user to save a copy of the movie.
starttime	Time, using format 00:00:00:00	Determines at what point in the movie it should start playing.
endtime	(Same as above)	Determines at what point in the movie it should stop playing.
href	Absolute or relative URL	If this parameter is present, clicking anywhere on the movie will launch the specified URL.
qtnextn	Absolute or relative URL	Specifies a movie to play after the current movie is finished. The name of the parameter must end in an integer (represented by n in the column to the left). Like this: qtnext1, qtnext2, and so forth. Multiple qtnext parameters can be used to play a series of movies.
target	myself or the name of a window or frame	If you're loading a new QT movie with the href or qtnextn, use myself to load it into the same place as the original.

Exercise 19.2 Adding a QuickTime Movie to a Document, and Setting its Parameters

In this exercise, you'll insert a QuickTime movie into a page using <object>, and experiment to see how you can customize it with parameters. All files for this exercise can be found in the chapter_19/quicktime folder.

1. Open quicktime_parameters.html.

2. Insert a generic ActiveX object. In the Property inspector, set the basic <object> parameters as follows:

   classid (Class ID) = clsid:02BF25D5-8C17-4B23-BC80-D34888ABDDC6B

   width = 250

   height = 345

   codebase (Base) = http://www.apple.com/qtactivex/qtplugin.cab

   (The true height of the movie is 329 pixels, but you're adding 16 pixels for the controller bar that will appear at the bottom of the movie onscreen.)

   Note

   

   The first time you place a QuickTime movie in a document using the ActiveX object, you'll have to type in the classid yourself, as it doesn't appear in the ClassID pop-up menu. You only have to do it once, though. After that, Dreamweaver will remember what you typed, and you can simply choose it from the pop-up menu.

3. Still in the Property inspector, select the <embed> option, and set its src to bird.mov. (This is the first time you've specified which movie you intend to play.)

4. Click the Parameters button to access the Parameters dialog box. Experiment with the different parameters listed in Table 19.3 to see how they work. In particular, try setting the following:

   • controller = false Preview the movie and you'll see that, without the controller bar, there's no way to start or stop the movie. (You'll also have an extra 16 pixels in the movie's height setting.)

   • loop = true

   • autoplay = false You'll certainly need the controller back on for this one. Otherwise, there's no way to start the movie playing!

   • scale = ToFit After you've set this parameter, change the movie's width and height so it's really short and squatty. You'll see how the movie resizes to fill the space, even if it means distorting the picture.

   • scale = Aspect and bgcolor = #FF0000 Leave the movie short and squatty, and preview again. The movie won't be distorted anymore, and you'll see the red background color filling in part of your page.

   • href = http://www.newriders.com After this parameter has been set, clicking the movie in the browser should connect you to the New Riders home page.

   • href = flowers.mov and target = myself As long as the flowers.mov file from the CD-ROM is in the same folder as bird.mov, clicking the movie should replace the first movie with the new movie. (Also see what happens if you remove the target attribute.)

   • pluginspage = http://www.apple.com/quicktime/download. As discussed above, this is an important parameter for users relying on plugins and not ActiveX controls. Within the ActiveX Property inspector, it must be set using the Parameters dialog box.

   Figure 19.6 shows the Parameters dialog box with some of these values in place. For each attribute set, preview in a browser to see the effect on the movie presentation.

   Figure 19.6. The generic Parameters dialog box showing various optional QT parameters, as used in quicktime_sampler.html.

   

5. After you've set several parameters, examine your code. You'll see that Dreamweaver has added each of the parameters to both the <object> and the <embed> tag, using the syntax appropriate to each.

Dreamweaver has even added the pluginspage attribute to both tags, though it is only meaningful for the <embed> tag. If you like your code mean and lean, you can delete the <object> pluginspage parameter tag but it isn't hurting anything by being there, and if you delete it, Dreamweaver won't recognize this parameter or show it in the Parameters dialog box.

RealMedia

RealNetworks has long been at the forefront of server-based streaming media delivery for the web. The various components of its RealSystem RealAudio, RealVideo, RealPix, RealText, RealFlash enable web authors to place a variety of streaming media content on web pages. Different RealMedia elements can even be combined into multimedia presentations using an offshoot of XML called SMIL (Synchronized Media Integration Language). Table 19.4 shows the various RealSystem MIME types and their associated filename extensions.

Table 19.4. Commonly Used MIME Types and Filename Extensions for RealSystem Media Files

Description	MIME Type	Filename Extensions
RealAudio	audio/x-realaudio	.ra
RealAudio	audio/vnd.rn-realaudio	.ra
RealVideo	video/vnd.rn-realvideo	.rv
RealPix	image/vnd.rn-realpix	.rp
RealText	text/vnd.rn-realtext	.rt
RealG2 with Flash	image/vnd.rn-realflash	.rf
SMIL document	application/smil	.smi, .smil
Ram	audio/x-pn-realaudio	.ram
Embedded Ram	audio/x-pn-realduio-plugin	.rpm

RealAudio and RealVideo files can be created in many professional video and audio programs. RealPix files (which present and coordinate series of still images) can be created using any text editor; the images themselves are standard JPEG, GIF, or PNG files that have been prepared for streaming delivery with JPEGTRAN, a free utility available from RealNetworks. RealText files (used for displaying and animating text) and SMIL files also can be created in any text editor. RealNetworks also has a variety of content-creation software available RealProducer, RealPresenter, RealSlideShow. Some of these programs even come in free, basic versions; and many are available cross-platform.

Note

To learn more about RealMedia, visit the RealNetworks web site at www.realnetworks.com.

Note

SMIL is not part of the RealSystem technology; it's just a markup language, derived from XML. SMIL files also can be read by the QuickTime player and browser plugin, and by Windows Media Player. To learn more about SMIL, visit the W3C web site at www.w3c.org/AudioVideo/. For a full discussion of XML, see Chapter 32, "Technical Issues."

RealMedia Issues

The RealSystem technologies are compatible across platforms and browsers. Although it is fairly common for RealMedia clips to open in RealPlayer, it is also possible to embed them in web pages. A RealG2 plugin and a RealG2 ActiveX control are both available, for best results in both browsers. According to RealNetworks, more than 170 million users worldwide have RealPlayer and its associated browser utilities installed.

To take advantage of streaming delivery, the RealMedia content must reside on a web server with RealServer software. Browsers use the RealPlayer application and the RealG2 plugin and ActiveX control to handle these media types.

Because of how RealMedia files are set up to work on the server, they require a special metafile called a RAM file (filename extension.ram or.rpm) to work properly. For delivery from a standard web server, the RAM file must be a text file containing the absolute path name of the RealMedia content. For delivery from a RealServer, RAM files can be dynamically generated by the RAMGEN utility; links to RealMedia files housed on RealServers with RAMGEN must use a special addressing scheme that includes a ramgen parameter.

Note

Why use metafiles? This enables server-side streaming to work. The browser downloads the tiny metafile, which in turn activates the media files on the server and starts their delivery. Because of this, the media itself needn't be downloaded.

Inserting RealSystems Media Objects

In Dreamweaver, you can insert any RealMedia content using either the generic Plugin or ActiveX object, though the latter method is best for cross-browser compatibility. The steps for insertion are as follows:

1. Create the media to insert. (See Table 19.4 for acceptable RealMedia file formats.)

2. Unless the media will be streamed from a RealServer, create the RAM file. (See the next section for more on this.)

3. In Dreamweaver, use the Plugin or ActiveX object to embed the RAM file in your document. (If you use the ActiveX object, be sure to choose the RealMedia classid from the Property inspector.)

Passing Parameters to RealMedia

RealMedia presentations accept a variety of parameters, controlling how the media will behave and appear in a web page (see Table 19.5). In particular, the many possibilities for the controls attribute provide a great deal of choice over the control interface itself (see Table 19.6). Because different control setups are different sizes, use the recommended width and height values shown here for each setting.

Table 19.5. Parameters Accepted by RealPlayer, the RealG2 Plugin, and ActiveX Control

Parameter	Value	Default	Description
src	URL	[required parameter]	Specifies a source clip. (Note that, in Dreamweaver, this required parameter must be entered via the generic Parameters dialog box.)
width	Number	[required parameter]	Sets the window or control width, in percent or pixels.
height	Number	[required parameter]	Sets the window or control height, in percent or pixels.
maintain aspect	true or false		Preserves the image's aspect ratio if the width and height don't match the original size.
autostart	true or false	False	Determines whether the clip starts playing as soon as the page loads.
background-color	Color or RGB hex value		Sets the background color for the name or clip.
loop	true or false		Determines whether the clip loops indefinitely, or plays only once.
numloop	Number		Loops the clip a given number of times.
center	true or false		Centers the clip in the window.
console	Name, _master, or _unique		Links multiple controls.
controls	Control name (See the Table 19.6 for a list of possible values.)	All	Adds RealPlayer controls to the Web page.
nojava	true or false	False	Prevents the Java virtual machine from starting as the movie loads. (Java is only needed if JavaScript will be used to control the clip.)
region	SMIL region		Ties a clip to an existing SMIL region.
shuffle	true or false False		Randomizes playback.
nolabels	true or false False		Suppresses presentation information.
nologo	true or false False		Suppresses the RealLogo.

Table 19.6. Possible Values for the controls Parameter, for RealSystem Media Clips

Value	Suggested size	Description
all, or default	375x100	Displays all controls
imagewindow	176x132 or more	Displays the image window, for video and animation
controlpanel	350x36	Play, pause, stop, fast forward and rewind, position slider, volume slider, mute button
playbutton	44x26	Play/pause button
playonlybutton	26x26	Play button
pausebutton	26x26	Pause button
stopbutton	26x26	Stop button
FFCtrl	26x26	Fast forward control
RWCtrl	26x26	Rewind control
MuteCtrl	26x26	Mute button
MuteVolume	26x88	Mute button and volume slider
VolumeSlider	26x65	Volume slider
PositionSlider	120x26	Clip position slider
TACCtrl	370x32	Clip info field
HomeCtrl	45x25	The Real logo
InfoVolumePanel	325x55	Presentation information, along with volume slider and mute button
InfoPanel	300x55	Presentation information panel
StatusBar	300x50	Status panel (shows informational messages), plus network congestion LED and position field
StatusField	200x30	Status panel only
PositionField	90x30	Clips current place in the presentation timeline, and total clip length

Exercise 19.3 Inserting a RealAudio Sound Using <embed>

When working with RealMedia, procedures vary slightly depending on whether you're accessing the media file locally (that is, from your computer, for development purposes), from a regular web server, or from a RealServer for streaming access.

For this exercise, you develop your web page assuming that the RealAudio clip will be housed locally. Then you adjust the code for upload and delivery on a standard web server. Finally, you'll see how to adjust for upload onto a RealServer. All files used here can be found on the CD, in the chapter_19 folder. Copy that folder to your hard drive, if you haven't done so already. The files for this exercise are in the chapter_19/realmedia folder.

1. The audio file being used in the exercise is handel.rm. If you have RealPlayer on your system, you can launch the sound file directly in that program to test it out. (Double-clicking the file from the Finder or Explorer should launch RealPlayer.)

2. All RealMedia files need a RAM file for proper delivery in the browser. Because you're starting out by accessing the file locally, you need to create a RAM file that points to where the audio file is locally stored. You can create the RAM file in any text editor, or in Dreamweaver Code view.

3. In Dreamweaver or your text editor, create a new file to serve as the RAM file. (To create a completely empty file in Dreamweaver, go to File > New and, from the New Document dialog box, choose Script Files/Text File.) Save it in the chapter_19/realmedia folder as handel.rpm (note the filename extension).

   Note

   

   Use RAM files with the.rpm extension to play media in the browser window. Use the.ram extension to play media in the RealPlayer window.

4. In this file, enter the protocol file://, followed by the absolute or relative URL of the handel.rm audio file. The code in the RAM file should look like this: file://handel.rm

   When you're done, save the file and close it.

5. Now it's time to set up the HTML page that will contain the audio clip. From your exercise files, open realaudio_sampler.html.

6. Insert an ActiveX object into the document. For the classid parameter, choose the RealG2 ActiveX control from the pop-up menu. For codebase, enter http://www.realnetworks.com. Set the width and height to 350x100. (These values represent the dimensions of the default RealG2 sound control panel, which visitors can use to access your audio clip.)

   Use the Parameters button and generic Parameters dialog box to add a src parameter to the <object> tag with a value of handel.rpm (the RAM file).

   For cross-browser compatibility, make sure Include Embed is selected and the src parameter to choose the file to insert (handel.rpm).

   Note

   

   Why specify the src twice? The src field listed in the Property inspector adds a src parameter to the <embed> tag. But the <object> tag also needs a src specified. But as there is no place in the Property inspector to add this parameter, it must be added using the generic Parameters dialog box.

   Note

   

   RealPlayer should come up as an option in the ClassID pop-up menu. If it's not on that list, you'll have to type it in manually. The listing should look like this: clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA

7. Try the page out in a browser! Assuming you've got RealPlayer and its plugins, your browser page should look like the one shown in Figure 19.7. Because you didn't set an autostart parameter, and this parameter defaults to false for this plugin, you'll have to click the Play button in the control panel to get the music to play.

   Figure 19.7. The realaudio_sampler.html file as it appears in the browser, with the default control panel showing at its recommended size.

   

8. After the page has been developed, and you're ready to share it with the world, it's time to prepare the file for upload to a web server.

9. To prepare for upload to a standard (nonstreaming) server, open the RAM file in your text editor or Dreamweaver Code view. Instead of the file protocol and relative URL, type in an absolute web address, such as the following: http://www.webdomain.com/media/handel.rm

   If you want to try this out, you can enter a real address here, and upload the HTML file, RAM file, and music file onto a web server and try to access it.

To prepare for upload to a RealServer, the process differs slightly. Again, if you don't actually have access to a RealServer account, you won't be able to test this out. But here's the procedure:

1. Forget the RAM file; it's no longer necessary.

2. Open the HTML file and select the plugin content placeholder, to access the Property inspector. For the src parameter, you need to enter an address something like this:

http://realserver.company.com:8080/ramgen/media/handel.rm?embed

You can discuss the details of exactly how this URL should appear with your RealServer administrator.

Note

If you're going to be working a lot with RealMedia, you might want to extend your copy of Dreamweaver by installing the RealG2 custom objects, available free from the Macromedia Exchange.

Windows Media

Windows Media is the Microsoft answer to QuickTime and RealMedia. It's a comprehensive platform for delivering audiovisual media, including streaming delivery and the capability to combine different media types in complex presentations. As a Microsoft product, Windows Media is closely integrated with both the Windows operating system and Internet Explorer, and only reaches its full potential in this all-Microsoft environment. Table 19.7 lists the major Windows Media filename extensions. Note that, in addition to its own proprietary formats, WMP/Windows also supports a number of generic audio and video file formats.

Table 19.7. File Formats for Use with Windows Media Player

Description	Filename Extensions	Platform
Windows Media (audio)	.wma	Windows, Mac
Windows Media (video)	.wmv	Windows, Mac
Windows Media metafile (for use with audio files)	.wax	Windows, Mac
Windows Media metafile (for use with video files)	.wvx	Windows, Mac
Windows Media metafile (old)	.asf	Windows, Mac
Windows audio	.wav	Windows
Windows video	.avi	Windows
MP3 audio	.mp3	Windows
MPEG video	.mpg	Windows
Windows still image	.bmp	Windows

Microsoft offers a number of free software utilities for creating and working with Windows Media, including the Windows Media Encoder and Windows Media Resource Kit. (All are available for Windows only.) PowerPoint 2002 presentations also can be exported to a format readable by the Windows Media Player.

Note

To learn more about Windows Media, visit www.microsoft.com/windows/windowsmedia.

Windows Media Issues

Windows Media Player is shipped as part of the Windows operating system, giving it a very wide user base. The player exists as an ActiveX control, with a powerful set of parameters and scripting controls available to it but only for those browsing with IE/Windows. The player is available as a (much less powerful) plugin, for Netscape and Macintosh users. But its true glory is in its close relationship with Internet Explorer and the Windows operating system.

Like RealMedia, Windows Media can be streamed from special servers, or played without server-side streaming from standard web servers. Also like RealMedia, Windows Media utilizes metafiles containing pointers to media files. It's the metafile, and not the media file itself, that gets embedded into the web page. Windows Media metafiles are written in an XML-derived markup language, and have the.wvx (video) or.wax (audio) filename extension. The file must contain an absolute or relative path name to the media file. The syntax looks like this:

<ASX version="3.0">    <entry>      <ref href="http://www.mydomain.com/mediafiles/myAudio.wma"/>    </entry>  </ASX>

Inserting Windows Media Objects

Because the Windows Media Player is an ActiveX control, you insert Windows Media content with the Dreamweaver ActiveX object. The steps are as follows:

1. Create the media content. (See Table 19.7 for a list of supported file formats.)

2. Create the metafile, using the preceding syntax.

3. With the Dreamweaver ActiveX object, embed the metafile in the document. Because the classid for Windows Media is not in the Dreamweaver pop-up list, in the Property inspector, you have to enter the following ClassID manually: 6BF52A52-394A-11d3-B153-00C04F79FAA6

(You should only have to do this the first time you embed Windows Media content after that, the information will be part of the pop-up list.)

Passing Parameters to Windows Media Objects

Table 19.8 lists the parameters accepted by the Windows Media ActiveX control. With these parameters, you can determine how your media object will look and behave on the web page. Most must be added using the Dreamweaver generic Parameters dialog box.

Table 19.8. Some Useful Parameters Accepted by Windows Media Player 7. (This List Is Not Exhaustive.)

Parameter Name	Value	Description
url	URL	For proper streaming, specify the pathname of the metafile, not the media itself. (Dreamweaver note: If you check the Include Embed option in the Property inspector, and specify a src for that tag, this parameter will be entered automatically for you. If not, you must enter it manually, using the generic parameters dialog box.)
width	Number of pixels	The horizontal space the media and its controller will be allotted on the page.
height	Number of pixels	The vertical space the media and its controller will be allotted on the page. (The controller itself is 40 pixels high; the information bar above that is 20 pixels high. Values are calculated from bottom to top, so assign a height of 40 to present only a controller bar.)
uimode	Full, mini, or none	How the controller bar appears. (To create invisible media, choose none and set the width and height to 0.)
autoStart	true or false	Whether the media will begin playing automatically as soon as the page loads.
playCount	Number of loops	How many times the media will play (for example, looping).
currentPosition	Number of seconds	Where in the media's timeline it begins to play, measured in seconds from the beginning.
currentMarker	Marker number	Where in the media's timeline it begins to play, based on markers inserted into the media. (Use the Windows Media ASF Indexer utility to embed markers.)
volume	0 to 100	How loud audio content will play.
balance	-100 to 100	Whether audio content will play from the left speaker (-100), the right speaker (100) or some combination of both. A value of 0 plays from both speakers equally.
mute	true or false	Whether audio content will play or be muted.

Exercise 19.4 Inserting Windows Media Objects

In this exercise, you'll insert two Windows Media files into an HTML page one containing audio and video, and one containing only audio. All exercise files are in the chapter_19/windowsmedia folder.

1. As you did with RealMedia, you start by locating the media and creating metafiles that point to it. The audio file is called jazz.wma. The video file is aspirations.wmv.

2. You can create the metafiles in a text editor, or in Dreamweaver Code view. (If you want to work in Dreamweaver, see the previous Note, in the RealMedia section, on changing the program preferences to recognize new filename extensions. The extensions you'll need to add are.wax and.wvx.) For the audio file, create a text file and save it as jazz.wax. Enter the following code:

   <ASX version="3.0">    <entry>      <ref href="jazz.wma"/>    </entry>  </ASX>

   For the video file, create another text file and save it as aspirations.wvx. Enter the following code:

   <ASX version="3.0">    <entry>      <ref href="aspirations.wmv"/>    </entry>  </ASX>

   Note that for the preceding code to work properly, the metafiles and the media files must be stored in the same folder. If you have them stored differently, you'll have to adjust the relative URL accordingly. (Note also that unlike RealMedia RAM files, there's no file:// protocol at the beginning of the path name.)

3. Now you can insert the metafiles into your document. From your exercise files, open windowsmedia_sampler.html.

4. Using the ActiveX object, insert a new media element onto the page. In the Property inspector, set the width and height to 320x240. Set the classid as follows:

   6BF52A52-394A-11d3-B153-00C04F79FAA6

   Make sure the Include Embed option is selected, and set the src to jazz.wax. When this is done, you can try out your file in the browser. The audio track should play and the Windows Media controller should appear (see Figure 19.8).

   Figure 19.8. The windowsmedia_sampler.html exercise file with audio file in place, as it appears in the browser.

   

5. Now you add the video. Back in Dreamweaver, with the same exercise file open, add a paragraph break after the first media object and insert another ActiveX object. Set the width and height to 320x240. Turn on Include Embed and set the src to aspirations.wvx.

   Later in this chapter, you will learn about passing parameters to Windows Media and revisit this cacophonous document.

6. If you try your file out in the browser now, you're in for an overwhelming experience as both files start to play at once. Using the Property inspector's Parameters button and generic Parameters dialog box, assign each media element an autoStart parameter set to false .

7. Now you adjust how the controls look. This is done with the uimode parameter and the width and height.

   • For the video file. The video doesn't quite fit in the 320x240 box you created for it. Set the height to 300 pixels that adds 40 pixels for the controller, and 20 pixels for the information bar. Now when you play the file in a browser, the movie should fit nicely into its box.

   • For the audio file. You want your sound to show on the page only as a simple controller, taking up a minimum of space. To start, add a uimode parameter set to mini. This simplifies the control but doesn't remove the swirling picture above it. To get rid of this, change the height to 40 because the height is calculated from the bottom of the box, this value will truncate the display at the top edge of the controller. Figure 19.9 shows this.

     Figure 19.9. The windowsmedia_sampler.html file, as it appears in the browser when all parameters have been set.

     

8. Now make the sound loop. To set looping, decide how many times you want the sound to play and set the playCount parameter to that number. (You'll have noticed that there is no looping parameter.) You might have to change the autoStart=false parameter to autostart=true , before the looping will work.

9. Experiment with the other parameters as you like, to see what each can do. As you're experimenting, don't forget to browse in Netscape as well as Internet Explorer (to see how your media fares). If you have access to different computers and platforms, try the files on those systems as well.

Adding Sound to Web Pages

Adding sound to a web page can be one of the most challenging, and confusing, of media-related tasks. It's not that hard to get browsers to make sounds just about any computer with a sound card in it will have some sort of sound-capable plugin for the browser. What's hard is deciding how best to get predictable, desirable results out of your sounds.

Targeted Versus Untargeted Media Placement

You can choose from a number of sound file formats when adding sound to a web page, each with its own strengths and weaknesses. A number of plugin/ActiveX technologies are also available to handle sounds. Some formats, such as RM files for RealAudio, are proprietary only one plugin can handle them. Others, such as AIF and WAV, are supported by a variety of plugins. The first choice you'll have to make when determining how to add sound to a page is whether to target a specific plugin and risk losing audience members by using a proprietary format or to avoid targeting but give up predictability by using a more generic format.

Table 19.9 shows the main sound file formats currently in use on the web, along with their supporting plugins. Each different plugin presents the user with a different control panel for handling sounds; each accepts different parameters.

Table 19.9. Specifications of the Major Sound File Formats Available for Web Use

Filename Extension	Description
.wav	The native format for Windows audio files. Understood widely, offers fairly good compression-to-sound quality.
.aif	The native format for Macintosh audio files. Understood widely, offers fairly good compression-to-sound quality.
.mp3	The latest and greatest file format, not supported by many older plugins but quickly becoming a standard. Offers very good compression-to-sound quality.
.au	The native format for Unix audio files. Understood widely (and the only format available for use in Java), but offering poor compression-to-sound quality.
.mid, .midi	File format for synthesized (i.e., computer-generated, instead of digitally recorded) sounds. Understood widely, and offers extremely small file sizes. Files contain instructions for playing sounds, which are then implemented by software-based musical instruments within the computer itself.

Working with Untargeted Media

For maximum audience coverage, most web authors don't target specific plugins when adding sound to a page. What are the ramifications of this?

ActiveX or Plugin?

When you place media with the ActiveX object, you must specify a classid (and thus a target ActiveX control). If you want your sound to be untargeted to play in whatever plugin or helper application is available on each user's browser you need to use the Plugin object. (Remember, the Plugin object inserts content using the <embed> tag, and IE/Windows still recognizes this tag, as long as the user has an ActiveX control of some kind to play the sound.)

Dealing with Controllers

The controller is the visual representation of an embedded sound clip in a web page. It lets the visitor know that a music clip or other sound is present, and lets him control its playing. When you design a page with embedded sound, therefore, you need to leave room for this element in the page layout. But how can you do this wisely, when you don't know which plugin will be handling the sound, and so don't know what size the controller will be? Any page that includes an untargeted sound must be able to accommodate any of them. Follow these two rules:

• vThink big As a general rule, it's better to allow too much space rather than not enough. Small controls, such as the QuickTime controller, can easily float in a large space; but large controls, such as the WinAmp control panel, don't fare too well when squeezed into a small space. Good default width and height settings are 144x60. These are the dimensions for the Netscape LiveAudio plugin and are large enough to accommodate other controls fairly comfortably.

• Use background color. Most plugins will accept some sort of parameter specifying a background color. This is the color that will appear surrounding the controller (if it's placed in a too large space). Use this parameter to ensure that any extra space matches the background color of the surrounding page or page elements, so it doesn't look so obviously like a small fish in a large pond.

Overloading the Parameters

Different plugins accept different parameters. You therefore need to be smart about assigning your parameters. You need to know which parameters are more widely supported than others. You also can double up on, or "overload," the parameters setting multiple parameters to handle the same sound attribute, to make sure you're covering all of your bases. Table 19.10 lists various useful sound-related parameters, along with strategies for their use in multiple plugin situations.

Table 19.10. Some Standard Parameters for Controlling Audio Files

Parameter Name	Value	Description
src	URL	Name of the sound file to play.
width	Number of pixels	The horizontal space the media controller will be allotted on the page. (Controllers will be resized, if possible, to fit the specified width.)
height	Number of pixels	The vertical space the media controller will be allotted on the page. (Controllers will be resized, if possible, to fit the specified width.)
bgcolor	Color	If the width and height values assigned are larger than the controller's dimensions, this color that will fill up the rest of the allotted space.
hidden	true or false	Whether the controller should be visible on the page. (Warning: Some browsers won't play a hidden sound.)
autostart, autoplay	true or false	Whether the audio will begin playing automatically as soon as the page loads. Some plugins require autostart, some require autoplay. Use both to be safe.
loop	true or false	Whether the audio will play once, or loop indefinitely. (Some, but not all, plugins will accept a numeric value here.)
volume	0 to 100	How loud the audio will play. Not all plugins recognize this value.

Exercise 19.5 Creating a Sound Sampler Page

In this exercise, you add several sound files, in various formats, to a web page, to get some practice working with nontargeted sounds. To get maximum benefit from the exercise, after you have finished creating the sampler file, try viewing it from as many different computers, and browsers, as you can. All files for the exercise can be found in the chapter_19/audio folder.

1. To begin the exercise, open sound_sampler.html. This file contains a page layout ready to hold different sounds and their controllers.

2. With the file open, use the Dreamweaver generic Plugin object to insert a sound clip into each of the slots in the layout. (Figure 19.10 shows the page layout with audio objects in place the controllers shown are QuickTime, RealMedia, and Windows Media Player.) Use the sound files in the folder provided with the exercise files. Try one each of the various different file formats, to see how browsers handle the file types. Use the small slots in the layout to notate which file types are being placed so that you can better analyze the results later.

   Figure 19.10. The sound_sampler.html page layout, with audio objects and descriptive text in place.

   

3. For each sound clip placed, set whatever parameters you like. (Use Table 19.10 as a guide.) In Figure 19.10, note that one of the two samples showing the QuickTime controller has been assigned a bgcolor matching the page background; doesn't that look nicer than that ugly white box in the other sample?

4. After you have constructed your sampler file, try it out in the browser. Better yet, try it out in multiple browsers. If you have access to different computers, and different operating systems, try it out there as well. Pay attention to all the different results you get. Try to tweak the parameters to get the best results you can, in all the different plugin/browser/platform situations. When you're done, you can save the file as a reference for future sound use.

Scripting Plugin Media

Sometimes it's not enough to put media on your pages. Sometimes you want your media to be controllable. You want it to interact with other page elements; you want to replace the standard controller bars and other visual elements with your own tasteful buttons and bows. In other words, you want to script it. Can you script media elements? Yes and no. Most plugins accept a variety of commands. Dreamweaver even has a few built-in behaviors to help you implement those commands. However, they might not always work the way you want them to.

How Media Scripting Works And Why It Doesn't Always Work

To understand how scripting of media elements works and doesn't work in browsers, you need to revisit the browser wars. As you learned in Chapter 16, "Getting Interactive with Behaviors," JavaScript is the main language used for client-side scripting in the browser. But JavaScript, like the <embed> tag, was originally created by Netscape for use with that browser. In Netscape, it's possible to use JavaScript to pass commands to any plugin media element that has been inserted using the <embed> tag.

Microsoft not only has its own browser and its own plugin technology (ActiveX), it also has its own scripting languages, VBScript and JScript. Media placed on a page using the <object> tag, and controlled by an ActiveX control, can receive commands using these languages but not JavaScript.

To further complicate matters, Internet Explorer does not allow any scripting control of standard plugin content placed using <embed>. What does this mean?

• Internet Explorer. It's impossible to send any scripting commands to media such as QuickTime that has no ActiveX control.

• Internet Explorer/Mac. It's impossible to send scripting commands to any plugin media, because ActiveX and its related technologies don't function outside the Windows operating system.

• Netscape. It's impossible to take advantage of the powerful scripting possibilities offered by many ActiveX controls.

The good news is you're not going crazy when you notice that your media scripting works only in some of the browsers, some of the time. The bad news is there's not much to be done about it. If your web pages are aimed at a target audience using one browser or one platform, your media-controlling horizons are broader than if you're trying to target the general populace in all its diversity.

Controlling Specific Plugins

Each plugin or ActiveX control offers its own set of scripting commands it can accept (to control its media). Sometimes, as with JavaScripting for QuickTime or JScript controls for Windows Media, these commands are extensive and powerful. For more information on this, check the web sites listed earlier for each technology.

Controlling Audio: The Play Sound Behavior

The Dreamweaver Play Sound behavior is an excellent example of the perils and pitfalls of scripted media control. It seems simple create a button or text link, apply the behavior, choose a sound file to play, and whenever the user clicks the button the sound should play. The only problem is, because of the problems outlined earlier, it works in some browsers and in others it doesn't.

Strategies for Controlling Media

If you can't rely on scripting to control media elements, what else can you do? Here are a few suggestions.

Put the Scripting in the Media Itself

If you really want reliable, controllable media, the simplest answer is to avoid browser scripting entirely. Flash, Shockwave, QuickTime movies, RealPlayer SMIL files all of these offer internal scripting. If you want buttons that make "click" sounds when you click them, make them in Flash. (See the next chapter for more on this!) If you want music with a cool-looking control panel, put the sound and the controls into a Flash, Shockwave, QuickTime, or RealPlayer movie and insert the whole thing into your web page. If you want controllable video files, build the controls into a QuickTime file or put the QuickTime video into Shockwave.

The chapter_19/scripted_media folder contains several sample files that use their own internal scripting to create interactivity: flash_sound.swf, a Flash-based sound control panel; qt_sound.mov, a QuickTime sound control panel; and click_button.swf, a Flash button complete with sound effects. Check these files out and see how they work in a web page. (Inserting Flash media is covered in full in the next chapter.)

Be Sneaky with Frames

Start thinking outside the box or inside the frame, anyway. If you're willing to use frames in your web site, you can do some lovely things to integrate media files into pages without running into any scripting nightmares. It works like this: Suppose you want to put a variety of music samples on a web page, controllable from a custom interface you've created (say, in Fireworks). You know you can't reliably use JavaScript to control sounds on a page. But you also know that an autoplaying, looping sound will play only as long as the file containing it is loaded in the browser window. What if you control the sound by loading and unloading different pages? Look in the chapter_19/media_frames folder for sound_frameset.html, and check it out. You'll see that, by embedding each sound in a separate HTML document, and using targeted links in the frameset to call different documents, the sounds can be started and stopped interactively, with no scripting at all. (And see Chapter 12, "Designing Frame-Based Pages," for a full discussion of working with frames in Dreamweaver.)

Plugin Detection

So, you've decided to use content that requires one or more plugins or ActiveX controls on your web site. What do you want to do about those potential site visitors who won't have the proper browser setup?

Strategic Decisions

Do you want to provide alternative content? Creating non-media-intensive versions of everything you do is time-consuming and makes site maintenance twice as much work. But do you want to leave a portion of your potential audience high and dry, without anything to look at?

If you do provide alternative content, how do you want to direct visitors to it? Your basic choice is between being visible and being invisible about redirecting users.

Visible redirection means starting your site with a page that asks users, "Do you have the such-and-such plugin?" Clicking a "yes" answer will send the user to the media-intensive pages. Clicking "no" will send him to the alternative pages. In case users aren't sure whether they have the plugin, it's a good idea to put some sample plugin content on the page for them to see. "If you can see the above animation/video/hear the music, you have the plugin." You also can provide a link to where users can download the required plugin, if you like. Visible redirection annoys some users, who say they don't like the extra step between them and the web site; but it is pretty foolproof, and easy to set up.

Invisible redirection means detecting plugins behind the scenes and automatically sending the user to one set of pages or another without him realizing it's even happening. This is an attractive option because it streamlines your web site from the visitor's point of view; but it can be tricky to set up, and a lot of things can go wrong with it.

Scripted Detection with the Check Plugin Behavior

The standard method for invisible plugin detection is to use a JavaScript that executes when the page loads. That's what the Dreamweaver Check Plugin behavior does.

Using the Check Plugin Behavior

There are two ways to use this behavior:

• The behavior can be put in the page that contains the media content. If the plugin is found, the browser stays on the page; if not, the browser is sent to an alternative page.

• The behavior can be put on an empty, dummy page. In this case, if the plugin is found, the browser is sent to the page containing the media; if not, the browser is sent to the alternative page.

The second scenario is more efficient for downloading because it doesn't make visitors without the plugin wait for a complex page full of media to start loading before they're sent to another page. The first scenario is easier to set up and maintain because there's one less HTML file to keep track of.

To use the Check Plugin behavior, follow these steps:

1. Start by creating all the files you'll need. You'll need at least the file containing the media and a page of alternative content. You also might want to create a blank, dummy page that will eventually contain only the behavior and nothing else.

2. Open the file you want to insert the behavior into. This might be the media page or it might be the dummy page.

3. In the tag selector, click the <body> tag. The behavior needs to be called from this tag.

4. In the Behaviors Inspector, choose Check Plugin from the Actions list. The dialog box that comes up will look like the one shown in Figure 19.11.

   Figure 19.11. The Check Plugin behavior dialog box, with sample entries in place.

   

5. From the pop-up menu in the dialog box, choose the appropriate plugin for which you want to test. The most commonly used plugins are available; if a plugin isn't listed, you must type its name in yourself.

6. In the other fields of the dialog box, enter the names of the files you created earlier. If you're adding the behavior to the page containing the media, leave out the optional "if found" destination file. If you're adding the behavior to a dummy page, enter the media page as the "if found" destination. Enter the name of the alternative content page as the "if not found" destination.

7. Important! Make sure the option to Go to First Page if Detection Is Impossible is selected. Internet Explorer/Mac does not allow JavaScript plugin detection. If this option is not selected, users with that browser will always be sent to the alternative content, even if they have the plugin (obviously a very distressing experience).

Limitations of Scripted Detection

If it involves scripting, there's something that can go wrong with it. As noted earlier, some browsers don't allow scripted detection. Also if you're using the Check Plugin behavior for your scripting, it's important to keep in mind that this script checks only for the presence of a plugin, not the version. What if your QuickTime content requires QuickTime 5, but the user only has QuickTime 3? The Check Plugin behavior will direct your users to the QuickTime version of your web page, but they won't be able to access the content. Those users are high and dry.

Extending the Browser with Java

If you're tired of playing the plugin game, there's another, totally different way to extend the browser's capabilities: Java.

What Is Java?

Java is a platform-independent, object-oriented programming language created by Sun Microsystems. (Despite the similarity in names, Java is not related to JavaScript.) Java can create fully functional, freestanding applications. It also can create mini-applications, called applets that run inside a web browser. Because Java is a complete programming language, similar to C or C++, Java applets can be as powerful and diverse as you like. Java applets are commonly used for everything from online games to animation and special effects to visitor counters, clocks, calculators, and navigation tools.

How Java Works

To understand what makes Java so well suited to web use, you need to know how it differs from other programming languages.

Computers don't directly "understand" C++ or Java or any other so-called high-level programming language. Instead, computers understand a numeric language called machine code. After a program is written in a high-level language, it must be compiled, or translated, into machine language. Machine language is platform-specific; this is why your copy of Dreamweaver will run only on a PC or only on a Mac. Programs must be compiled for a certain type of computer, and then they will run only on that type of computer.

Java is different. Java is compiled to run on a pretend computer called a virtual machine. The virtual machine is actually itself a program, which is compiled to run on a specific platform. On Windows computers, the virtual machine is Microsoft VM; on Macs, it's Mac OS Run-Time for Java (MRJ). When a Java application or applet is run on a virtual machine, the virtual machine translates the code into platform-specific machine code. Thus the Java applet itself is platform-independent.

Note

To learn more about Java, visit Sun's web site at http://java.sun.com. To learn more about implementations of the Java virtual machine, visit Microsoft at www.microsoft.com/java and Apple at www.apple.com/java.

Java Issues

The good news is, Java applets are not only platform-independent, they're browser-independent as well. As soon as a browser encounters an applet on a web page, it launches the virtual machine and steps out of the way. You don't have any plugins to worry about. The only things needed to run a Java applet are a virtual machine (which most computers already have installed) and a Java-enabled browser (which almost all browsers are).

The bad news is, nothing is perfect. Some virtual machines are slower and buggier than others; it takes time to launch the virtual machine, which can seem like excessive download time to a frustrated user; and, because the virtual machine is running through the browser, complex applets that require lots of processing power can (and do!) crash browsers.

Java also can create security problems. Some so-called hostile applets are actually designed to behave like viruses; others can cause damage to a system accidentally. It's the job of the virtual machine to protect the computer system from these dangers, but virtual machines themselves can never be completely hackproof. Consequently, many institutions that deal in sensitive information will set their firewalls not to accept any Java, and individuals might choose to disable Java in their browser preferences.

Java and Media

Java applets can contain images and sounds, which will then display in the browser without the need for additional plugins or system components. All images must be GIF or JPEG. All sounds must be AU files. Java cannot handle video; however, it can create animations or "fake video" from a series of still images. Java animations are not as smooth and do not run as quickly as those created in Flash, Shockwave, or QuickTime.

Working with Applets

Working with applets is not like working with Shockwave or QuickTime movies, or any other kind of web media, because applets are not structured like those elements. Your first encounter with an applet will probably involve the words "what are all these bits and pieces, and where's the applet?"

Class Files

A basic compiled Java applet is a file with the filename extension.class not.java, which is used for uncompiled source code.

However, an applet often consists of more than just one file. A complex applet might have several class files, of which only one is the applet itself. The others are supporting players that the applet will call on as it works. With some applets, naming conventions make it clear which is the main file if the program is called Tabulator and there's a class file called tabulator.class, for instance. With other applets, however, it can be a challenge knowing which class file to actually embed in the web page. (The best applets usually have documentation that spells this out for you.)

Media Files

If an applet uses any media files images, sounds, movies, and so on these also will be in separate files, sometimes in separate folders. You must keep the internal folder structure of the applet the way the applet author intended, or the applet won't be able to find its media files.

Archive Files

You might come across a Java applet that has been packaged up into one or more archive files. These files will have filename extension of.jar,.zip, and.cab. With an applet like this, you'll have to refer to the archive file(s) and the main class file in your HTML code. Refer to the applet's documentation to find the name of the class file (because it's inside the archive, and you can't get in there).

Obtaining Java Applets

Most Java applets are written by Java programmers. There isn't one standard authoring environment for creating them. This is why every applet is so different from every other applet.

If you want to use Java on your web site, you can program it yourself, hire someone else to program it, or use one of the many prewritten applets available on the web and elsewhere. Sun's own applet resource page (http://java.sun.com/applets), which has links to other major resource sites as well as a selection of applets to download, is a good place to start looking. Some applets are free, some are shareware, and some are commercial. Some are also better documented than others and allow more customization. Some work better than others do.

Working with Applets in Dreamweaver

Dreamweaver provides several features for working with Java applets, including the Applet object and the Applet Property inspector. You can use these tools to insert an applet into an existing page, or to examine and alter the sample HTML code that usually comes with commercially available Java applets.

Inserting an Applet

In Dreamweaver, use the Applet object, found in the Special Objects panel, to place Java applets on a page. The actual process is simple. Click the Applet object. In the dialog box that follows, browse to the appropriate class file and click OK. There! You have an applet. If you look at your code, you'll see that the applet has been inserted using the <applet> tag.

Figure 19.12 shows the Applet object as well as the Property inspector for a Java applet. Because every applet is different, this is another generic inspector, with a Parameters button for adding applet-specific parameters. Aside from the standard parameters (width, height, vspace, hspace, align, alt, and name), the only two settings available are Code and Base. Code adds a class parameter, and should be set to the name of the class file. Base adds the base parameter, and should be set to the name of the folder, if any, that contains the Java applet files. (It's customary to store an applet in its own folder so that all the files that comprise it can easily be kept together.) As with plugin media, additional parameters used by specific applets are added with the generic Parameters button.

Figure 19.12. The Applet object and the Property inspector for a Java applet.

Exercise 19.6 Inserting a Java Applet

In this exercise, you insert an applet that puts a continually changing series of quotes on the web page. (This applet is one of several freebies offered at the Sun Java site, http://java.sun.com/openstudio/guide.html. To see it in action on a web page, look on the CD-ROM in chapter_19/java for quote_finished.html. Figure 19.13 shows a static screenshot from this file.)

Figure 19.13. Sun's Java Quotes applet as it appears in a web page.

According to the documentation, the applet takes several parameters. Table 19.11 lists them. Some of these parameters might be optional, others might be required; the documentation doesn't specify. You'll use them all.

Table 19.11. Parameters for the Sun Quotes Java Applet Along with Descriptions and Suggested Values

Name	Value
bgcolor	The background color of the applet in RGB hexadecimal.
bheight	The border height, in pixels.
bwidth	The border width, in pixels.
delay	The delay between frames, in milliseconds.
fontname	The name of the font to be used for the applet.
fontsize	The size of the font, in points.
link	A URL to load if the applet is clicked.
random	True or false, determining whether the quotes should appear randomly or in a set order.
number	The number of quotes.
quoteN (N is an integer)	This parameter must appear once for each quote to be included, based on the number of quotes specified above. The first quote will be quote0, the second quote will be quote1, and so on. For each occurrence of the parameter, the value must be a vb] delimited string where the first item is the quote, the second item is the author, the third item is the RGB hexadecimal text color, the fourth item is the RGB hexadecimal background color and the last item is the length of time in seconds to dis play the quote.
space	The distance in pixels between the quote and the author name.

1. To start out, find and examine the Quote folder, which contains this applet. You'll see several class files. Can you tell by their names which one is the applet?

2. In chapter_19/java, open java_quotes.html.

   Using the Insert Applet object, insert the applet. The main class file you should insert (you might have figured this out already) is JavaQuote.class. The code-base option should say quote/classes/.

   Note

   

   Java is case-sensitive! Make sure all references to files, folders, parameters, and values are in their correct case, or your Java applets won't work.

3. Next, set the width and height for the applet to occupy in your layout. For this applet, there is no required size the dimensions just determine how much space the quotes will be allotted on the page. If you want your page to match the examples shown here, set your width and height to 300x125.

4. Referring to the Parameters list in Table 19.11, and using the generic Parameters dialog box, set the parameters for the applet. Experiment until you get results you like.

   (You might find it difficult to see what you're doing when you try to enter the quote parameter, because most quotes are fairly long and the dialog box won't show them in their entirety. If you like, you can type each quote first in a text editor, such as Notepad or Simple Text, and then paste it into the parameter's value field. You also can work directly in Dreamweaver Code view, of course, if you feel comfortable there.)

   When you're done, your Parameters dialog box will look something like the one shown in Figure 19.14.

   Figure 19.14. The Parameters dialog box, showing entered parameters and values for the Sun Quote Java applet. (Only the last few parameters are visible.)

   

5. Try it out in a browser! If everything got entered correctly, your virtual machine should load and show you an ever-changing set of quotes.

Working with Java Archives

With more complex applets, including those that have been packaged in JAR, CAB, and/or ZIP archives, it's often easier and better not to use the Insert Applet object. Instead, because almost all applets come with sample HTML code showing how they should be inserted on a page, just copy and paste that code into your file, or use the sample page as the basis to create your own file. If you do this, you need to make sure your HTML file is in the same place relative to the applet as the sample source if the sample file sits in the same folder as the applet, for instance, place your HTML file in the same folder as the applet.

After you've done your copying and pasting, of course, if you view the page in the Dreamweaver visual editor, you'll be able to select the applet and check the Property inspector, just as if you had inserted the applet yourself.

Summary

In this chapter, you got a taste of the major technologies available for adding media content to the web. Are these the only technologies? No! The web is worldwide and full of variety. This chapter didn't discuss Beatnik, an alternative plugin for handling sound. You didn't learn about QuickTime's virtual-reality capabilities through QTVR, or the AVI or MPEG file video formats. As you read this, more media technologies are no doubt being thought up and implemented. If you want a different media experience for your web visitors, it's up to you to do the research; then use Dreamweaver tools, as you've been doing, to put it all together.

CONTENTS