Chapter 8: Playing Clips in a Web Page

Embedding a presentation in a 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 add mark-up to a Web page so that people view your RealSystem G2 presentation directly through their Web browsers.

	Additional Information
	Refer to this chapter for full information on embedding a presentation. For a quick example of how to embed a video in a Web page, see "Embedding a RealVideo Clip in a Web Page".

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, 4.0, and higher.

• Microsoft Internet Explorer 3.0 and 4.0.

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

• Microsoft Internet Explorer 3.0 and 4.0.

• Any application that supports ActiveX controls, such as Visual Basic, Visual C++, Microsoft Access, and so on.

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 parameter you can set.

	Note
	Familiarity with RealPlayer and HTML will make it easier to use the plug-in or control. In the examples below, ellipses (...) indicate information left out to keep the examples short. Make sure your tags include all necessary information.

	Additional Information
	Embedded RealPlayer Extended Functionality Guide at http://service.real.com/help/library/index.html explains how to use JavaScript or VBScript to extend the functionality of the Netscape Plug-in or ActiveX 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, which is explained below, 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 gives the presentation's source URL surrounded by double quotes. The directory names cannot contain spaces. For the ActiveX control, the <OBJECT> tag's CLASSID parameter causes the presentation to play back in the Web page, so you can simply link to the SMIL file or clip within one <OBJECT> tag. When linking to a presentation on RealServer, the URL can use Ramgen, but this is not necessary:

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

When you use the Netscape plug-in, you need to include the SRC parameter in every <EMBED> tag. You can specify two types of URLs. The first uses the ?embed option to RealServer's Ramgen, which causes RealPlayer to play the clip or SMIL presentation through its Netscape plug-in instead of launching as a separate application:

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

	Additional Information
	For more on Ramgen and presentation URLs, see "Linking your Web Page to RealServer".

The second option is to create a Ram file with a .rpm extension and list this file in the SRC parameter without including Ramgen and the ?embed option. The Ram file then links to your SMIL file or clips. The following example links to a .rpm file on a Web server:

SRC="http://www.company.com/media/sample.rpm"

	Additional Information
	For instructions on writing a .rpm file, see "Creating a Ram File Manually".

You must create and link to a .rpm file in any of the following situations:

• Your RealServer does not use Ramgen.

• The SMIL file or clip is on a Web server.

• All files are located on a user's local computer rather than streamed over a network.

  	Note
  	When linking to local files, you can use relative links or absolute links. When you use absolute links with the Netscape plug-in, though, use forward slashes in paths. For example, instead of file://c:\media\first.rpm, set the source as file://c:/media/first.rpm.

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 media 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.

NOJAVA

Setting NOJAVA to true in every <EMBED> tag prevents the browser's Java Virtual Machine (JVM) from starting if it is not yet running:

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

This is recommended when using the Netscape plug-in because the JVM is not required for the <EMBED> parameters described in this chapter. Starting the JVM therefore delays presentation playback unnecessarily. The JVM is required only when extending plug-in functionality with JavaScript. In this case, omit NOJAVA entirely from the <EMBED> tags.

	Additional Information
	See Embedded RealPlayer Extended Functionality Guide at http://service.real.com/help/library/index.html for more information on controlling RealPlayer with JavaScript.

	Note
	Although you can include NOJAVA as an ActiveX parameter, it has no effect on Internet Explorer, which launches its JVM on browser start-up.

Adding RealPlayer Controls

With the CONTROLS parameter, you can place RealPlayer controls such as a play/pause button in 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 NOJAVA=true 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 suggested 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 adding more than one control to your Web page, see "Linking Multiple Controls".

	Tip
	If you have installed RealPlayer G2, you can view all the embedded controls.

Basic Controls

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. See also "Controlling Image Display".

All

Displays the basic RealPlayer control panel. The control name "default" also works. Buttons include play, pause, stop, fast forward, and rewind. Sliders include a position slider and a volume slider with mute button that pops up when the speaker button is clicked. Below the buttons are a clip information field, a status panel, a network congestion indicator, and a clip timing field.

Individual Controls and Sliders

ControlPanel

Displays the play, pause, stop, fast forward and rewind buttons. There's also a position slider, along with a volume slider and mute button that pops up when the speaker button is clicked.

PlayButton

Displays a play/pause button.

PlayOnlyButton

Displays a play button.

PauseButton

Displays a pause button.

StopButton

Displays a stop button.

FFCtrl

Displays a fast forward control.

RWCtrl

Displays a rewind control.

MuteCtrl

Displays a mute button.

MuteVolume

Displays a mute button and volume slider.

VolumeSlider

Displays a volume slider.

PositionSlider

Displays a clip position slider.

TACCtrl

Displays a clip information field. For instructions on formatting the clip playlist, see "Managing the Playlist".

HomeCtrl

Displays the Real™ logo.

Information Panels

InfoVolumePanel

Displays presentation information along with the volume slider and mute button. For more on presentation information, see "Adding Presentation Information". See also "NOLABELS".

InfoPanel

Displays the presentation information panel. For more on presentation information, see "Adding Presentation Information". See also "NOLABELS".

Status Panels

StatusBar

Displays the status panel, which shows informational messages. It also includes the network congestion LED and the position field, which shows current place in the presentation timeline along with total clip length.

	Note
	The status bar is included in the All control. If you do not embed a status bar or status field in your page, error messages display in the browser's status bar.

StatusField

Displays the message text area of the status bar. If you do not embed a status field or status bar in your page, error messages display in the browser's status bar.

PositionField

Displays the position field, which shows the clip's current place in the presentation timeline and the total clip length.

Linking 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 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 the control to all other embedded controls on the page.

_unique links the control 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 video1 volume slider, for example, will not affect the volume of a video2 clip.

Tips for 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:8080/ramgen/sample1.rm?embed" 
WIDTH=176 HEIGHT=128 NOJAVA=true CONTROLS=ImageWindow CONSOLE=_master>

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

<H4>Video 2</H4>
<EMBED SRC="http://realserver.company.com:8080/ramgen/sample2.rm?embed" 
WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton CONSOLE=video2> 
<EMBED SRC="http://realserver.company.com:8080/ramgen/sample2.rm?embed" 
WIDTH=26 HEIGHT=26 NOJAVA=true 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:8080/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:8080/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 for the image window. 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".

CENTER

The default value for CENTER is false, which causes the clip to fill the entire playback area. If you set CENTER to true, the clip is centered within the playback area and displays at its encoded size. So by setting CENTER 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 CENTER along with MAINTAINASPECT.

MAINTAINASPECT

This parameter, which you cannot combine with CENTER, 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 CENTER set to true.

Clip Scaling with MAINTAINASPECT and CENTER

NOLABELS

When you use a control that includes presentation information such as title, author, and copyright, you can include the NOLABELS option to suppress that information in RealPlayer 5.0. This option has no effect on RealPlayer G2. 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>

	Additional Information
	"Parameter Reference" lists the options that work with RealPlayer 5.0.

NOLOGO

When set to true, NOLOGO prevents the Real logo 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 for 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% NOJAVA=true 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, for example, 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 as "2", the presentation loops the specified number of times and then stops. If both LOOP and NUMLOOP are used, the LOOP parameter is ignored.

SHUFFLE

The SHUFFLE parameter is for use only with Ram or SMIL files that list a single sequence of clips. When set to true, SHUFFLE makes RealPlayer play back the clips in a random order.

Laying out SMIL Presentations

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 clips side-by-side, for example. When playing a presentation in a Web page, you can define the layout in SMIL or in HTML.

Defining the Layout with SMIL

To control the layout through SMIL, 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 regions. This SMIL file then produces 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 image window 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 NOJAVA=true CONTROLS=ImageWindow CONSOLE=one>

and ActiveX control:

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

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

	Additional Information
	If you have installed RealPlayer G2, click here to see a demonstration with a SMIL layout embedded in a Web page. Click here to see the same demonstration play in RealPlayer.

Defining the Layout with HTML

The second method omits SMIL layout information and defines the layout through HTML. You could place an image window and separate RealPlayer controls in an HTML table, for example. Each <EMBED> or <OBJECT> tags then uses a REGION parameter to define a region name. Clip source tags within the SMIL file list which region each clip plays in. For example, the SMIL file shown in "SMIL Layout Example" lists the following RealText file, set to play in the newsregion region:

<textstream src="news.rt" region="newsregion"/>

Within the HTML page, the <EMBED> tag that plays news.rt would look like this:

<EMBED SRC="http://realserver.company.com:8080/ramgen/sample.smil?embed" 
WIDTH=250 HEIGHT=144 NOJAVA=true CONTROLS=ImageWindow 
REGION=newsregion CONSOLE=one>

The <OBJECT> tag would look like this:

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

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

	Additional Information
	If you have installed RealPlayer G2, click here to see a SMIL demonstration embedded in a Web page with an HTML layout.

Omitting SMIL Layout Information

When you define the presentation layout through HTML, you must omit the <layout> section from the SMIL file header. For example, the SMIL file shown in "SMIL Layout Example" would not have a <layout> section:

<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>

	Tip
	A SMIL file without a layout still works with RealPlayer G2, but RealPlayer automatically creates the layout, and the results may not be what you expect. Always include a SMIL layout when playing a presentation directly in RealPlayer.

	Note
	Because there is no SMIL layout, hot spot links are ignored. You can make media clips hyperlinks with the SMIL <a>...</a> tags, however. For more on SMIL hyperlinks, see "Linking to Other Media".

Parameter Reference

The following table lists the <EMBED> and <OBJECT> tag parameters. Parameters compatible with RealPlayer 5.0 are indicated in the "5.0?" column. To have an embedded presentation play back with RealPlayer 5.0 as well as RealPlayer G2, use only 5.0-compatible parameters.

Copyright © 1998-1999 RealNetworks
For information on RealNetworks' technical support, click here.
Comments on this document? Click here.
This file last updated on 06/21/99 at 10:44:37.