Sams Teach Yourself JavaScript in 24 Hours

Introducing Plug-Ins

Plug-ins were introduced by Netscape in Navigator 3.0. Rather than adding support directly to the browser for media types such as formatted text, video, and audio, Netscape created a modular architecture that allows programmers to write their own browser add-ons for these features.

There are now hundreds of plug-ins available for Netscape, Firefox, and Internet Explorer. Here are a few of the most popular:

• Macromedia's Shockwave and Flash plug-ins support animation and video.

• Adobe's Acrobat plug-in supports precisely formatted, cross-platform text.

• Apple's QuickTime plug-in supports many audio and video formats.

• RealPlayer supports streaming audio and video.

Firefox and Internet Explorer use different plug-in formats and usually require different versions of a plug-in. Additionally, some plug-ins are available only for one platform, such as Windows or Macintosh.

The <embed> and <object> Tags

Browsers support two tags for plug-ins, <embed> and <object>. The following is an example of the <embed> tag that embeds a sound in a page:

<embed src="sound.wav" autostart="false" loop="false">

This example uses the sound.wav file. It sets two parameters: autostart controls whether the sound automatically plays when the page loads, and loop controls whether the sound repeats after it plays the first time. The parameters supported depend on the plug-in being used.

A more standard tag, <object>, is part of the HTML 4.0 specification. Here's the same sound file using <object>:

<object type="audio/x-wav" data="sound.wav" width="100" height="50">
  <param name="src" value="sound.wav">
  <param name="autostart" value="false">
</object>

Understanding MIME Types

Multipurpose Internet Mail Extensions types (MIME) is a standard for classifying different types of files and transmitting them over the Internet. The different types of files are known as MIME types.

You've already worked with a few MIME types: HTML (MIME type text/html), text (MIME type text/plain), and GIF images (MIME type image/gif). The <script> tag also uses a MIME type to indicate the language: text/javascript. Although web browsers don't normally support many more than these types, external applications and plug-ins can provide support for additional types.

When a web server sends a document to a browser, it includes that document's MIME type in the header. If the browser supports that MIME type, it displays the file. If not, you're asked what to do with the file (such as when you click on a .zip or .exe file to download it).

How JavaScript Works with Plug-Ins

Some plug-ins, such as the sound plug-ins you'll use later this hour, support scripting with JavaScript. Scripting plug-ins works just like scripting the DOM: You assign an id attribute to the <embed> or <object> tag, and then use document.getElementById() to find the object corresponding to the embedded item.

After you've found the object, what you can do with it depends on the file type and the plug-in. For example, most sound plug-ins support a Play() method. Here's an example that finds an embedded sound with the id attribute sound1 and plays the sound:

obj = document.getElementById("sound1");
obj.Play();

Because plug-in methods are not part of the standard DOM, you'll need to consult the plug-in's documentation to find out what methods are supported and what your script can do with the embedded object.

Plug-In Feature Sensing

Any time you work with plug-ins, it's important to remember that not all browsers will have the needed plug-in installed. Although both Firefox and Internet Explorer will attempt to notify users and let them know where to install the plug-in, expecting users to install software just to view your site is a bit optimistic.

Instead, you should use feature sensing to use the plug-in only when it is supported. For example, you could check for the Play() method like this:

if (obj.Play) {
  obj.Play();
} else alert("Can't Play.");

A more sophisticated method that handles errors as well as feature sensing is presented later in this hour.