Chapter 8: Playing a Presentation in a Web Page

Embedding a presentation in your Web page provides seamless playback without launching RealPlayer as a separate application. You can even include RealPlayer controls such as fast forward and pause. This chapter explains how you embed RealPlayer's Netscape plug-in or ActiveX Control in your Web page so that people view your presentation directly through their Web browsers.

Choosing the Netscape Plug-in or ActiveX Control

To provide Web page playback, RealPlayer includes a plug-in for browsers that support the Netscape plug-in architecture:

• Netscape Navigator 3.0 and 4.0

• Microsoft Internet Explorer 3.0 and 4.0

It also has an ActiveX control that provides playback capabilities within these products:

• Internet Explorer 3.0 and 4.0

• Visual Basic applications

Because they both have the same capabilities, you can use either the plug-in or the ActiveX control depending on which products you need to support. The following sections describe the basics of using the plug-in or the control, then explain each option you can set.

	Tip
	Familiarity with RealPlayer and HTML will make it easier to use the plug-in or control.

Using <EMBED> Tags for the Netscape Plug-In

To use RealPlayer's Netscape plug-in, you add <EMBED> tags to your Web page HTML. Each <EMBED> tag has three required parameters (SRC, WIDTH, HEIGHT), and can include many optional parameters. The basic <EMBED> tag looks like the following (the SRC value has been omitted for simplicity):

<EMBED SRC="..." WIDTH=300 HEIGHT=134>

This tag creates a playback area 300 pixels wide by 134 pixels high within the Web page. Parameters typically have the form PARAMETER=value. The parameter names can be any case, though this manual shows them uppercase. Except for file names, which must typically be lowercase, parameter values are not case-sensitive. Unless they are URLs, parameter values do not need to be inside quotation marks.

Supporting Other Browsers

To accommodate browsers that do not support the Netscape plug-in, use <NOEMBED> to define a standard hypertext link to your presentation. The unembedded link follows the <EMBED> tag:

<EMBED SRC="..." WIDTH=300 HEIGHT=134>
<NOEMBED><A HREF="...">Play with RealPlayer.</A></NOEMBED>

In this example, browsers that can play the embedded presentation hide the text between <NOEMBED> and </NOEMBED>. Other browsers ignore the preceding <EMBED> tag and display just the hypertext link. The user then clicks the link to play the presentation in RealPlayer.

Using <OBJECT> Tags for the ActiveX Control

You embed the RealPlayer ActiveX control in HTML pages with the <OBJECT> tag. This tag uses an ID that you select, such as ID=RVOCX, and must have the following class ID that identifies RealPlayer:

CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"

The <OBJECT> tag also sets the width and height of the playback area within the browser. A typical <OBJECT> tag looks like this:

<OBJECT ID=RVOCX CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 
WIDTH=300 HEIGHT=134>
... parameters ...
</OBJECT>

This tag creates a playback area 300 pixels wide by 134 pixels high within the Web page. Between <OBJECT> and </OBJECT>, you can define any number of additional parameters in this form:

<PARAM NAME="name" VALUE="value">

PARAM, NAME, and VALUE markers can be any case, though this manual shows them uppercase. Parameter values are not case-sensitive except for file names, which must typically be lowercase. Always enclose parameter values in double quotation marks.

Setting Basic Parameters

Both the Netscape plug-in and ActiveX control use the same basic tag parameters. As explained above, the tag syntax for the plug-in and the control differs, however. The following sections explain the basic parameters you can include in each <EMBED> or <OBJECT> tag.

SRC

The SRC parameter, which is required for each <EMBED> tag, gives the presentation's source URL surrounded by double quotes. The directory names cannot contain spaces. Here is an example of the SRC parameter within the <EMBED> tag:

SRC="http://realserver.company.com:8080/ramgen/sample.smi?embed"

The ?embed option at the end of the URL can be used only when retrieving content from a RealServer that uses the RAMGEN feature. It causes RealPlayer to play the presentation back in the Web page by generating a RAM file with the .rpm extension instead of the normal .ram extension. If you do not include this option, the presentation plays back in RealPlayer.

For the ActiveX control, the <OBJECT> tag's CLASSID parameter eliminates the need to include the ?embed option in the URL:

<PARAM NAME="SRC" VALUE="http://realserver.company.com:8080/ramgen/sample.smi">

	Additional Information
	For more on RAMGEN and presentation URLs, see "Linking your Web Page to RealServer". Note that if RealServer does not use the RAMGEN feature, you must create a RAM file manually and link to it instead of a SMIL file. For more on this, see "Creating a RAM File Manually".

WIDTH and HEIGHT

Required for each <EMBED> or <OBJECT> tag, the WIDTH and HEIGHT parameters set the size of the playback area. If you leave them out, the playback area may appear as a tiny icon because streaming media presentations do not size automatically. The values for WIDTH and HEIGHT are in pixels by default, so a width of 300 creates a playback area 300 pixels wide. Setting WIDTH and HEIGHT to 0 (zero) hides the playback area.

You can also express WIDTH and HEIGHT as percentages of the browser window size. For example, a width of 50% makes the presentation area half the browser width. Keep in mind that different types of content scale with different results. A video scaled larger than its encoded size may not look good. Vector-based media such as RealFlash animation scale more easily to fit different playback areas, however.

Adding RealPlayer Controls

With the CONTROLS parameter, you can place RealPlayer controls such as a Play/Pause button on your Web page. A visitor to your page can then control the presentation playback just as if using RealPlayer as a separate application. The following example for the Netscape <EMBED> tag displays the Play/Pause button:

<EMBED SRC="..." WIDTH=26 HEIGHT=26 CONTROLS=PlayButton>

For the ActiveX control, you define a CONTROLS parameter within the <OBJECT> tag structure:

<OBJECT ID=RVOCX CLASSID="..." WIDTH=26 HEIGHT=26>
<PARAM NAME="SRC" VALUE="...">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
</OBJECT>

The following sections describe each RealPlayer control you can use. A tag's WIDTH and HEIGHT parameters set the control's size. The standard pixel widths and heights given below produce embedded controls approximately the same sizes as the RealPlayer controls. Specifying different pixel sizes scales the controls larger or smaller. You can also use percentage values for sizes, but this is recommended only for the image window.

	Additional Information
	For information on using more than one control in your Web page, see "Using Multiple Controls".

Full Controls

All

Displays the RealPlayer Control Panel, Information and Volume Panel, and Status Bar. The control name "default" also works.

ImageWindow

Displays the image window. This is available only for display presentations such as video or animation. Even if no other controls are visible on the page, the user can typically right-click (on Windows) or hold down the mouse button (Macintosh) on the playback area to display a menu of choices such as Play and Stop.

	Additional Information
	"Controlling Image Display".

Individual Controls and Sliders

ControlPanel

Displays the Play/Pause button, the Stop button, Fast Forward and Rewind controls, and the position slider.

PlayButton

Displays the Play/Pause button.

PlayOnlyButton

Displays the Play button without Pause.

PauseButton

Displays the Pause button without Play.

StopButton

Displays the Stop button.

FFCtrl

Displays the Fast Forward control.

RWCtrl

Displays the Rewind control.

MuteCtrl

Displays the Mute control button.

MuteVolume

Displays the Mute control and volume slider.

VolumeSlider

Displays the volume slider.

PositionSlider

Displays the clip position slider.

Information Panels

TACCtrl

Displays the Title, Author, and Copyright information panel. See also "NOLABELS".

InfoVolumePanel

Displays the Title, Author, and Copyright information panel, as well as the volume slider. See also "NOLABELS".

InfoPanel

Displays the Title, Author, and Copyright information panel. See also "NOLABELS".

Status Panels

StatusPanel

Displays the status panel, which shows informational messages, current place in the presentation timeline, and total clip length. If you do not embed a status panel in your page, error messages display in the browser's status bar.

PositionField

Displays the field of the status bar that shows current position in the presentation timeline and total clip length.

StatusField

Displays the message text area of the status bar.

StatusBar

Displays the status field, position field, and channels (stereo/mono).

Using Multiple Controls

The CONSOLE parameter defines a name that unifies <EMBED> or <OBJECT> tags so that multiple controls work together. For example, you could create three separate <EMBED> or <OBJECT> tags to define an image window, a Play button, and a Stop button. By using three tags, you can can set the size of each control separately and define its layout with HTML tags. You could put each control in a different HTML table cell, for example.

To tie controls together, define the same CONSOLE name within each <EMBED> or <OBJECT> tag, or use one of these predefined names:

_master links all embedded controls on the page.

_unique links to no other embedded controls on the page.

You can have multiple console names for separate presentations. For a page showing two video clips, for example, you can define console names of video1 and video2. All controls linked by video1 interoperate and all controls linked by video2 interoperate. But a volume slider for video1, for example, will not affect the volume of the video2 clip.

Notes on Using Consoles

Note the following when grouping multiple controls with CONSOLE attributes:

• Every <EMBED> tag must have a SRC attribute. Tags linked by a console name should have the same SRC value.

• With the ActiveX control, only one <OBJECT> tag in a console group needs to have a SRC value.

• If the <EMBED> or <OBJECT> tags in a console group have different SRC values, the first valid source that RealPlayer finds among those choices becomes the console source. This may not always be the first source listed.

• Clicking a Play button for one console stops playback for other consoles. This allows multiple consoles to play separate audio tracks or to use the same image window.

Multiple Controls Example

The following examples for the <EMBED> and <OBJECT> tags set up an image window and two sets of controls (a Play button and Stop button) for separate videos, sample1.rm and sample2.rm. The predefined console name _master links the image window to both control sets. The control sets use different console names, however, so they do not link to each other. Clicking each Play button therefore starts a different video.

Netscape Plug-in Sample Mark-up

Because each <EMBED> tag must have a SRC value, the image window in the following example simply uses the same source as the first Play button. The viewer simply clicks either Play button to start a video. Clicking the other Play button stops the first video and plays the second video.

<EMBED SRC="http://realserver.company.com/ramgen/sample1.rm?embed" 
WIDTH=176 HEIGHT=128 CONTROLS=ImageWindow CONSOLE=_master>

<H4>Video 1</H4>
<EMBED SRC="http://realserver.company.com/ramgen/sample1.rm?embed" 
WIDTH=44 HEIGHT=26 CONTROLS=PlayButton CONSOLE=video1> 
<EMBED SRC="http://realserver.company.com/ramgen/sample1.rm?embed" 
WIDTH=26 HEIGHT=26 CONTROLS=StopButton CONSOLE=video1>

<H4>Video 2</H4>
<EMBED SRC="http://realserver.company.com/ramgen/sample2.rm?embed" 
WIDTH=44 HEIGHT=26 CONTROLS=PlayButton CONSOLE=video2> 
<EMBED SRC="http://realserver.company.com/ramgen/sample2.rm?embed" 
WIDTH=26 HEIGHT=26 CONTROLS=StopButton CONSOLE=video2>

ActiveX Control Sample Mark-up

In the following ActiveX example, only the controls for the two play buttons define the source URLs. For convenience the CLASSID value is omitted.

<OBJECT ID=RVOCX CLASSID="..." WIDTH=176 HEIGHT=128>
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="_master">
</OBJECT>

<H4>Video 1</H4>
<OBJECT ID=RVOCX CLASSID="..." WIDTH=44 HEIGHT=26>
<PARAM NAME="SRC" VALUE="http://realserver.company.com/ramgen/sample1.rm">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
<PARAM NAME="CONSOLE" VALUE="video1">
</OBJECT>
<OBJECT ID=RVOCX CLASSID="..." WIDTH=26 HEIGHT=26>
<PARAM NAME="CONTROLS" VALUE="StopButton">
<PARAM NAME="CONSOLE" VALUE="video1">
</OBJECT>

<H4>Video 2</H4>
<OBJECT ID=RVOCX CLASSID="..." WIDTH=44 HEIGHT=26>
<PARAM NAME="SRC" VALUE="http://realserver.company.com/ramgen/sample2.rm">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
<PARAM NAME="CONSOLE" VALUE="video2">
</OBJECT>
<OBJECT ID=RVOCX CLASSID="..." WIDTH=26 HEIGHT=26>
<PARAM NAME="CONTROLS" VALUE="StopButton">
<PARAM NAME="CONSOLE" VALUE="video2">
</OBJECT>

Controlling Image Display

The following <EMBED> and <OBJECT> parameters control aspects of how clips play back.

BACKGROUNDCOLOR

This parameter specifies a background color that appears in the image window if no clip is playing. The specified background color also shows through if a clip includes transparency. The background color is black by default. You can use an RGB hexadecimal color value (#RRGGBB) or the following color names, shown here with their corresponding RGB values:

	Note
	SMIL region background colors override this background color. For more on setting SMIL region colors, see "Adding a Background Color".

CENTERED

The default value for CENTERED is false, which causes the clip to fill the entire playback area. If you set CENTERED to true, the clip is centered within the playback area and displays at its encoded size. So by setting CENTERED to true, you can create a large playback area with WIDTH and HEIGHT and still have the clip play at its normal size. You cannot use CENTERED along with MAINTAINASPECT.

MAINTAINASPECT

This parameter, which you cannot combine with CENTERED, determines whether the clip's height-to-width ratio stays constant when the clip scales to fit the image window. The default value of false causes this ratio to change as necessary to fill the image window fully. This may distort the source image.

If you set MAINTAINASPECT to true, a clip's height-to-width ratio stays constant. For example, a clip's height-to-width ratio of 1:1 stays constant even if the image window's height-to-width ratio is 2:3. In these cases, the clip is centered in the image window and scaled until one dimension reaches the window's boundaries and the other dimension is within the boundaries. The following figure shows how clips scale by default, with MAINTAINASPECT set to true, and with CENTERED set to true.

Clip Scaling with MAINTAINASPECT and CENTERED

NOLABELS

When you use a control that includes the Title, Author, and Copyright fields, you can include the NOLABELS option to suppress that information. Here is an example for the Netscape plug-in:

<EMBED ... CONTROLS=All NOLABELS=true>

and an example for the ActiveX control:

<OBJECT ...>
<PARAM NAME="CONTROLS" VALUE="All">
<PARAM NAME="NOLABELS" VALUE="true">
</OBJECT>

NOLOGO

When set to true, NOLOGO prevents the RealLogo from displaying in the image window. When no clip is playing, only the specified background color shows in the window. The parameter is false by default.

Setting Automatic Playback

The AUTOSTART, LOOP, and NUMLOOP parameters let you set the content to start playing automatically, as well as loop continuously or a specified number of times. The following example shows two of these parameters used with the Netscape plug-in:

<EMBED SRC="..." WIDTH=50% HEIGHT=50% AUTOSTART=true LOOP=true>

Here is an example for the ActiveX control:

<OBJECT ID=RVOCX CLASSID="..." WIDTH=50% HEIGHT=50%>
<PARAM NAME="SRC" VALUE="...">
<PARAM NAME="AUTOSTART" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
</OBJECT>

AUTOSTART

When set to true, the AUTOSTART parameter starts playback immediately. When you have multiple <EMBED> or <OBJECT> tags linked by a CONSOLE name, set AUTOSTART to true in just one tag. Leaving AUTOSTART out or setting its value to false means the presentation does not start until the user starts it by clicking an embedded Play button.

LOOP

If the LOOP parameter is set to true, the presentation continuously loops until the viewer stops it. When you have multiple <EMBED> or <OBJECT> tags linked by a CONSOLE name, set looping in just one tag. If you leave the LOOP parameter out, the default value of false applies and the presentation stops after the first playback. The user can play the presentation again by clicking the Play button.

NUMLOOP

If you specify a NUMLOOP value such "2", the presentation loops the specified number of times and then stops. If both LOOP and NUMLOOP are used, the LOOP parameter is ignored.

Working with SMIL Layouts

As "Laying Out Multiple Clips" explains, you can use a SMIL file to define separate playback regions for different parts of a presentation. This lets you lay out two videos side-by-side, for example. When playing a presentation in a Web page, you can define the layout in SMIL, or define it through the Netscape plug-in or ActiveX Control.

Defining the Layout with SMIL

Controlling the layout through SMIL is the easier method. You set up the regions and their relative placements in the SMIL file. You then use the Netscape plug-in or ActiveX control to create a playback region in the Web page large enough to accommodate all the regions. This SMIL file will then produce the same layout when played through the Web page or RealPlayer.

The sample layout shown in "SMIL Layout Example" defines three regions, creating a total playback area 430 pixels wide by 165 pixels high. To accommodate this in your Web page, you define an area at least as large as this through the <EMBED> or <OBJECT> tag. Here are examples for the Netscape plug-in:

<EMBED SRC="..." WIDTH=430 HEIGHT=165 CONTROLS=ImageWindow CONSOLE=_master>

and ActiveX control:

<OBJECT ID=RVOCX CLASSID="..." WIDTH=430 HEIGHT=165>
<PARAM NAME="SRC" VALUE="...">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="_master">
</OBJECT>

The SRC parameter provides the URL to the SMIL file. You can then use additional <EMBED> or <OBJECT> tags linked to the _master console to provide RealPlayer controls for the presentation.

Defining the Layout with the Plug-in or Control

The second method omits the <layout> tag from the SMIL file header. It simply associates each clip with a SMIL region. For example, you would modify the sample layout shown in "SMIL Layout Example" to look like the following:

<smil>
  <head>
    <!--presentation with 2 text clips and 1 video clip-->
    <meta name="title" content="Music of the Week"/>
  </head>
  <body>
    <par> 
       <!-- play these 3 clips simultaneously -->
       <textstream src="news.rt" region="newsregion"/>
       <video src="newsvid.rm" region="videoregion"/>
       <textstream src="stocks.rt" region="stockregion"/>
    </par>
  </body>
</smil>

You then define separate playback areas for each clip through <EMBED> or <OBJECT> tags, using REGION parameters to associate each tag with a SMIL region. For example, the <EMBED> tag that plays news.rt would look like this:

<EMBED SRC="http://realserver.company.com/ramgen/sample.smi?embed" 
WIDTH=250 HEIGHT=144 CONTROLS=ImageWindow 
REGION=newsregion CONSOLE=_master>

The <OBJECT> tag would look like this:

<OBJECT ID=RVOCX CLASSID="..." WIDTH=250 HEIGHT=144>
<PARAM NAME="SRC" VALUE="http://realserver.company.com/ramgen/sample.smi">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="REGION" VALUE="newsregion">
<PARAM NAME="CONSOLE" VALUE="_master">
</OBJECT>

You define a similar <EMBED> or <OBJECT> tag for each clip. The SRC parameter in each tag lists the same SMIL file. You can also use additional <EMBED> or <OBJECT> tags linked to the _master console to provide RealPlayer controls for the presentation.

	Note
	Keep in mind that this method works best when the presentation plays back in a Web page. The SMIL file will still work with RealPlayer, but because the file does not define the layout, RealPlayer automatically creates a layout, and the results may not be what you expect.

Using Advanced Parameters

The following are advanced parameters typically used when integrating the Netscape plug-in or ActiveX control into playback environments more complex than simple HTML Web pages.

AUTOGOTOURL

You can use the AUTOGOTOURL parameter if the presentation plays back within a Java applet or VisualBasic application. The parameter determines how URLs in the presentation are handled. The default value of true applies if you leave the parameter out. In this case any URL embedded in the presentation goes to the browser. If you set this parameter to false, RealPlayer sends the URL to the VisualBasic application or Java applet with the OnGotoURL() call.

NAME

NAME is an optional parameter for the Netscape plug-in <EMBED> tag:

<EMBED NAME=vid SRC="..." WIDTH=300 HEIGHT=134>

If you give the plug-in instance a name, you can refer to it through a JavaScript command such as this:

<Input Type="button" Value="play" onClick="document.vid.play()">

	Note
	With the ActiveX control, you refer to the ID instead of a name.

WINDOWED

This parameter is used with the Netscape plug-in only. Its default value is true. If you set WINDOWED=false in the <EMBED> tag, the plug-in is windowless. A windowless plug-in does not require a native window. It can be opaque or transparent and can be invoked in HTML layers.

	Additional Information
	See the Netscape developer reference at http://developer.netscape.com/library/documentation/communicator/plugin/index.htm.

Parameter Reference

<EMBED> and <OBJECT> Tag Parameters

Parameter	Function	Works with <EMBED>	Works with <OBJECT>	Values	Default
AUTOGOTOURL	Sends URLS to applet or VisualBasic application when set to false.	yes	yes	true|false	true
AUTOSTART	Sets autoplayback.	yes	yes	true|false	false
BACKGROUNDCOLOR	Sets background color.	yes	yes	color name or RGB hex value	black
CENTERED	Centers clip in window.	yes	yes	true|false	false
CONSOLE	Links multiple controls.	yes	yes	Console name or _master	(none)
CONTROLS	Adds RealPlayer controls.	yes	yes	Control name	All
HEIGHT	Sets window height.	yes	yes	percentage or pixel value	(none)
LOOP	Loops clips indefinitely.	yes	yes	true|false	false
MAINTAINASPECT	Keeps image aspect ratio.	yes	yes	true|false	false
NAME	Javascript reference.	yes	no	Any name	(none)
NOLABELS	Suppresses title, author, and copyright fields.	yes	yes	true|false	false
NOLOGO	Suppresses RealLogo.	yes	yes	true|false	false
NUMLOOP	Loops clip a given number of times.	yes	yes	Any number	(none)
REGION	Ties clip to SMIL region.	yes	yes	SMIL region	(none)
SRC	Specifies source clip.	yes	yes	URL	(none)
WIDTH	Sets window width.	yes	yes	percentage or pixel value	(none)
WINDOWED	Makes plug-in windowless when false.	yes	no	true|false	true

Copyright © 1998 RealNetworks
For information on RealNetworks' technical support, click here.
Comments on this document? Click here.
This file last updated on 09/04/98 at 17:20:43.