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.
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. |
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.
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.
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.
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.
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". |
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.
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.
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". |
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 |
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 |
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 |
Displays the Play/Pause button.
Standard pixel width: | 44 |
Standard pixel height: | 26 |
Displays the Play button without Pause.
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Displays the Pause button without Play.
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Displays the Fast Forward control.
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Displays the Mute control button.
Standard pixel width: | 26 |
Standard pixel height: | 26 |
Displays the Mute control and volume slider.
Standard pixel width: | 26 |
Standard pixel height: | 88 |
Standard pixel width: | 26 |
Standard pixel height: | 65 |
Displays the clip position slider.
Standard pixel width: | 240 |
Standard pixel height: | 22 |
Displays the Title, Author, and Copyright control. See also "Suppressing Labels".
Standard pixel width: | tbd |
Standard pixel height: | tbd |
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 |
Displays the Title, Author, and Copyright information panel. See also "Suppressing Labels".
Standard pixel width: | 300 |
Standard pixel height: | 88 |
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 |
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 |
Displays the message text area of the status bar.
Standard pixel width: | tbd |
Standard pixel height: | tbd |
Displays the status field, position field, and channels (stereo/mono).
Standard pixel width: | tbd |
Standard pixel height: | tbd |
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>
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:
_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 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.
Note the following when grouping multiple controls with CONSOLE attributes:
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.
<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>
<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>
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>
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.
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.
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.
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>
<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.
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.
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.
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 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. |
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. |
The following table summarizes the <EMBED> and <OBJECT> tag parameters you can use.
Parameter | Works 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. |