<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet type="text/xsl" href="/lib/xsl/devedge-1.00/article_en.xsl"?>

<nde:article 
  url="/viewsource/2002/markup-and-plugins/"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nde="http://devedge.netscape.com/2002/de"
  xmlns:ent="http://devedge.netscape.com/2003/ent"
  xml:lang="en">

  <nde:header>

  <nde:title>
    Using the Right Markup to Invoke Plugins
  </nde:title>

  <nde:category>
    Article
  </nde:category>

  <nde:authlist>
    <nde:author>
      <nde:authname>
        Arun K. Ranganathan
      </nde:authname>
      <nde:authaffil>
        Netscape Communications
      </nde:authaffil>
    </nde:author>
  </nde:authlist>

  <nde:pubdate year="2002" month="11" day="14" />

  <nde:channels>
    <nde:channel id="viewsource"/>
    <nde:channel id="plugins"/>
  </nde:channels>
  <nde:summary>
    Learn how to use the object element, the embed element, and the applet element to invoke plugins and Java in Netscape Gecko browsers.
  </nde:summary>
  <nde:abstract>
	<p>
	This article is about how to invoke a plugin with the correct use of HTML.  It discusses the <code>object</code> element and the <code>embed</code> element, with details about using the most apt HTML to invoke Java in a web page as well.  Visit <a href="/central/plugins/">Plugin Central</a> for more information on plugin development.
	</p>    
  </nde:abstract>

  <nde:keywords>solutionfinder</nde:keywords>

</nde:header>

  <nde:head>
<style type="text/css">
dl {margin-top: 2.5em;}
dt {font-weight: bold; margin-top: 1.5em; margin-bottom: 0.5em; color: #006;}
dd, dd p {margin-top: 0; margin-bottom: 1em;}
dd {margin-left: 0; padding-left: 0;}
div#summary {float: right; width: 30%; font-size: smaller;
  border: 2px solid #006; background: #DDE; margin: 2em 0 1em 1.5em;}
div#summary h3 {margin: 0; padding: 0.25em 0.1em 0.15em;
  background: #006; color: #FFF; text-align: center;}
div#summary ul {margin: 0; padding: 0.5em 0.5em 0.75em 1.5em;}
</style>
 
  </nde:head>

  <nde:content>
  <h1>Contents</h1>
<p>
	<ul>
		<li><a href="#object">The <code>Object</code> Element: W3C Standards and Cross-Browser Issues</a></li>
		<ul>
			<li><a href="#obj-java">The object element in the context of Java applets</a></li>
			<li><a href="#applet">The applet element and Java -- the popular alternative</a></li>
		</ul>
		<li><a href="#embed">The <code>Embed</code> Element</a></li>		
		<li><a href="#reference">References (Links to Specifications, etc.)</a></li>		
	</ul>
</p>
<div id="summary">
<h3>Summary</h3>
<ul>
	<li>Both the <code>object</code> element and the <code>embed</code> element can be used to invoke plugins.</li>
	<li>The <code>object</code> element is the standard, but its use is subject to some caveats.</li>
	<li>The <code>object</code> element can be used to invoke Java.</li>
	<li>The <code>applet</code> element is still widely used to invoke Java</li>
</ul>
</div>
<a name="object"></a><h2>The Object Element: W3C Standards and Cross-Browser Issues</h2>
<p>
The <code>object</code> element is part of the HTML 4.01 specification, and is the recommended mechanism to invoke plugins.  Its use is subject to a few caveats that this section outlines. 
</p>
<p>
Traditionally, the <code>object</code> element has been used differently by Microsoft Internet Explorer and by Mozilla-based browsers such as Netscape 7.  In IE, the <code>object</code> element is used to invoke a plugin that is built on the ActiveX architecture.  Here's an example of this kind of usage for IE:
<blockquote>
<pre>
<![CDATA[
<!-- IE ONLY CODE -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf">
    <param name="quality" value="high">
    <param name="swliveconnect" value="true">
</object>
]]>
</pre> 
</blockquote> 
In the above example, the <code>classid</code> attribute that goes along with the <code>object</code> element points to a "clsid:" URN followed by the Unique Identifier of an ActiveX control (in the above example, the string beginning with "D27...").  This is, in fact, the Unique Identifier of Macromedia's Flash plugin, and developers are expected to know such Unique Identifiers in order to invoke the component of their choice.  The <code>codebase</code> attribute used above points to a location that houses the CAB file containing the ActiveX control.  In this context, the <code>codebase</code> attribute is used as an <b>obtainment mechanism</b> -- that is to say, a way to obtain a control if it isn't present.  If the Flash ActiveX control is not installed, IE will then go to the URL referenced by the <code>codebase</code> attribute and retrieve the ActiveX control.  Additional <code>param</code> elements (which are "children" of the above <code>object</code> element) specify configuration parameters for the Flash plugin.  For instance, the <code>param name="movie"</code> tells the Flash plugin the location of the SWF file to start playing.
</p>
<p>
With the release of Netscape 7.1, this kind of ActiveX use of the <code>object</code> element
is supported for use with the Microsoft<ent:reg/> Windows Media Player.  Only the Windows Media
Player is supported as an ActiveX control in Netscape 7.1.  <a href="/viewsource/2003/windows-media-in-netscape/">The details are covered in another article on
DevEdge</a>. 
</p>
<p>
Browsers such as Netscape 7 will not render the Flash plugin if the above kind of markup is used, because Netscape 7 does not support ActiveX or ActiveX-based component invocations, with
the exception of Windows Media Player in Netscape 7.1.  Mozilla-based browsers support the Netscape Plugin architecture, which is not COM based like ActiveX (and thus, not invoked via a Unique Identifier) but rather, MIME type based.  Mozilla-based browsers support the use of the <code>object</code> element along with a MIME type.  Here is an example of this usage, once again for the Macromedia Flash plugin:
<blockquote>
<pre>
<![CDATA[
<object type="application/x-shockwave-flash" data="javascript-to-flash.swf" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf">
    <param name="quality" value="high">
    <param name="swliveconnect" value="true">
    <p>You need Flash -- get the latest version from
       <a href=
	  "http://www.macromedia.com/downloads/">here.</a></p>
</object>
]]>
</pre>
</blockquote>  
In the above example, <code>application/x-shockwave-flash</code> is the Flash MIME type, and will invoke the Netscape-specific Flash architecture in Mozilla-based browsers.  The <code>data</code> attribute points to the SWF file to play, and the configuration parameters (the <code>param</code> elements) are used in a consistent manner both for IE and for Mozilla-based browsers such as Netscape 7.  In fact, the above usage will also work for IE, which understands MIME type invocations for certain MIME types such as Flash <i>in addition to</i> ActiveX-style <code>classid</code> invocations.
</p>
<p>
Since the use of MIME type for Flash will work for both IE and Netscape 7, you can use the above markup to invoke the Flash plugin for both IE and Netscape 7.  However, there are a few caveats that developers ought to bear in mind when using the <code>object</code> element with Mozilla-based browsers such as Netscape 7 and in IE: 

<h3>Caveats</h3>
<ul>
<li><p>If you use one single object element for both browsers (as in the above example), <b>it is not possible to provide a cross-browser <i>obtainment mechanism</i> for streamlined download.</b>  You cannot use a <code>codebase</code> attribute to link to a signed CAB file for the ActiveX component, since this won't work in Mozilla-based browsers such as Netscape 7.  Furthermore, IE's use of the <code>codebase</code> attribute as an obtainment mechanism itself is not strictly correct according to the HTML 4.01 specification, which says that the <code>codebase</code> attribute should be used to qualify URNs referenced by the <code>data</code>, <code>archive</code>, and <code>classid</code> attributes.  Future Netscape browsers based on Mozilla source code will allow the use of a special <code>param</code> element to specify where to get plugins that are not present, but this feature is not available in Netscape 7.  This feature is discussed in <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=167601">an open source bug report</a> pertaining to the Mozilla source.</p></li>
<li><p><b>IE doesn't display nested <code>object</code> elements correctly according to the HTML 4.01 specification.</b>  According to the specification, you can nest elements and browsers should stop if they can display the outermost element, or else keep going inwards till they can find something to display.  IE displays everything as if they are in series, and not nested.  Thus, in the following example, instead of stopping at the ActiveX control, IE will display the same animation twice since it also understands the MIME type for Flash:
<blockquote>
<pre>
<![CDATA[
<!-- Usage Will Not Work As Intended -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" 
width="366" height="142" id="myFlash">
    <param name="movie" value="javascript-to-flash.swf">
    <param name="quality" value="high">
    <param name="swliveconnect" value="true">

	<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
	 width="366" height="142" id="myFlashNSCP">
		<param name="movie" value="javascript-to-flash.swf">
    		<param name="quality" value="high">
    		<param name="swliveconnect" value="true">
		<p>You need Flash -- get the latest version from
		 <a href="http://www.macromedia.com/downloads/">
		here.</a></p>
	</object>

</object>
]]>
</pre>
</blockquote>
</p>
</li>
<li><p><b>Web authors have to specify an <i>obtainment mechanism</i> in Mozilla-based browsers -- the browser won't automatically retrieve plugins that are missing if you don't specify where to get the plugin from using the <code>codebase</code> attribute.</b>  If you don't specify a <code>codebase</code> attribute, and the plugin is not installed,the browser will display only the alternate innermost text.  It won't attempt to retrieve a missing plugin using the Netscape Plugin Finder service.  This behavior is not incorrect according to the HTML 4.01 specification, but it obliges web authors to diligently specify <i>obtainment mechanisms</i>.  At a minimum, web authors will have to nest some alternate text inside their object elements telling users where to obtain the missing component.  Adding an additional layer of convenience in the form of automatic retrieval is the subject of a <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=180411">bug discussion</a> in the Mozilla open source code. </p></li>

<li><p><b>Some plugins don't understand all the <code>param</code> elements that their documentation suggests should configure them in Mozilla-based browsers.</b>  An example is versions of the Macromedia Flash player plugin upto Flash Player 6 r. 47, which don't understand the <![CDATA[<param name="movie" value="animation.swf">]]> param element, which is supposed to tell the Flash player which animation to start playing.  In order to work around this, developers are encouraged to use the <code>data</code> attribute to the <code>object</code> element: <![CDATA[<object type="application/x-shockwave-flash" data="animation.swf"..../>]]>.  The fact that the Flash player doesn't understand this <code>param</code> is a Macromedia Flash Player bug that is <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=180378">discussed in the bug database.</a></p></li>
</ul>
</p>
<p>
<h3>Recommendation</h3>
In order to overcome the shortcomings that you can't nest <code>object</code> elements in IE and that there isn't a way you can simply use one <code>object</code> element in a cross-browser way (with architecture specific obtainment mechanisms), the best course of action is to dynamically write <code>object</code> elements based on architecture.  For example, on browsers that support ActiveX, such as IE, create an <code>object</code> element with a classid attribute, and on browsers that support the Netscape Plugin architecture, use a MIME type.  Here is an example of some JavaScript which does this:

<blockquote>
<pre>
<![CDATA[
if (window.ActiveXObject)
{

// browser supports ActiveX
// Create object element with 
// download URL for IE OCX

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com');
document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
document.write(' width="366" height="142" id="myFlash">');
document.write(' <param name="movie" value="javascript-to-flash.swf">');
document.write(' <param name=quality value=high>');
document.write(' <param name="swliveconnect" value="true">');
document.write('<\/object>');

}

else
{

// browser supports Netscape Plugin API

document.write('<object id="myFlash" data="javascript-to-flash.swf"');
document.write(' type="application/x-shockwave-flash"');
document.write(' width="366" height="142">');
document.write('<param name="movie" value="javascript-to-flash.swf">');
document.write('<param name="quality" value="high">');
document.write('<param name="swliveconnect" value="true">');
document.write('<p>You need Flash for this.');  
document.write(' Get the latest version from');
document.write(' <a href="http://www.macromedia.com/downloads">here<\/a>.');
document.write('<\/p>');
document.write('<\/object>'); 

}

]]>
</pre>
</blockquote>
</p>
<a name="obj-java"></a><h3>The Object Element and Java</h3>
<p>
Mozilla-based browsers such as Netscape 6.x, Netscape 7, and CompuServe 7 ship with the <a href="http://java.sun.com/j2se/downloads.html">Java plugin that Sun provides</a>.  Users installing Netscape 6.x and Netscape 7 have a choice of whether or not to install Java.  Unlike Netscape Communicator 4.x, Netscape 6.x and 7 do not have a default Java Virtual Machine -- they rely on Sun's plugin.  During the Netscape Communicator 4.x days, Netscape Communications used to develop a Java Virtual Machine which supported Java 1.5.0 and below.  Now, with Netscape 6 and 7, the Java Virtual Machine is Sun's plugin.  Netscape no longer develops or ships a default Netscape Java Virtual Machine with the browser.    
</p>
<p>
Sun's Java plugin can be invoked by the <code>object</code> element, just like any other plugin.  Once again, IE typically invokes the plugin by way of an <code>object</code> element used in conjunction with a <code>classid</code> attribute that points to an ActiveX Unique Identifier.  Each major version of the plugin has a Unique Identifier.  For instance, this is an example of the type of markup that will invoke the JRE 1.4.1 in IE, using the unique identifier for the JRE 1.4.1:
<blockquote>
<pre>
<![CDATA[
<!-- IE ONLY CODE -->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
     width="460" height="160"
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1">
     <param...>
     <param...>
</object>]]> 
</pre>
</blockquote>
</p>
<p>
The above invocation won't work for Mozilla-based browsers such as Netscape 7 because of the same reason mentioned above: <code>classid</code> used in conjunction with a Unique Identifier references an architecture (ActiveX) that Mozilla code (and thus Netscape 7) does not support.  You can invoke the Java plugin for Netscape 7 and other Mozilla-based browsers by using the appropriate Java MIME type.  Here is an example:
<blockquote>
<pre>
<![CDATA[
<object type="application/x-java-applet;jpi-version=1.4.1_01"
width="460" height="160">
	<param name="code" value="Animator.class">
	<param name="imagesource" value="images/Beans">
	<param name="backgroundcolor" value="0xc0c0c0">
	<param name="endimage" value="10">
	<param name="soundsource" value="audio">
	<param name="soundtrack" value="spacemusic.au">
	<param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au">
	<param name="pause" value="200">
	<p>You need the Java Plugin.
         Get it from <a href="http://java.sun.com/products/plugin/index.html">here.</a></p>
</object>
]]>
</pre>
</blockquote>
The above code mentions a version specific MIME type, and if the Mozilla-based browser such as Netscape 7 doesn't have JRE 1.4.1_01 installed, the alternate text is displayed.  It isn't always necessary to give such a version specific MIME type.  If you aren't taking advantage of any version specific features, a more generic MIME type such as <code>application/x-java-vm</code> will do the job just as well.  The configuration parameters for the applet, including the class which contains the initial entry point (Animator.class, referenced by the "code" <code>param</code> element), are specified in multiple <code>param</code> elements.
</p>
<p>
Mozilla-based browsers such as Netscape 7 also allow for a special <code>classid</code> attribute that can also be used.  This is the special "java:" classid.  Here is an example using this invocation method:
<blockquote>
<pre>
<![CDATA[
<object classid="java:NervousText.class" width="534" height="50">
	<param name="text" value="Java 2 SDK, Standard Edition v1.4">
	<p>You need the Java Plugin.
	   Get it from
	   <a href="http://java.sun.com/products/plugin/index.html">here.
	   </a>
	</p>
</object>
]]>
</pre>
</blockquote>
The "java:" <code>classid</code> allows you to reference the class that provides the primary entry point.  The rest of the configuration parameters work via the <code>param</code> elements.
</p>
<a name="applet"></a><h3>Applet -- The Popular Choice</h3>
<p>
The <code>applet</code> element is still very much supported, and is the most popular way currently to invoke Java applets.  In Netscape 7 and CompuServe 7, the <code>applet</code> element directly invokes the Java plugin.  Here is a sample:
<blockquote>
<pre>
<![CDATA[
<applet code="NervousText.class" width=534 height=50>
	<param name=text value="Java^T^M 2 SDK, Standard Edition v1.4">
</applet>
]]>
</pre>
</blockquote>
The <code>applet</code> element has been deprecated in the HTML 4.01 specification, but an advantage to using it is that in Mozilla-based browsers such as Netscape 7, if you are missing Java, an automatic obtainment mechanism is in place.  The browser will use Netscape's Plugin Finder Service to download the missing Java plugin.  The <a href="#reference">references</a> section gathers resources about the use of the <code>applet</code> element.  
</p>
<a name="embed"></a><h2>The Embed Element</h2>
<p>
The <code>embed</code> element has been used to invoke plugins since the early days of Netscape browsers.  Typically, the <code>embed</code> element is nested within an <code>object</code> element, such that the outer <code>object</code> element invokes an ActiveX control for IE, whereas the inner <code>embed</code> element invokes a Netscape Plugin.  Here is an example of this usage:
<blockquote>
<pre> 
<![CDATA[
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width=366 height=142 id="myFlash">
	<param name=movie value="javascript_to_flash.swf">
	<param name=quality value=high>
	<param name="swliveconnect" value="true">
		<embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
    		type="application/x-shockwave-flash"
    		pluginspage="http://www.macromedia.com/downloads/"
    		name="myFlash" swliveconnect="true">
    		</embed> 
</object>
]]>
</pre>

</blockquote>  
Links to the rules governing the use of the <code>embed</code> element can be found in the <a href="#reference">references</a> section.  The embed element is currently the most widely used element to invoke plugins in Netscape browsers.  It is important to note, however, that the embed element is not part of the HTML 4.01 Specification, and is therefore not a W3C standard.  Some caveats governing the use of the embed element are:
<ul>
<li><p>Do not include a <code>name</code> attribute with the <code>object</code> element, especially if it is the same name value as that of the <code>embed</code> element.  Though doing so actually violates the HTML 4.01 standard, some code generators give <code>name</code> attributes to the <code>object</code> element.  Mozilla-based browsers will not allow you to access the named <code>embed</code> element via JavaScript DOM 0 methods if the <code>object</code> element has the same <code>name</code>.  Use the id attribute with the <code>object</code> element.  The id attribute of the <code>object</code> element can be the same value as the <code>name</code> attribute of the <code>embed</code> element. </p></li>
<li><p>You'll notice that the <code>embed</code> element allows configuration parameters passed to the plugin via custom attributes, such as <code>swliveconnect="true"</code>.  These are analogous to the <code>param</code> elements used by the <code>object</code> element.  Different plugin vendors may require different configuration paramaters to be passed via the <code>embed</code> element, and learning these is advisable.  </p></li>
</ul>
Note that the <b>obtainment mechanism</b> for the <code>embed</code> element -- that is, the way in which a plugin is obtained if it is missing -- comes via the <code>pluginspage</code> attribute.  This attribute points to a page to get the plugin if it is not detected by the browser.  The <code>pluginurl</code> attribute is another attribute that can be used, and it can be used to point directly to an <a href="/viewsource/2002/xpinstall-guidelines/">XPInstall</a> file for a more streamlined download.  For the <code>embed</code> element in particular, these attributes in Netscape 7 and Mozilla are governed by the Plugin Finder Service preference.  Under Edit | Preferences | Navigator | Helper Applications is a preference to use Netscape's Plugin Finder Service.  If the user has checked  <i>Always Use the Netscape Plugin Finder Service to get Plugins</i> then whether these attributes are specified or not makes no difference -- the browser will <i>always</i> consult with the Plugin Finder Service to determine if it has a plugin to handle the missing MIME type.  If the preference is unchecked, the Plugin Finder Service will be consulted only if the web page author <i>does NOT</i> specify either of these attributes.
</p>
<a name="reference"></a><h2>References</h2>
<p>
<h3>General -- Specifications</h3>
<ul>
	<li><a href="http://www.w3.org/TR/REC-html40">HTML 4.01 Specification</a></li>
	<li><a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0 Specification</a></li>
</ul>
<h3>Object Element</h3>
<ul>
	<li><a href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">HTML 4.01 Specification On Object Element</a></li>
</ul>
<h3>Embed Element</h3>
<ul>
	<li><a href="/library/manuals/2002/plugin/1.0/intro.html#1002612">Plugin API Reference on EMBED element</a></li>
</ul>
<h3>Java</h3>
<ul>
<li><a href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-APPLET">HTML 4.01 Applet Definition (Deprecated)</a></li>
<li><a href="http://java.sun.com/products/plugin/index.html">Java Plugin Homepage</a></li>
<li><a href="http://java.sun.com/products/plugin/versions.html">Sun Documentation on OBJECT, EMBED, and APPLET and Different Plugin Versions</a></li>
<li><a href="http://java.sun.com/products/plugin/1.4.1/demos/applets.html">Sun Demonstration of Web Pages using Applet Element</a></li>
<li><a href="http://java.sun.com/products/plugin/1.4.1/demos/plugin/applets.html">Sun Demonstration of Web Pages Using OBJECT/EMBED Elements</a></li>
</ul>
<h3>Bugs and Future Directions In Netscape and Mozilla</h3>
<ul>
	<li><a href="/viewsource/2003/windows-media-in-netscape/">Netscape 7.1 and the Windows Media ActiveX control</a></li>
	<li><a href="http://bugzilla.mozilla.org/show_bug.cgi?id=180378">Flash Currently Doesn't Support <code>param</code> To Launch Animation.</a></li>
	<li><a href="http://bugzilla.mozilla.org/show_bug.cgi?id=167601">Plan to Support A "Special" <code>param</code> as a Future Obtainment Mechanism for Streamlined Downloads</a></li>
	<li><a href="http://bugzilla.mozilla.org/show_bug.cgi?id=180411">Plan to Support Plugin Finder Service for the <code>object</code> Element When No Other Obtainment Mechanism is Specified.</a></li>

</ul>
</p>
  </nde:content>

  <nde:related area="nde">
  	<nde:item url="/viewsource/2003/windows-media-in-netscape/">Netscape 7.1 and the Windows Media ActiveX control</nde:item>
    <nde:item url="/viewsource/2002/gecko-plugins/">Netscape Gecko Plugin Overview</nde:item>
    <nde:item url="/library/manuals/2002/plugin/1.0/">Netscape Plugin API</nde:item>
    <nde:item url="/library/manuals/2001/xpinstall/1.0/">XP Install Reference</nde:item>    
    <nde:item url="/viewsource/2002/xpinstall-guidelines/">XP Install Guidelines for Plugin Installation</nde:item>        
  </nde:related> 
  
  
</nde:article>

