previous next

Chapter 7: Playing a Presentation in a Web Page

As Chapter 6 explains, playing your presentation back in RealPlayer simply requires a hypertext link from your Web page to a SMIL file. But you can also have a presentation play back directly in your Web page, even adding controls such as fast forward and pause.

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:

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

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, however, the tag syntax for the plug-in and the control differs. 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 causes RealPlayer to play the presentation back in the Web page. 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 presentation URLs, see "Linking your Web Page to your Presentation".

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.

CENTERED

The default value for CENTERED is false, which causes the media file to fill the entire playback area. If you set CENTERED to true, the media file is centered within the playback area and displays at its encoded size. So by using CENTERED=true, you can create a large playback area with WIDTH and HEIGHT and still have the media file play at its normal size.

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=300 HEIGHT=134 CONTROLS=PlayButton>

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


<OBJECT ID=RVOCX CLASSID="..." WIDTH=312 HEIGHT=140>
<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.

Standard pixel width: 400
Standard pixel height: 120

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/Pause and Stop.

Standard pixel width: none
Standard pixel height: none

Individual Controls and Sliders

ControlPanel

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

Standard pixel width: 400
Standard pixel height: 36

PlayButton

Displays the Play/Pause button.

Standard pixel width: 44
Standard pixel height: 26

PlayOnlyButton

Displays the Play button without Pause.

Standard pixel width: 26
Standard pixel height: 26

PauseButton

Displays the Pause button without Play.

Standard pixel width: 26
Standard pixel height: 26

StopButton

Displays the Stop button.

Standard pixel width: 26
Standard pixel height: 26

FFCtrl

Displays the Fast Forward control.

Standard pixel width: 26
Standard pixel height: 26

RWCtrl

Displays the Rewind control.

Standard pixel width: 26
Standard pixel height: 26

MuteCtrl

Displays the Mute control button.

Standard pixel width: 26
Standard pixel height: 26

MuteVolume

Displays the Mute control and volume slider.

Standard pixel width: 26
Standard pixel height: 88

VolumeSlider

Displays the volume slider.

Standard pixel width: 26
Standard pixel height: 65

PositionSlider

Displays the clip position slider.

Standard pixel width: 240
Standard pixel height: 22

Information Panels

TACCtrl

Displays the Title, Author, and Copyright control. See also "Suppressing Labels".

Standard pixel width: tbd
Standard pixel height: tbd

InfoVolumePanel

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

Standard pixel width: 300
Standard pixel height: 88

InfoPanel

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

Standard pixel width: 300
Standard pixel height: 88

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.

Standard pixel width: tbd
Standard pixel height: tbd

PositionField

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

Standard pixel width: tbd
Standard pixel height: tbd

StatusField

Displays the message text area of the status bar.

Standard pixel width: tbd
Standard pixel height: tbd

StatusBar

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

Standard pixel width: tbd
Standard pixel height: tbd

Suppressing Labels

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>

Using Multiple Controls

The CONSOLE parameter defines a name that unifies various <EMBED> or <OBJECT> tags so that the 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 separate tags, you can can set the size of each control and specify its layout. You could put each control in a different table cell, for example.

Each <EMBED> or <OBJECT> tag for a single presentation defines the same CONSOLE name, or uses one of these predefined names:

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

Notes on Using Consoles

Note the following when grouping multiple controls with CONSOLE attributes:

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. By using the predefined console name _master, the image window links 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.

Because each <EMBED> tag must have a source attribute, the image window in the Netscape plug-in example simply uses the same source as the first Play button. AUTOSTART is not used, however, so 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.

Netscape Plug-in Sample Mark-up


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

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

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

ActiveX Control Sample Mark-up


<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=50 HEIGHT=50>
<PARAM NAME="SRC" VALUE="http://realserver.company.com/sample1.rm">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
<PARAM NAME="CONSOLE" VALUE="video1">
</OBJECT>
<OBJECT ID=RVOCX CLASSID="..." WIDTH=50 HEIGHT=50>
<PARAM NAME="CONTROLS" VALUE="StopButton">
<PARAM NAME="CONSOLE" VALUE="video1">
</OBJECT>

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

Setting Automatic Playback

The AUTOSTART and LOOP parameters let you set the content to start playing automatically and loop continuously. Here is an example of both parameters used in the Netscape plug-in:


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

And 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 the content playing as soon as it loads. When you have multiple <EMBED> or <OBJECT> tags linked by a CONSOLE name, you need to set AUTOSTART to true in just one of the tags. Leaving AUTOSTART out or setting its value to false means the presentation does not start until the user starts it by, for example, clicking an embedded Play button.

LOOP

If this 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, you need to set looping in just one of the tags. The default value of false applies if you leave the loop parameter out. In this case the presentation stops after it plays the first time. The user can always play the presentation again, however, by clicking the Play button.

Working with SMIL Layouts

As "Laying Out Multiple Clips" explains, you can use your presentation's SMIL file to define separate playback regions for the multiple parts of a presentation. This lets you lay out two videos side-by-side, for example. When playing back a presentation in a Web page, you can define the layout in SMIL or 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 presentation file 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 files and 1 video file-->
<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 presentation file 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://www.company.com/sample.smi" 
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://www.company.com/sample.smi">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="REGION" VALUE="newsregion">
<PARAM NAME="CONSOLE" VALUE="_master">
</OBJECT>

You define an <EMBED> or <OBJECT> tag like these for each presentation file. 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.

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

The following table summarizes the <EMBED> and <OBJECT> tag parameters you can use.

ParameterWorks with
<EMBED>
Works with
<OBJECT>
Function
AUTOGOTOURL yes yes Sends URLS to applet or VisualBasic application when set to false.
AUTOSTART yes yes Starts playback automatically.
CENTERED yes yes Centers clip in playback area.
REGION
("Defining the Layout with the Plug-in or Control")
yes yes Associates clip with SMIL regions.
CONSOLE
("Using Multiple Controls")
yes yes Links multiple instances of a tag.
CONTROLS
("Adding RealPlayer Controls")
yes yes Adds RealPlayer controls to presentation.
LOOP yes yes Makes presentation loop continuously.
NAME yes no Provides reference for JavaScript.
NOLABELS
("Suppressing Labels")
yes yes Suppresses title, author, and copyright fields in controls.
SRC yes yes Specifies source file.
WIDTH and HEIGHT yes yes Sets size of playback area.
WINDOWED yes no Makes plug-in windowless when set to false.


Copyright © 1998 RealNetworks
For technical support on RealNetworks products, visit http://service.real.com/.
Comments on this document? Contact techpubs@real.com.
This file last updated on 05/20/98 at 16:52:01.
previous next