Extending the Browser with Plug-Ins and ActiveX

[ LiB ]

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

How Plug-In 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.

Luckily, 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, Plug-Ins, 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.

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 plug-in.

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 plug-in , like a helper application, has functionality that the browser doesn't, but it is not a standalone application. Plug-ins cannot launch and run on their own. Instead, they add functionality to the browser. Plug-ins must reside in the Plugins folder, inside the browser's own application folder. The Flash, QuickTime, and Shockwave plug-ins, 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 plug-in.

Netscape Plug-Ins vs. ActiveX Objects

Years ago, to enable web authors to put media content on HTML pages, Netscape developed the capability to add plug-ins to itself; to support plug-inbased 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 plug-in system, and for several years it was the standard method used to insert media into web pages. The code looks like this:

 <embed src="myMovie.mov" width="32" height="32"  pluginspage="http://www.apple.com/quicktime"></embed> 

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 plug-ins and the browser. The code looks like this:

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/  flash/swflash.cab#version=6,0,0,0" width="100%" height="100%"  id="framework" align=""> <param name=movie value="framework.swf"> <param name=quality  value=high> <param name=bgcolor value=#000000> </object> 

It's confusing but important to remember that, although IE/ Windows no longer supports Netscape-style plug-ins, 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 plug-in; the newest versions will not.

As a result, there are two ways to insert media content into browsers: as plug-in objects using embed , or as ActiveX objects using object . Two sets of browser technology are available for interpreting that content: Netscape-style plug-ins 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 plug-ins, but starting with versions 5.52-SP2, IE/Win no longer supports plug-insit supports only ActiveX controls (although it does still support the embed tag for ActiveX content). Although older versions of IE/Win and all versions of IE/Mac theoretically support plug-ins, they don't offer very good support. In Netscape, you can communicate with plug-in content using JavaScript; Internet Explorer does not allow JavaScript access to plug-in objects or ActiveX objects; VBScript can be used to communicate with ActiveX objects, but not with plug-in 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.

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.

According to the World Wide Web Consortium's official HTML specification, the object tag is to be used for placing all media elements that 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.

How Plug-In Media Works in Dreamweaver

In Dreamweaver, to insert media content using the embed tag, use the Plugin object. To insert media content using the object tag, use the ActiveX object. Both are located in the Common category of the Insert bar, in with the Media objects. Both are generic objects that can be used with a variety of plug-in and MIME types. Figures 15.1 and 15.2 show both objects and their Property Inspectors. Note that the Property Inspector for ActiveX objects includes an Embed option. When this option is selected, Dreamweaver will insert an object tag and an embed tag for best cross-browser compatibility.

Figure 15.1. The Plugin object and Property Inspector.

Figure 15.2. The ActiveX object and Property Inspector.

In addition to many standard properties such as width, height, and so forth, the Plugin Property Inspector includes one item that you might not have seen before: Plg URL, which inserts a plug-in's URL.

The ActiveX Property Inspector looks a little more strange and includes several items that might not be familiar to you:

• classid (Class ID) This is 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 appears in the pop-up list until removed (by clicking the minus [-] button next to the pop-up list).

• codebase (Base) Similar to the pluginspage attribute for the Plugin object, this optional attribute contains the URL of a site where the required ActiveX control can be downloaded. If a value is entered in this parameter and the user's browser does not have the appropriate control to handle the source file, the control is automatically downloaded, if possible.

• data This attribute should contain the URL of the source file for the content. It's not required by many ActiveX controls (including Flash, Shockwave, and RealPlayer). Some controls, such as Real-Player, require a src parameter instead. (See more on coding for RealPlayer later in this chapter.)

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).

Accessing Plug-InSpecific Parameters

Both the Plugin and ActiveX Property Inspectors must work for any type of embedded media content, for a variety of plug-ins and ActiveX controls. Consequently, they offer only generic properties. Most plug-ins and controls also acceptand sometimes requiretheir own specific properties that don't appear in the inspector. Dreamweaver has a mechanism for handling this: the Parameters button, located in both the Plugin and ActiveX Property Inspectors. Pressing this button accesses a special Parameters dialog box (see Figure 15.3) into which any attribute's name and value can be entered. It's up to you to know, for each plug-in or ActiveX control, what parameter names and values to use here.

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

Playing Embedded Content

Dreamweaver doesn'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 plug-in installed in any browser on your system, Dreamweaver will be able to preview the media. (For details on this, see the sidebar "How Dreamweaver Plays Media Content.")

How Dreamweaver Plays Media Content

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

Dreamweaver/Windows users take note, however! Dreamweaver uses pluginsnot ActiveX controlsto preview media content. If the only browser installed on your system is Internet Explorer, or if your other browser(s) have no plug-ins installed, you will not be able to preview embedded media from within Dreamweaver unless you install Netscape or Opera (or any other browser that uses plug-ins) and configure that browser with the required plug-ins. You can also obtain a copy of the required plug-infrom another computer or from the company that created the plug-inand 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 plug-ins.

If the particular content you are working with has no related plug-inonly an ActiveX Controlyou won't be able to preview it in Dreamweaver no matter what you do. Windows users must preview in the browser; Mac users can't preview at all.

Playing ActiveX Content

Click the Play button in the Plugin or ActiveX Property Inspectors (refer to Figures 15.1 and 15.2) to see and hear the media. As long as you have the relevant plug-in (not ActiveX control) installed in any browser on your system, Dreamweaver will be able to preview the media. (For more on this, see the previous sidebar "How Dreamweaver Plays Media Content.")

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 website, however, because it gives no control over parameters or scripting.

Working with Specific Plug-Ins

To use plug-in media content effectively on your web pages, you need to familiarize yourself with the various plug-ins and ActiveX controls, and how each worksin the browser and in Dreamweaver.

Shockwave

Shockwave is a plug-in 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. Shockwave is cross-browser and cross-platform, available as a Netscape plug-in and an ActiveX control. According to Macromedia, 167 million users worldwide have the Shockwave plug-in installed. Shockwave movies have the .dcr filename extension.

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

QuickTime

QuickTime is a cross-platform, system-level extension and browser plug-in that provides synchronized media and interactivity similar to that found in Shockwave and Flash. QuickTime has long been available as a plug-in; recently, in response to Microsoft's decision not to support plug-ins for IE/Windows, Apple has released QuickTime as an ActiveX control as well. According to a recent Apple announcement, 100 million copies of the QuickTime player and browser plug-in have been distributed and installed worldwide. QuickTime movie files use the .mov filename extension.

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.

Inserting a QuickTime Object

In Dreamweaver, you can insert QuickTime content using the Plugin or ActiveX objects. For best compatibility with the newest versions of Internet Explorer, it's best to use ActiveX, although be sure to check the Embed option in the Property Inspector so Dreamweaver also generates an embed tag for other browsers. Whichever method you use, the Property Inspector is generic, with no QuickTime-specific options. As with Shockwave, width and height are always set to a default value of 32 x 32 pixels. If the dimensions are set smaller than the original movie size, the movie is cropped; if the dimensions are set larger than the original size, empty space is 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 15.1 shows a list of some parameters commonly used with QuickTime movies.

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

Parameter	Value	Description
autostart	true or false	Specifies whether the movie starts playing as soon as it loads.
loop	true or false	Specifies whether the movie repeats indefinitely or plays only once.
controller	true, false, qtvr	Specifies whether a controller bar appears at the bottom of the movie, and what kind of controller bar it is. 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	Specifies whether the movie appears at its original size, or enlarged or reduced. ToFit scales the movie to match the width and height parameters; Aspect does the same, but without distorting its aspect ratio. A scale value of larger than 1 enlarges the movie; smaller than 1 reduces the size.
volume	0 to 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 starttime)	Determines at what point in the movie it should stop playing.
href	Absolute or relative URL	If this parameter is present, clicking the URL anywhere on the movie launches the specified URL.
qtnext n	Absolute or relative URL	Specifies a movie to play after the current URL 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 15.1. 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_15/quicktime folder on the book's website at www.peachpit.com.

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 = 340 height = 256 codebase (Base) = http://www.apple.com/qtactivex/qtplugin.cab 

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

   

   The first time you place a QuickTime movie in a document using the ActiveX object, you'll have to type in the classid yourself because it doesn't appear in the ClassID pop-up menu. You have to do it only once, though. After that, Dreamweaver remembers 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 15.1 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 that 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 When 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 book's website 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 earlier, this is an important parameter for users relying on plug-ins and not ActiveX controls. Within the ActiveX Property Inspector, it must be set using the Parameters dialog box.

   Figure 15.4 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 15.4. 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 <embed> tags, using the syntax appropriate to each.
   
   

Dreamweaver has even added the pluginspage attribute to both tags, although it is meaningful only for the <embed> tag. If you like your code mean and lean, you can delete the <object> pluginspage parameter tagbut 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.

Windows Media

Windows Media is a comprehensive platform for delivering audiovisual media, including streaming delivery and the capability to combine different media types in complex presentations. It 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 itbut only for those browsing with IE/Windows. The player is available as a (much less powerful) plug-in for Netscape and Macintosh users. Filename extensions for Windows Media Player include .wma and .wmv.

For playback in the browser, Windows Media Player utilizes metafiles containing pointers to media files. The metafile, not the media file itself, 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 extensions. The file must contain an absolute or relative pathname 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> 

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

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.
   
   
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 have to do this only the first time you embed Windows Media contentafter that, the information will be part of the pop-up list.

Passing Parameters to Windows Media Objects

Table 15.2 lists some of the commonly used 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 15.2. Some Useful Parameters Accepted by Windows Media Player 7 (This List Is Not Exhaustive)

Parameter Name	Value	Description
url	Absolute or relative 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 an src for that tag, this parameter is entered automatically for you. If not, you must enter it manually using the generic Parameters dialog box.)
width	Number of pixels	The horizontal space that the media and its controller will be allotted on the page.
height	Number of pixels	The vertical space that 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 begins playing automatically as soon as the page loads.
playCount	Number of loops	How many times the media will play.
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 15.2. Inserting Windows Media Objects

In this exercise, you'll insert two Windows Media files into an HTML pageone containing audio and video, and one containing only audio. All exercise files are in the chapter_15/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. For the audio file, create a text file and save it as jazz.wax . Enter the following code:
   
   

   

   If you want to use Dreamweaver's Code view to work with these metafiles, you should change the program preferences to recognize the new filename extensions. Choose Edit > Preferences, go to the File Types/Editors tab, and in the input field for files to open in Code view, add two new extensions: .wax and .wvx.

   
   

    <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 .
   
   
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 320 x 240. 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 15.5).
   
   

   Figure 15.5. The windowsmedia_sampler.html exercise file with the 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 320 x 240. Turn on Include Embed and set the src to aspirations.wvx .
   
   
6. If you try your file in the browser now, you're in for an overwhelming experience because 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 320 x 240 box you created for it. Set the height to 300 pixelsthat 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 40because the height is calculated from the bottom of the box, this value truncates the display at the top edge of the controller. Figure 15.6 shows this.

     Figure 15.6. 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 notice 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.
   
   

Inserting a Shockwave Object

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

Figure 15.7. The Shockwave object and its associated Property Inspector.

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.

The Property Inspector for Shockwave content is fairly sparse because several basic parameterssuch 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 32 x 32 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 is cropped; if the dimensions are set larger than the original size, empty space is added around the edges of the movie.

Passing Parameters to a Shockwave Object

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.

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 15.8 shows this happening.)

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

Adding Sound to Web Pages

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

If you decide to use targeted media for your sounds, you might consider targeting the Flash plug-in. This means creating an SWF file that contains only an audio element, or an audio element with Flash buttons and other controller elements. (Of course, you have to know enough about Flash authoring to build such an interface.) For more on using Flash and Dreamweaver, see the next chapter.

Targeted vs. 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 plug-in/ActiveX technologies are also available to handle sounds. Some formats, such as RM files for RealAudio, are proprietaryonly one plug-in can handle them. Others, such as AIF and WAV, are supported by a variety of plug-ins. The first choice you'll have to make when determining how to add sound to a page is whether to target a specific plug-in 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 15.3 shows the main sound file formats currently in use on the Web, along with their supporting plug-ins. Each different plug-in presents the user with a different control panel for handling sounds; each accepts different parameters.

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

Filename Extension	Description
.wav	The native format for Windows audio files. Understood widely and offers fairly good compression-to-sound quality.
.aif	The native format for Macintosh audio files. Understood widely and offers fairly good compression-to-sound quality.
.mp3	The latest and greatest file format, not supported by many older plug-ins 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 offers poor compression-to-sound quality.
.mid , .midi	File format for synthesized (that is, 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 plug-ins when adding sound to a page. What are the ramifications of this?

ActiveX or Plug-In?

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 untargetedto play in whatever plug-in or helper application is available on each user's browseryou 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 the user 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 plug-in 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 capable of accommodating any of them. Follow these two rules:

• Think 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 144 x 60. These are the dimensions for the Netscape LiveAudio plug-in and are large enough to accommodate other controls fairly comfortably.

• Use background color Most plug-ins 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 that it doesn't look so obviously like a small fish in a large pond.

Overloading the Parameters

Different plug-ins accept different parameters. Therefore, you 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 parameterssetting multiple parameters to handle the same sound attribute, to make sure you're covering all of your bases. Table 15.4 lists various useful sound-related parameters, along with strategies for their use in multiple plug-in situations.

Table 15.4. 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 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 plug-ins 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, plug-ins will accept a numeric value here.)
volume	0 to 100	How loud the audio will play. Not all plug-ins recognize this value.

Exercise 15.3. 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_15/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 15.9 shows the page layout with audio objects in placethe 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 note which file types are being placed so that you can better analyze the results later.
   
   

   Figure 15.9. 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 15.4 as a guide.) In Figure 15.9, 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 plug-in/browser/platform situations. When you're done, you can save the file as a reference for future sound use.
   
   

Scripting Plug-In 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? Yesand no. Most plug-ins 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 Worksand Why It Doesn't Always Work

To understand how scripting of media elements worksand doesn't workin browsers, you need to revisit the browser wars. As you learned in Chapter 13, "Interactivity 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 plug-in technology (ActiveX), but 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 languagesbut not JavaScript.

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

• Internet Explorer It's impossible to send any scripting commands to media that have no ActiveX control.

• Internet Explorer/Mac It's impossible to send scripting commands to any plug-in 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 Plug-Ins

Each plug-in or ActiveX control offers its own set of scripting commands that 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 websites 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 simplecreate 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.

If you really want reliable, controllable media, the simplest answer is to avoid browser scripting entirely. Flash, Shockwave, and QuickTime movies all offer internal scripting.

Plug-In Detection

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

Scripted Detection with the Check Plug-In Behavior

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

This behavior can be used in two ways:

• The behavior can be put in the page that contains the media content. If the plug-in 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 plug-in 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 plug-in 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 fewer 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 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 15.10.
   
   

   Figure 15.10. The Check Plug-in behavior dialog box, with sample entries in place.

   

   
   
5. From the drop-down menu in the dialog box, choose the appropriate plug-in for which you want to test. The most commonly used plug-ins are available; if a plug-in isn't listed, you must type its name 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 Go to First Page If Detection Is Impossible is selected. Internet Explorer/Mac does not allow JavaScript plug-in detection. If this option is not selected, users with that browser will always be sent to the alternative content, even if they have the plug-in (obviously, a very distressing experience).
   
   

Limitations of Scripted Detection

If it involves scripting, something 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 plug-in, not the version. What if your QuickTime content requires QuickTime 5 but the user has only QuickTime 3? The Check Plugin behavior will direct your users to the QuickTime version of your web page, but those users won't be able to access the content. They are high and dry.

You can avoid the problems of scripted detection by using nonscripted visible redirection. In other words, just tell users up front that plug-in media will be used, and give them the chance to choose alternate content or download the plug-in. When users aren't sure whether they have the plug-in, it's a good idea to put some sample plug-in content on the page for them to see, such as, "If you can see the above animation/video/hear the music, you have the plug-in."

[ LiB ]