Plug-ins | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Plug-ins such as the Flash player, QuickTime player, and others, are small helper programs ( components ) that extend the browser to support new functionality. Plug-ins are primarily a Netscape technology and have been around since Netscape Navigator 2. They are supported by some other browsers, notably Opera (www.opera.com). The embed element used to reference plug-ins is also supported under Internet Explorer, although it does result in the launch of an ActiveX control (a similar Microsoft technology discussed later in the chapter). Although plug-ins can go a long way toward extending the possible capabilities of a browser, the technology does have its drawbacks. Users must locate and download plug-ins, install them, and occasionally even restart their browsers. Many users find this rather complicated. Beginning with Netscape 4. x , some installation relief was found with somewhat self-installing plug-ins and other features, but plug-ins can still be occasionally troublesome for users. To further combat this problem, many of the most commonly requested plug-ins, such as Macromedia's Flash, are being included as a standard feature with Netscape and other browsers. However, even if installation were not such a problem, plug-ins are not available on every machine; an executable program, or binary, must be created for each particular operating system. Because of this machine-specific approach, many plug-ins work only on Windows-based systems. A decreasing number of plug-ins work on Macintosh and even less on Linux or UNIX. Finally, each plug-in installed on a system is a persistent extension to the browser, and takes up memory and disk space.

The benefit of plug-ins is that they can be well integrated into Web pages. You include them by using the <embed> or <object> tags. Typically, the <embed> syntax is used, but the <object> syntax is the preferred method because it is part of the XHTML specification and will, therefore, validate. Eventually, <object> will supplant <embed> completely, but for now it is very common in Web pages. In general, the embed element takes a src attribute to specify the URL of the included binary object. The height and width attributes often are used to indicate the pixel dimensions of the included object, if it is visible. To embed a short Audio Video Interleaved (AVI) format movie called welcome.avi that can be viewed by a video plug-in such as those generally installed with many browsers, use the following markup fragment:

  <embed src="welcome.avi" height="100" width="100"></embed>

The <embed> tag displays the plug-in (in this case a movie) as part of the HTML/XHTML document.

A browser can have many plug-ins installed. To check which plug-ins are installed in Netscape, the user can enter a strange URL, such as about:plugins , or look under the browser's Help menu for the option "About Plug-ins." The browser will show a list of plug-ins that are installed, the associated MIME type that will invoke each plug-in, and information as to whether that plug-in is enabled. Figure 15-1 shows an example of the plug-in information page.

Figure 15-1: About Plug-ins listing

<embed> Syntax

The primary way to load plug-ins for Netscape browsers is to use the nonstandard <embed> tag. It is preferable to use the object element, which is part of the HTML and XHTML specification, but <object> does not always work well, particularly in older browsers. Furthermore, many developers and editors seem stuck on the <embed> syntax. For backward compatibility, you might have to use both forms, as shown later in this chapter. You can find the general syntax of an <embed> tag in the element reference in Appendix A.

The most important attribute for an <embed> tag probably is src , which is set to the URL of the data object that is to be passed to the plug-in and embedded in the page. The browser generally determines the MIME type of the file ”and thus the plug-in to pass the data to ”by the filename suffix. For example, a file such as test1.dcr would be mapped to a MIME type of application/x-director and passed to a Shockwave for Director plug-in. In some cases, however, the plug-in to use with a particular <embed> tag is not obvious. The plug-in might not need to use an src attribute if it reads all of its data at run time or doesn't need any external data.

Because plug-ins are rectangular, embedded objects similar to images, the embed element has many of the same attributes as the img element:

align Use to align the object relative to the page and allow text to flow around the object. To achieve the desired text layout, you may have to use the br element with the clear attribute.
hspace and vspace Use to set the buffer region, in pixels, between the embedded object and the surrounding text.
border Use to set a border for the plug-in, in pixels. As with images, setting this attribute to zero may be useful when using the embedded object as a link.
height and width Use to set the vertical and horizontal size of the embedded object, typically in pixels, although you can express them as percentage values. Values for height and width should always be set, unless the hidden attribute is used. Setting the hidden attribute to true in an <embed> tag causes the plug-in to be hidden and overrides any height and width settings, as well as any effect the object might have on layout.

Custom Plug-in Attributes

In addition to the standard attributes for <embed> , plug-ins might have custom attributes to communicate specialized information to the plug-in code. For example, a movie player plug-in may have a loop attribute to indicate how many times to loop the movie. Remember that under HTML or XHTML, the browser ignores all nonstandard attributes when parsing the markup. All other attributes are passed to the plug-in, allowing the plug-in to examine the list for any custom attributes that could modify its behavior. Enumerating all the possible custom attributes here is simply not possible as each particular plug-in used can have a variety of custom attributes. You should be certain to look at the documentation for whatever plug-in you are going to use.

Attributes for Installation of Plug-ins

If embedded data in a Web page has no associated plug-in, the user will need to install a plug-in to address it. However, making users figure out which plug-in to install isn't a very good idea; instead, set the pluginspage attribute equal to a URL that indicates the instructions for installing the needed plug-in. This way, if the browser encounters an embed element that it can't handle, it visits the specified page and provides information on how to download and install the plug-in. Starting with Netscape 4, however, this attribute automatically points to a special Netscape plug-in finder page.

Netscape 4 and beyond simplify the plug-in installation process by introducing the JAR Installation Manager (JIM), which is used to install Java Archive files (JARs). JAR files are a collection of files, including plug-ins, which can be automatically downloaded and installed. Set the pluginurl attribute for an <embed> tag to the URL of a JAR file containing the plug-in that is needed. If the user doesn't have the appropriate plug-in already installed, the browser invokes JIM with the specified JAR file and begins the download and installation process. The user has control over this process. The downloaded objects can be signed ”a type of authentication ”to help users avoid downloading malicious code. Figure 15-2 shows a sample JIM window under Netscape 4.

Figure 15-2: JIM window under Netscape 4

In Netscape 4 or greater, the pluginurl attribute takes precedence over pluginspage . However, if neither attribute is used, the Netscape browser should default to a plug-in finder page.

<noembed>

Some browsers don't understand Netscape's plug-in architecture, or even the <embed> tag. Rather than lock out these browsers from a Web page, the <noembed> tag enables you to provide some alternative text or marked -up content. In the following short example, an AVI video is embedded in the page. The <noembed> tag contains an image, which in turn has an alternative text reading set with the alt attribute. Note how the example degrades from a very sophisticated setting all the way down to a text-only environment:

  <embed src="welcome.avi" height="100" width="100" />   <noembed>   <img src="welcome.gif" alt="Welcome to Demo Company, Inc." />   </noembed>

One potential problem with the <noembed> approach occurs when a browser supports plug-ins but lacks the specific plug-in to deal with the included binary object. In this case, the user is presented with a broken puzzle-piece icon or a similar icon, and then is directed to a page to download the missing plug-in. As discussed previously, you should always set the pluginurl or pluginspage attribute to start the user on the process of getting the plug-in needed to view the content.

<object> Syntax for Plug-ins

The <object> tag can also be used to include a variety of object types in a Web page, including Netscape plug-ins. Like an <embed> tag, an <object> tag's attributes determine the type of object to include, as well as the type and location of the plug-in. The primary attribute for <object> when referencing plug-ins is data, which represents the URL of the object's data and is equivalent to the src attribute of <embed> . Like the <embed> tag, the type attribute represents the MIME type of the object's data. This sometimes can be inferred from the value of the data attribute. The codebase attribute, which is similar to the pluginspage attribute, represents the URL of the plug-in. The classid attribute is used to specify the URL to use to install the plug-in, by using the JIM. If no classid attribute is specified and the object can't be handled, the object is ignored, and any nested markup is displayed as an alternative rendering. The id attribute is used to set the name of the object for scripting. If the browser can't handle the type, or can't determine the type, it can't embed the object. Subsequent HTML is parsed as normal. The following is an example of using Netscape's old LiveAudio plug-in under Netscape 4 with the <object> syntax:

  <object data="click.wav" type="audio/wav" height="60" width="144"   autostart="false">   <b>  Sorry, no LiveAudio installed...  </b>   </object>

Page authors should be cautious when referencing plug-ins with an <object> tag because compatibility issues with Microsoft Internet Explorer can arise. For the complete syntax of the object element, refer to the element reference in Appendix A.

Scripting and Plug-ins

Plug-ins can be accessed from a scripting language. Each plug-in used in a document can be referenced in Netscape's browsers as an element of the JavaScript embeds[ ] collection, which is part of the document object, as discussed in the previous chapter. Under Netscape, you can determine which plug-ins are available in the browser by using the plugins[ ] collection, which is part of the navigator object in JavaScript. The following markup displays the plug-ins that are installed in a Netscape browser:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Print Plug-ins  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2 align="center">  Plug-ins Installed  </h2>   <hr />   <script type="text/javascript">   <!--  if (navigator.appName == "Microsoft Internet Explorer")  document.write("Plug-ins[] collection not supported under IE"); else  {    var num_plugins = navigator.plugins.length;    for (var count=0; count < num_plugins; count++)      document.write(navigator.plugins[count].name + "<br />");  }  //-->   </script>   </body>   </html>

Note that this example will not display the plug-ins under Internet Explorer because IE doesn't support the plugins[ ] collection. Under Netscape, however, you can use some simple if-then logic in JavaScript to determine which markup to output depending on if a particular plug-in is loaded in the browser or not.

Once plug-ins are used in a page, they always should be named using the name and id attributes so they can be accessed easily from JavaScript. For example, the markup

  <embed src="welcome.avi" name="welcomemovie" id="welcomemovie"   height="100" width="100"></embed>

gives this instance of the LiveVideo plug-in the name WelcomeMovie. After the plug-in is named, it can be accessed from JavaScript as document.welcomemovie . If it is the second plug-in in the page, it also could be referenced as document.embeds[1] . Why not "index 2"? Arrays in JavaScript, which is how collections are implemented, start numbering at zero, so document.embeds[0] references the first plug-in, document.embeds[1] references the second plug-in, and so on.

After you name an occurrence of a plug-in in a page, you might be able to manipulate the plug-in's actions even after you load the page. Netscape browsers, starting with the 3. x generation, include a technology called LiveConnect that enables JavaScript to communicate with Java applets and plug-ins. However, only plug-ins written to support LiveConnect can be manipulated using JavaScript. Fortunately, many plug-ins such as Macromedia Flash support LiveConnect. This simple example shows how LiveConnect works by using form buttons to start and stop the playing of a Flash movie in a page using JavaScript:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Flash JavaScript Control Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type="text/javascript">   <!--  var loaded=false; function playFlash(id)  {  var flashFile = eval("window.document."+id);   if (!loaded)    {     while (!loaded)       {         if (flashFile.PercentLoaded() == 100)          {            flashFile.Play();            loaded = true;           }       }     }    else      flashFile.Play(); }     function stopFlash(id)  {   var flashFile = eval("window.document."+id);   flashFile.StopPlay(); }  //-->   </script>   </head>   <body>   <h2 align="center">  Plug-in and JavaScript Interaction  </h2>   <embed src="example.swf" quality="high"   pluginspage="http://www.macromedia.com/go/getflashplayer"   type="application/x-shockwave-flash"   width="400" height="250"   id="example" name="example"   swliveconnect="true">   <noembed>  You need Flash and Netscape for this demo  </noembed>   </embed>   <hr />   <form action="#">   <input type="button" name="Button1" value="Start Flash" onclick="playFlash('example');" />   <input type="button" name="Button2" value="Stop Flash" onclick="stopFlash('example');" />   </form>   </body>   </html>

Note

The swliveconnect="true" attribute is very important and will ensure that this example works. Without this attribute, the demo should not work. Even so, the preceding example is very specific to Netscape and it may not work even in some Mozilla variants. Also, it might work under Internet Explorer, but there is no guarantee of this. Furthermore, the implementation of LiveConnect is buggy and might not work under all versions of Navigator. Still, the example illustrates the basics of a script talking to a plug-in.

Tying together plug-ins by using a scripting language in conjunction with LiveConnect hints at the power of such component models as Netscape's plug-ins. However, Netscape plug-ins often are passed over in favor of ActiveX or Java applets for general programming tasks , and plug-ins often are regulated to handling new media forms as this example just demonstrated.

< Day Day Up >