Plug-ins and Active Content

Browsers are capable of displaying text, html, gif and jpeg files in the browser window. For other types of files browsers rely on plug-ins and helper applications. Some plug-ins are included with newer generation browsers. All necessary plug-ins are available by downloading online, although not all computers are capable of playing sound or video files. For more details about plug-ins and computer requirements see the Plug-ins page.

When a Web author expects a browser to utilize an unsupported file type it is important to use the correct extension for the file, so the browser handles it correctly. If no plug-in is available the browser may call on a helper application to display the file. The browser user controls which plug-ins and applications are called upon to open programs. Although almost any application can be specified as a helper, it is best to specify small, fast programs. When no application is available the browser offers the opportunity to download and save the file.

Adding Sound. There are two ways to add sounds to Web pages -- as a streaming file that plays while downloading, or as a file that plays after downloading. The WAV file format is readable by both Macintosh and Windows operating systems, and therefore recommended for non-streaming sound. The other popular formats, RA and RM (RealAudio and RealMedia), are used for streaming content. RealMedia is the most common steaming format. Steaming audio/video files are more complicated, and may also require a special server. Authors need to confirm the capabilities of their intended server if considering streaming content, especially if using more than a few small files.

Embedding Sound. The following sound file parameters are used within the <EMBED> tag.

src="sound.wav" is required to link to the source file, in this case named sound.wav. With the src tag quotation marks are essential.

type="audio/aiff | audio/basic | audio/mid | audio/mpeg | audio/wav | audio/x-aiff | audio/x-midi | audio/x-mpeg | audio/x-wav" specifies the mime type of the file. Complete lists of MIME types are available online.

name="" is used if the sound file is called by a script. Any name may be specified between quotations.

controls=console | small console | true | false is required for visible controls. Include the appropriate size tags. Browsers may ignore these tags. The following attributes of consoles are used.

height=60 or height=15 needed for visible controls

width=144 needed for visible controls

align="left | right | top | bottom" determines the alignment of the visible control.

hspace="n" and vspace="n" adds horizontal and vertical space around the controller, where n is a positive integer representing pixels.

hidden=true | false determines the visibility of the controls.

autoplay=true | false is used to set whether or not the sound plays when the page is opened.

volume=0%-100% determines the percent of the system volume.

loop=true | false | n where n is a positive integer determining the number of times the file will play, and where true or false will determine if the sound loops continuously.

This example places a console in the page to play a wav file. It also provides a pluginspage attribute, a link to the URL where the client can obtain the QuickTime plug-in, a unlikely need with a .wav file format.

<embed src="active/beth5th.wav" controls="smallconsole" width="144" height="15" 
   vspace="4" hspace="4" border="2" align="left" autoplay=false name="fifth"
   pluginspage="http://www.apple.com/quicktime/download/?video/quicktime">
</embed>

<BGSOUND SRC="music.wav" loop=infinite>      

RealMedia Sound Files. Adding RealMedia sound to a page requires three components, the html code indicating a metafile, the text file known as the metafile, and the sound file. A link for a RealMedia file points to the metafile instead of the media file. A metafile can be created with a text editor. In the metafile type insert the complete path to one or more RealMedia files you want to play. Save the file as a text only file (ASCII) with the file extension .ram if linking to the sound file, or as .rpm if embedding the sound file. Linking is a better supported method. Linking is accomplished by specifying the metafile.ram, as in <A HREF="mysound.ram">Play Sound.</A>.
To embed add a type attribute to the file reference, as in <SRC="mysound.rpm" TYPE="audio/x-pn-realaudio-plugin"> and include the console and control attributes within the tag. There are several control options and their height and width parameters should be included. For example, to display all controls use CONTROLS="all" height=127 width=275. Use LOOP=true or NUMLOOP=n to set the play times. Use SHUFFLE to play multiple files in random sequence.

Flash Movies. The example below illustrates the code of an HTML page displaying a Flash movie. A Flash movie can be displayed in a web browser if an HTML document uses the <EMBED> and <OBJECT> tags and the appropriate parameters. The <OBJECT> and <EMBED> tags are ordered with the <EMBED> and </EMBED> tags placed just before the </OBJECT> tag.

All the settings in the <EMBED> tag are attributes inside the tag.

In the <OBJECT> tag there are four attributes, height, width, classid and codebase that are included in the tag..

classid="" specifies the ActiveX control for the browser within the quotation marks, and must be entered exactly.

Height="" and width="" specify pixels or percentage of the browser window within the quotations. Flash movies are scalable, vector graphics and will not degrade if the aspect ratio is maintained.

codebase="" allows the browser to automatically download the ActiveX control if needed.

All the other <OBJECT> attributes are parameters and are listed in separate <PARAM....> tags between the <OBJECT> and </OBJECT> tags.

PARAM NAME=quality VALUE= low | high | autohigh | autolow | best. With Flash anti-aliasing smoothens the appearance of the images, requiring a fast processor. Setting quality to the low value turns off anti-aliasing, autohigh starts with anti-aliasing, but turns it off if the processor is too slow, and autolow starts without anti-aliasing and turns it on is possible. Best provides the highest quality without consideration of playback speed. This tag is optional and the default is high if omitted.

PARAM NAME=play VALUE=true | false not shown in the example, is used if you wish to allow the end user to start the move with an activation button. The default is true, so in this example the movie starts when loaded

PARAM NAME=movie VALUE="flash_movie.swf" specifies the name of the movie file to load. Use quotation marks.

PARAM NAME=loop VALUE=true | false determines if the movie stops or repeats infinitely. When omitted the default is true.

PARAM NAME=bgcolor VALUE=#FF9933 specifies the background color of the movie and overrides the background color setting in the Flash file. This parameter does not affect the background of the HTML file.

PARAM NAME=scale VALUE=showall | noborder | exactfit defines how the browser places the file when the height and width values differ from the movie size. Showall, the default, displays the entire file without changing the aspect ratio. No border maintains the aspect ratio and fills the browser window, cropping as needed. Exactfit displays the entire movie without maintaining aspect ratio.

PARAM NAME=align VALUE=l | r | t | b specifies the alignment attribute of the OBJECT, EMBED, and IMG tags. Default centers the movie and crops the edges if the movie is larger than the window. Each of the other values aligns the specified side, left, right, top or bottom, and crops the other three sides as needed. The salign parameter, used for scaled movies, has additional options tl | tr | bl | br that align to a corner and crop only two sides.

PARAM NAME=base VALUE="URL" specifies the URL of the file. It is optional.

This example HTML file illustrates embedding a Flash file.

<HTML><HEAD></HEAD><BODY>
     <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
       codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"      
       ID=flash_movie WIDTH=550 HEIGHT=400> 
     <PARAM NAME=movie VALUE="flash_movie.swf"> 
     <PARAM NAME=loop VALUE=false> 
     <PARAM NAME=quality VALUE=high> 
     <PARAM NAME=bgcolor VALUE=#FF9933> 
     <EMBED src="flash_movie.swf" loop=false quality=high bgcolor=#FF9933 
       WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash" 
       PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
     </EMBED></OBJECT></BODY></HTML>

APPLETS are programs written in the Java programming language. Java is an object-oriented programming language developed by Sun Microsystems. Java is intended to be a cross-platform language. Java applets can run inline inside second generation and later Web browser. Applets can be included in an HTML page and displayed if you use a Java technology-enabled browser. The applet's code is transferred to your system and executed by the browser's Java Virtual Machine. For a complete description of the use of APPLET code see SUN Microsystem's The Applet Tag page. The links below provide access to Java Applets. Here is an example of a simple APPLET tag:

<applet code="SomeApplet.class" width=40 height=40></<applet>.

The following applet creates a clock. The parameters allow for the modification of colors. The applet "JavaClock.class" is located in the "active/clock/classes/" folder. If the .class file is not in the same folder as the web page the codebase="" attribute is necessary.

<applet codebase="active/clock/classes/" code="JavaClock.class" 
width="150" height="150"> 
         <param name="delay" value="100">
         <param name="link" value="http://java.sun.com/"> 
         <param name="border" value="5"> 
         <param name="nradius" value="80"> 
         <param name="cfont" value="TimesRoman|BOLD|18"> 
         <param name="bgcolor" value="ffffff"> 
         <param name="shcolor" value="ff0000"> 
         <param name="mhcolor" value="00ff00"> 
         <param name="hhcolor" value="0000ff">
         <param name="ccolor" value="dddddd">
         <param name="ncolor" value="000000">
         </applet>

ActiveX. Microsoft's software architecture for Internet Explorer is not well supported by Netscape. To insert an ActiveX control it is recommended that you specify the Netscape plug-in equivalent simultaneously. Another solution is to use a browser detection JavaScript and refer the end user to the appropriate distinct page created for the different browsers. For more on this topic, go to the Dynamic HTML page.