previous next

Chapter 20: Web Page Embedding

With embedded playback, you can weave your clips through your Web page's text and graphics, and add controls such as stop and start buttons. It's as if you took RealOne Player apart and placed its pieces at different spots on your page. This chapter explains how to add markup to a Web page so that people can view your streaming presentation directly through their Web browsers.

Understanding Web Page Embedding

To add media in your Web page, you first produce your clips. You can even use SMIL to coordinate multiple clips. You then embed your presentation by adding <EMBED> and, optionally, <OBJECT> tags to your Web page. You can use HTML markup or style sheets to place your clips, along with various RealOne Player controls, anywhere on your page. The following sections provide an overview of Web page embedding, and describe its disadvantages compared to displaying media in RealOne Player's three-pane environment.

Embedding vs. the Three-Pane Environment

Although Web page embedding is a popular way to integrate media with HTML content, displaying your presentation in RealOne Player's native three- pane environment provides a simpler means for coordinating media and HTML pages. So, before you embed a presentation, determine if the native RealOne Player environment suits your needs better. For the content author, the three-pane environment provides the following advantages:

For the presentation viewer, using the three-pane environment provides several advantages as well:

<EMBED> and <OBJECT> Tags

You can embed a RealOne Player presentation in a Web page using <EMBED> tags, <OBJECT> tags, or both. When you use <EMBED>, your presentation will work in browsers that support the Netscape plug-in architecture, including the following:

Using <EMBED> tags allows you to reach the widest Internet audience, and this chapter's examples primarily use just <EMBED> tags. However, can also use <OBJECT> tags, which provide playback capabilities within these products:

As the section "Using <OBJECT> Tags" explains, you can combine <EMBED> and <OBJECT> tags in your Web page, which is a production technique used by many Web professionals.

Layout Possibilities

When you embed a presentation, you use HTML to structure your Web page and define where each streaming clip and RealOne Player control appears. A common practice is to define an HTML table, embedding clips and RealOne Player controls in various table cells. When you embed a SMIL presentation, you can define a layout using SMIL and HTML, or just HTML alone.

Defining a Layout with SMIL and HTML

As described in Chapter 12, you can use SMIL to define an overall size for the media playback pane (the root-layout). You might create a layout that is 400 pixels wide by 300 pixels high, for example, and define smaller regions within that main area for clips. You then embed the entire playback area within your Web page using a single <EMBED> tag, adding RealOne Player controls around it with separate <EMBED> tags. All clips then appear within that 400-by-300 pixels area, just as they would when played in RealOne Player. In fact, your SMIL file can play in both your Web page and RealOne Player.

For More Information: See "Defining the Layout with SMIL".

Defining a Layout with HTML Alone

You can leave layout information out of your SMIL file, and use SMIL simply to define your presentation timing and other playback features. In your Web page, you then create a separate <EMBED> or <OBJECT> tag for each clip, placing each clip anywhere on your page. In this case, all clips do not need to appear within a rectangular root-layout area. This gives you more layout flexibility than when defining the overall clip layout through SMIL. However, because your SMIL file lacks layout information, it may have unexpected layout results if played directly in RealOne Player.

For More Information: See "Defining the Layout with HTML".

RealOne Player Controls

In addition to clips, you can embed many different RealOne Player buttons, sliders, and information panels in your Web page. You might include separate start, stop, and pause buttons in your Web page, for example. Or, you could add entire control panels that contain multiple buttons and readouts. You can make these controls any size you want, too, giving you even more layout flexibility. The section "Adding RealOne Player Controls" explains all the available controls.

Javascript and VBScript

RealOne Player supports Javascript, which enables you to extend the <EMBED> tag capabilities to turn your own graphic image into a RealOne Player Play button, for example. RealOne Player's ActiveX control also provides playback capabilities for the products that support <OBJECT> tags. This guide does not explain these scripting capabilities. For information on using Javascript or VBScript, see RealOne Player Scripting Guide, which is available for download from the following Web page:

http://service.real.com/help/library/encoders.html

Using <EMBED> Tags

Each <EMBED> tag has three required parameters, and can include many optional parameters, which are described throughout this chapter. The following table lists the parameters to include in every <EMBED> tag.

Basic <EMBED> Tag Parameters
Parameter Value Function Reference
HEIGHT pixels Sets the height of the clip or control. click here
NOJAVA false|true Keeps the Java virtual machine from starting. click here
SRC filename.rpm Locates the Ram file (.rpm). click here
WIDTH pixels Sets the width of the clip or control. click here

A basic <EMBED> tag looks like the following, which creates a playback area 320 pixels wide by 240 pixels high within the Web page:

<EMBED SRC="presentation.rpm" WIDTH=320 HEIGHT=240 NOJAVA=true>

You add to your Web page one <EMBED> tag for each playback window you want in your page, and one <EMBED> tag for each control, such as a Stop button, that you want to include.

Setting <EMBED> Tag Parameters

<EMBED> tags are an extension of HTML. Because they are not SMIL tags, they do not use the same syntax rules as SMIL. The <EMBED> tag parameters are typically in this form:

PARAMETER=value

Parameter names can be any case, although this guide shows them uppercase. Except for file names, parameter values are not case-sensitive. Unless they are URLs, parameter values do not need to be enclosed in quotation marks.

Specifying the Source

You must include the SRC parameter in every <EMBED> tag, even when the tag embeds a RealOne Player control instead of a clip. However, you don't specify a clip or SMIL file directly with SRC. Instead, you specify a Ram file that has a .rpm extension. This causes the browser to use RealOne Player as a helper application, rather than to launch it as a separate program. The .rpm file is a simple text file that gives the full URL to your clip or SMIL file.

For More Information: For information about Ram file syntax, see "Launching RealOne Player with a Ram File".

Developing Your Presentation

The easiest means for developing your embedded presentation is to keep your clips in the same folder as your Web page on your desktop computer. Your <EMBED> tag can then link to a .rpm file in that folder:

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

To embed a single video, for example, the .rpm file simply contains a local file URL to the clip (the file:// protocol designation is required):

file://video.rm

Warning! For embedded playback to work with Netscape Navigator 6, the path to the .rpm file on a server or your local computer cannot contain spaces or even escape codes for spaces (%20). This causes Navigator 6 to search for a missing plug-in.

Delivering Your Presentation

When you are ready to deliver your presentation to your audience, move your files to their respective servers and change the URLs in your files. Note that directory paths cannot contain spaces.

Keeping the .rpm File and the Web Page Together

If you plan to keep the .rpm file with the Web page, you do not need to change the SRC values in your <EMBED> tags. You can simply transfer your .rpm file and your Web page to the same directory on your Web server.

Putting the .rpm File and the Web Page in Different Locations

If you move the .rpm file to a different directory than that Web page, link each <EMBED> tag's SRC parameter to the .rpm file with a full HTTP URL:

SRC="http://www.example.com/media/presentation.rpm"

Linking to Streaming Clips

No matter where you put your .rpm file and your clips, modify the .rpm file to give the fully-qualified URL to the embedded clip or SMIL file. If the clip or SMIL file is on a Web server, use an HTTP URL. If the clip or SMIL file is on Helix Universal Server, use an RTSP URL.

Tip: Always use a full URL in the .rpm file, even if all files and clips are in the same directory on a Web server. RealOne Player uses the .rpm file to locate the clip or presentation. Without a fully-qualified URL, RealOne Player must construct the location from the original Web page URL and the information in the .rpm file. This creates more possibility for errors.

For More Information: For more information on URLs in .rpm files, see "Launching RealOne Player with a Ram File". The section "The Difference Between RTSP and HTTP" explains why Helix Universal Server uses the RTSP protocol instead of a Web server's HTTP protocol.

Linking to Local Clips

If you will make your presentation available to people on their local machines (through a download or a CD, for instance), you do not need to change any URLs from those described in "Developing Your Presentation". In rare cases, though, you may want to use an absolute link, rather than a relative link, in the .rpm file. When writing absolute links, use forward slashes in paths to create "Web style" paths. For example, instead of this URL:

file://c:\media\presentation.rpm

use the following URL, which includes three forward slashes in file:///, and uses forward slashes in path names as well:

file:///c:/media/presentation.rpm

Using Helix Universal Server's Ramgen to Eliminate the Ram File

When your embedded clips reside on a Helix Universal Server that uses the Ramgen feature, you can eliminate the .rpm file when you deliver your presentation. Your SRC parameter uses an HTTP URL to the clip or SMIL file on Helix Universal Server, and includes a /ramgen/ parameter along with the ?embed option:

SRC="http://helixserver.example.com:8080/ramgen/sample.smil?embed"

The HTTP protocol is required because a browser cannot make an RTSP request. When /ramgen/ and the ?embed parameter are used, though, Helix Universal Server causes the browser to start RealOne Player as a helper application, then streams the clip or SMIL file to RealOne Player using RTSP. Consult your Helix Universal Server administrator for the correct URL to your Helix Universal Server.

For More Information: For details on using the Ramgen option, see "Using Ramgen for Clips on Helix Universal Server".

Setting the Width and Height

Required for each <EMBED> tag, the WIDTH and HEIGHT parameters set the size of the playback area. If you omit these parameters, the playback area may appear as a tiny icon because streaming media presentations do not resize themselves 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 width of the presentation area half the width of the browser window. Keep in mind that different types of media scale with different results. For example, a video scaled to a different width-to-height ratio may not look good. Vector-based clips such as Flash animations, on the other hand, scale more easily to fit different playback areas.

Turning off the Java Virtual Machine

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

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

This parameter primarily affects Netscape Navigator 4, which does not launch its JVM until it's needed. The parameter is recommended because starting the JVM delays presentation playback unnecessarily. The parameter has no effect on Internet Explorer, or Navigator 6 or later.

Note: The JVM is required only when you are extending plug-in functionality with Javascript. In this case, omit NOJAVA entirely from the <EMBED> tags. See "Javascript and VBScript" for more information about using Javascript with the <EMBED> tag.

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="presentation.rpm" WIDTH=320 HEIGHT=240>
<NOEMBED><A HREF="presentation.ram">Play with RealOne Player. </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 only the hypertext link. The viewer then clicks the link to play the presentation in RealOne Player.

Using <OBJECT> Tags

Although using just <EMBED> tags for RealOne Player presentations provides compatibility with both major browsers, you can combine <OBJECT> tags along with <EMBED> tags. This is a common practice used by Web developers when working with helper applications that, unlike RealOne Player, do not use ActiveX technology when Web pages with <EMBED> tags are rendered by Internet Explorer.

An <OBJECT> tag uses an ID that you select, such as ID=RVOCX, and it must have the following class ID, which identifies RealOne Player:

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

As with the <EMBED> tag, the <OBJECT> tag also sets the width and height of the playback area within the browser. The following <OBJECT> tag creates a playback area 300 pixels wide by 134 pixels high within the Web page:

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

Setting <OBJECT> Tag Parameters

The <OBJECT> tag uses the same parameters as an <EMBED> tag, with the exception that the NOJAVA parameter is not required. With an <EMBED> tag, you set all parameters within the tag. With <OBJECT>, however, you specify each parameter (aside from ID, CLASSID, WIDTH, and HEIGHT) in a separate <PARAM> tag that falls between <OBJECT> and </OBJECT>:

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

PARAM, NAME, and VALUE markers can be any case, although in this chapter they are uppercase. Except for file names, parameter values are not case-sensitive. Always enclose parameter values in double quotation marks.

Specifying the Source

For the <OBJECT> tag's SRC parameter, you can specify a .rpm file the same as you do with an <EMBED> tag. This is not necessary, however, because the <OBJECT> tag's CLASSID parameter causes the presentation to play in a Web page. Hence, you can simply link to the SMIL file or clip within just one <OBJECT> tag on the page, using the appropriate protocol, whether HTTP or RTSP. (In contrast, each <EMBED> tag must include the same SRC parameter.)

Note: Although you can use a Ramgen URL in a SRC parameter for the <OBJECT> tag, it is not necessary because the CLASSID parameter launches RealOne Player whether or not you use Ramgen.

Combining <EMBED> with <OBJECT>

If you combine <EMBED> and <OBJECT> tags, Internet Explorer browsers on Windows play the presentation defined through <OBJECT>, while Netscape Navigator browsers on all platforms, as well as Internet Explorer on the Macintosh, play the presentation defined through <EMBED>. To combine the tags, place an <EMBED> tag containing all necessary parameters between the <OBJECT> and </OBJECT> tags, as shown in the following example:

<OBJECT ID=RVOCX CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 
WIDTH=320 HEIGHT=240>
<PARAM NAME="SRC" VALUE="plugin.rpm">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="one">
<EMBED SRC="plugin.rpm" WIDTH=320 HEIGHT=240 NOJAVA=true
CONTROLS=ImageWindow CONSOLE=one>
</OBJECT>

Adding RealOne Player Controls

With the CONTROLS parameter, you can add RealOne Player controls such as a play/pause button to your Web page. For example, the following tag displays the play/pause button in your Web page:

<EMBED SRC="presentation.rpm" WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>

The following sections describe the embedded RealOne Player controls. You use an <EMBED> or <OBJECT> tag's WIDTH and HEIGHT parameters to set the control's size. Specifying different pixel sizes other than the suggested values scales the controls larger or smaller. You can also use percentage values for sizes, but this is recommended only for the image window.

For More Information: When adding more than one control to your Web page, see also "Linking Multiple Controls".

Tip: Unless noted otherwise, all the controls listed below are compatible with RealPlayer G2, RealPlayer 7, and RealPlayer 8. With those versions of RealPlayer, however, the controls take on a different appearance.

View it now! (requirements for viewing this sample)
Play this sample to view all the embedded controls using just <EMBED> tags. The next sample displays all of the embedded controls using combined <OBJECT> and <EMBED> tags.

Basic Controls

ImageWindow

The CONTROLS=ImageWindow parameter displays a playback window. This control is not required for audio-only presentations. Even if no other controls are visible on the page, the user can typically right-click (on Windows) or hold down the mouse button (on the Macintosh) in the playback area to display a menu of choices such as Play and Stop. See also "Controlling Image Display".

Suggested pixel width: 176 or greater
Suggested pixel height: 132 or greater

All

The CONTROLS=All parameter displays the basic RealOne Player control panel. The control name "default" also works. Functions include play/pause, stop, fast-forward, and rewind. Sliders include a position slider and a volume slider with a 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.

Suggested pixel width: 375
Suggested pixel height: 100

If you set the size of this control panel to less than the recommended width or height, the panel drops certain controls instead of squeezing all of the controls down to a smaller size. This lets you add the control panel to small pop-up windows, for example, without the controls becoming difficult to use. This works for RealOne Player, but not earlier versions of RealPlayer.

Width less than 336 pixels: network congestion indicator dropped
Width less than 306 pixels: clip timing field dropped
Width less than 226 pixels: Clip Info label, rewind and fast-forward buttons dropped
Width less than 174 pixels: RealOne logo dropped
Height less than 81 pixels: clip information field dropped

View it now! (requirements for viewing this sample)
This sample lets you see the full control panel at different sizes.

Individual Controls and Sliders

ControlPanel

Use CONTROLS=ControlPanel to display a compact RealOne Player control panel. Functions include play/pause, stop, fast-forward and rewind. There's also a position slider, along with a volume slider and mute button that pops up when the speaker button is clicked.

Suggested pixel width: 350
Suggested pixel height: 36

If you set the size of this control to less than the recommended width, the panel drops certain buttons instead of squeezing all of the buttons down to a smaller size. This works for RealOne Player, but not earlier versions of RealPlayer.

Width less than 220 pixels: rewind and fast-forward buttons dropped
Width less than 168 pixels: RealOne logo dropped

View it now! (requirements for viewing this sample)
This sample lets you see this control panel at smaller sizes.

PlayButton (also PlayOnlyButton)

The CONTROLS=PlayButton parameter displays a play button. This turns into a pause button when the presentation plays. If your presentation is accessible to RealPlayers earlier than the RealOne Player, use CONTROLS=PlayOnlyButton instead. In earlier RealPlayers, the PlayButton control includes both play and pause buttons, whereas the PlayOnlyButton control includes just the play button as shown here. Using PlayOnlyButton therefore ensures backwards compatibility.

Suggested pixel width: 36
Suggested pixel height: 26

PauseButton

The CONTROLS=PauseButton parameter displays a pause button. Because the PlayButton control turns into a pause button as a presentation plays, the PauseButton control is generally not necessary with RealOne Player. To ensure backwards compatibility with earlier versions of RealPlayer, however, use both the PlayOnlyButton and the PauseButton controls.

Suggested pixel width: 26
Suggested pixel height: 26

StopButton

The CONTROLS=StopButton parameter displays a stop button.

Suggested pixel width: 26
Suggested pixel height: 26

FFCtrl

The CONTROLS=FFCtrl parameter displays a fast-forward button.

Suggested pixel width: 26
Suggested pixel height: 26

RWCtrl

The CONTROLS=RWCtrl parameter displays a rewind button.

Suggested pixel width: 26
Suggested pixel height: 26

MuteCtrl

The CONTROLS=MuteCtrl parameter displays a mute button.

Suggested pixel width: 26
Suggested pixel height: 26

MuteVolume

The CONTROLS=MuteVolume parameter displays a mute button and volume slider.

Suggested pixel width: 26
Suggested pixel height: 88

VolumeSlider

The CONTROLS=VolumeSlider parameter displays a volume slider.

Suggested pixel width: 26
Suggested pixel height: 65

PositionSlider

The CONTROLS=PositionSlider parameter displays a clip position slider.

Suggested pixel width: 120
Suggested pixel height: 26

TACCtrl

The CONTROLS=TACCtrl parameter displays an information field. Clip or presentation information scrolls vertically through this field when the clip first plays. The viewer can redisplay this information by clicking the arrow button. Clicking the "i" button displays the full presentation information in a pop-up window. With RealOne Player, the Clip Info field is dropped if you set the width of the TACCtrl to less than 220 pixels.

Suggested pixel width: 370
Suggested pixel height: 32

For More Information: For instructions on defining clip or presentation information, see Chapter 10.

View it now! (requirements for viewing this sample)
This sample lets you see this information field at a smaller size.

HomeCtrl

The CONTROLS=HomeCtrl parameter displays the RealOne Player logo, which is linked to the RealNetworks Web site. In earlier versions of RealPlayer, this control displays the Real™ logo.

Suggested pixel width: 30
Suggested pixel height: 30

Information Panels

InfoVolumePanel

Use CONTROLS=InfoVolumePanel to display presentation information along with the volume slider and mute button. For more on presentation information, see "Defining Information for the SMIL Presentation".

Suggested pixel width: 325
Suggested pixel height: 55

InfoPanel

The CONTROLS=InfoPanel parameter displays the presentation information panel. For more on presentation information, see "Defining Information for the SMIL Presentation".

Suggested pixel width: 300
Suggested pixel height: 55

Status Panels

StatusBar

The CONTROLS=StatusBar parameter displays the status panel, which shows informational messages. It also includes the network congestion LED and the position field, which shows the clip's current place in the presentation timeline, along with the total clip length.

Suggested pixel width: 335
Suggested pixel height: 30

If you set the width of the status bar lower than the recommended width, the panel drops fields instead of squeezing all of the fields down to a smaller size. This works for RealOne Player, but not earlier versions of RealPlayer.

Width less than 330 pixels: network congestion indicator dropped
Width less than 300 pixels: clip timing field dropped

View it now! (requirements for viewing this sample)
This sample lets you see the status panel at smaller sizes.

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

The CONTROLS=StatusField parameter 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.

Suggested pixel width: 200
Suggested pixel height: 30

PositionField

The CONTROLS=PositionField parameter displays the position field, which shows the clip's current place in the presentation timeline, along with the total clip length.

Suggested pixel width: 90
Suggested pixel height: 30

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 the entire 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 the console names video1 and video2. All controls linked by video1 interoperate, as do all controls linked by video2. But a video1 volume slider, for example, will not affect the volume of a video2 clip.

Tips for Using Consoles

Multiple Controls Example

The following example sets up an image window and two sets of controls (a play button and stop button) for two separate videos, video1.rm and video2.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.

Because each <EMBED> tag must have a SRC value, the image window in the following example 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 one:

<EMBED SRC="video1.rpm" CONSOLE=_master WIDTH=176 HEIGHT=128 NOJAVA=true CONTROLS=ImageWindow>
<H4>Video 1</H4>
<EMBED SRC="video1.rpm" CONSOLE=video1 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="video1.rpm" CONSOLE=video1 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>
<H4>Video 2</H4>
<EMBED SRC="video2.rpm" CONSOLE=video2 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="video2.rpm" CONSOLE=video2 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>

View it now! (requirements for viewing this sample)
This sample lets you play two videos linked to different controls, but displaying in the same image window.

Controlling Image Display

The <EMBED> parameters summarized in the following table control aspects of how clips in an image window play.

Parameters for Image Display
Parameter Value Default Function Reference
BACKGROUNDCOLOR name|#RRGGBB black Sets a window color. click here
CENTER false|true false Centers the clip. click here
MAINTAINASPECT false|true false Determines clip scaling. click here
NOLOGO false|true false Suppresses the logo. click here

The following example shows two of these parameters used in an <EMBED> tag:

<EMBED SRC="presentation.rpm" WIDTH=50% HEIGHT=50% NOJAVA=true BACKGROUNDCOLOR=gray CENTER=true>

Setting a Background Color

The BACKGROUNDCOLOR parameter specifies a background color for the image window. The specified color shows through the clip if a clip uses transparency. The background color is black by default. You can use a hexadecimal color value (#RRGGBB) or one of the following color names, shown here with their corresponding hexadecimal values:

white (#FFFFFF)silver (#C0C0C0)gray (#808080)black (#000000)
yellow (#FFFF00)fuchsia (#FF00FF)red (#FF0000)maroon (#800000)
lime (#00FF00)olive (#808000)green (#008000)purple (#800080)
aqua (#00FFFF)teal (#008080)blue (#0000FF)navy (#000080)

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

Tip: Appendix C provides background on hexadecimal color values. Note, though, that the <EMBED> and <OBJECT> tags do not support rgb(n,n,n) color values that you can use with SMIL.

Centering a Clip

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 is displayed 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.

Maintaining a Clip's Aspect Ratio

The MAINTAINASPECT parameter, which you cannot combine with CENTER, determines whether the clip's width-to-height 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 width-to-height ratio stays constant. For example, a clip's width-to-height ratio of 1:1 stays constant even if the image window's width-to-height ratio is 3:2. 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 illustration shows how clips scale by default, with MAINTAINASPECT set to true, and with CENTER set to true.

Clip Scaling with MAINTAINASPECT and CENTER

Clip Scaling with MAINTAINASPECT and CENTER

Suppressing the RealOne Logo

When set to true, NOLOGO prevents the RealOne logo from displaying in the image window before clips play. When there are no clips playing, only the specified background color shows in the window. The parameter is false by default.

Setting Automatic Playback

The parameters listed in the following table can cause a presentation to start playing automatically, and to loop continuously or for a specified number of times.

Parameters for Automatic Playback
Parameter Value Default Function Reference
AUTOSTART false|true false Starts presentation automatically. click here
LOOP false|true false Creates a continuous playback loop. click here
NUMLOOP integer 1 Loops playback a set number of times. click here
SHUFFLE false|true false Sets shuffle play for a sequence of clips. click here

The following example shows two of these parameters in an <EMBED> tag:

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

Starting a Presentation Automatically

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 that the presentation will not start until the user starts it by clicking an embedded play button, for example.

Looping a Presentation Continuously

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

Tip: The LOOP or NUMLOOP parameters will make an entire SMIL presentation repeat. Within a SMIL file, you can use the repeatDur and repeatCount attributes to repeat individual clips or groups. For more information, see "Repeating an Element".

Specifying a Number of Loops

If you specify a parameter such as NUMLOOP=2, the presentation plays the specified number of times and then stops. If you use both LOOP and NUMLOOP, the LOOP parameter is ignored.

Setting Shuffle Play

The SHUFFLE parameter is for use only with Ram or SMIL files that list a single sequence of clips. When set to true, SHUFFLE causes RealOne Player to play the clips in a random order. If you use this parameter with LOOP or NUMLOOP, each loop may use a different playback order.

For More Information: For information on SMIL sequences, see "Playing Clips in Sequence". For more on Ram file sequences, see "Writing a Basic Ram File".

Laying Out SMIL Presentations

As explained in Chapter 12, you can use SMIL to define separate playback regions for different parts of a presentation. This lets you lay out two clips side-by-side, for example. When embedding a SMIL presentation in a Web page, you can define the layout in SMIL or in HTML. Defining the layout in SMIL lets you play all the clips together in a single, embedded window. Using an HTML layout lets you place clips at different spots on the Web page.

Note, too, that a SMIL presentation can open clips in secondary, pop-up media windows, as well as display HTML pages in RealOne Player's media browser and related info panes. These features work with embedded presentations, too. However, because the media browser and related info panes are not present with an embedded presentation, all HTML pages meant for these panes display in a new window of the viewer's Web browser.

For More Information: The section "Linking to HTML Pages" explains how to open an HTML page through SMIL.

Defining the Layout with SMIL

To control the layout by using SMIL, you set up the regions and their relative placements in the SMIL file. You then create a Web page playback area large enough to accommodate all SMIL regions. The SMIL file then produces the same layout when played through the Web page or RealOne Player. For example, if your SMIL file creates a playback area 400 pixels wide by 300 pixels high, you define an image window at least as large as this with the <EMBED> or <OBJECT> tag, as shown in the following example:

<EMBED SRC="presentation.rpm" WIDTH=400 HEIGHT=300 NOJAVA=true CONTROLS=ImageWindow CONSOLE=one>

You can then use additional <EMBED> tags linked to the console named one to provide RealOne Player controls for the presentation.

Tip: Typically, your image window is the same size as your SMIL root-layout area, which is described in the section "Root- Layout Area".

View it now! (requirements for viewing this sample)
Click this sample to see a presentation with a SMIL layout embedded in a Web page. You can also view the same presentation in RealOne Player.

Defining the Layout with HTML

The second method omits layout information in the SMIL file, defining the layout with HTML instead. You could place each clip that plays in a SMIL presentation in a separate cell of an HTML table, for example. Each <EMBED> or <OBJECT> tag then uses a REGION parameter to define a region name. The region each clip plays in is denoted by the region attribute in the SMIL clip source tag:

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

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

<EMBED SRC="presentation.rpm" WIDTH=250 HEIGHT=144 NOJAVA=true 
CONTROLS=ImageWindow REGION=newsregion CONSOLE=one>

You define similar <EMBED> 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 RealOne Player controls for the presentation.

For More Information: The section "Assigning Clips to Regions" explains the use of region attributes in SMIL clip source tags.

View it now! (requirements for viewing this sample)
Play this sample to see a SMIL presentation with an HTML layout.


RealNetworks, Inc. ©2002 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks
Click here if the Table of Contents frame is not visible at the left side of your screen.
previous next