Sample code to embed Realplayer in a webpage:

This sample code will embed a single image window on the page, and two sets of controls for playing either of two clips in that window (to embed a single clip only, simply leave out the third code group). The first frame of the first clip listed will initially be displayed in the image window, but none will play automatically. The controls for each of the clips can also be broken into individual objects and placed freely anywhere on the page (even in frames), as long as they are linked by a common console parameter. The image window uses console="_master" to play all the clips. It must be big enough for all your clips!

<object id="myMovie" classid="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" height="250" width="540">
<param name="controls" value="ImageWindow">
<param name="console" value="_master">

<param name="center" value="true">
<embed name="myMovie" src="http://realmedia.uic.edu/ramgen/itltv/bbintro.30jan02.smil?embed" height="250" width="540" nojava="true" controls="ImageWindow" console="_master" center="true" pluginspage="http://www.real.com/"></embed>
</object>

<br>

<object id="myMovie" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="540" height="100">
<param name="src" value="rtsp://realmedia.uic.edu/itltv/bbintro.30jan02.smil">

<param name="console" value="video1">
<param name="controls" value="All">
<param name="autostart" value="false">
<param name="loop" value="false">

<embed name="myMovie" src="http://realmedia.uic.edu/ramgen/itltv/bbintro.30jan02.smil?embed" height="100" width="540" autostart="false" loop="false" nojava="true" console="video1" controls="All"></embed>
<noembed><a href="http://realmedia.uic.edu/ramgen/itltv/bbintro.30jan02.smil">Play first clip</a></noembed>
</object>

<br>

<object id="myMovie" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="540" height="36">
<param name="src" value="
rtsp://realmedia.uic.edu/itltv/bbtips.6feb02.smi">
<param name="console" value="video2">
<param name="controls" value="ControlPanel">
<param name="autostart" value="false">
<param name="loop" value="false">

<embed name="myMovie" src="http://realmedia.uic.edu/ramgen/itltv/bbtips.6feb02.smi?embed" height="36" width="540" autostart="false" loop="false" nojava="true" console="video2" controls="ControlPanel"></embed>
<noembed><a href="http://realmedia.uic.edu/ramgen/itltv/bbtips.6feb02.smi">Play second clip</a></noembed>
</object>

Legend:

  ActiveX control for Realplayer with required parameters
  Netscape plugin with required parameters
  Netscape alternative text for browsers missing the plugin
  URL to the streaming media clip
  URL to the page where the plugin can be downloaded/installed
  Additional parameters for the RealPlayer plugin / ActiveX control

 

Explanation:

<object ...>... </object> — An ActiveX control is being embedded here, to enable playback by Internet Explorer. Requires CLASSID, height, width, and src parameters.

<embed ...></embed> — Here a Netscape plugin is being called. As this is inside the object tag, Internet Explorer will safely ignore it. IE 5.5 or newer will ignore it anywhere anyway, but earlier versions would display two copies, had you put this outside the object tag. Netscape, Mozilla, Opera, etc. will all ignore the object tag, and use only the embed tag, which does not require quoting the arguments, unless they contain special characters such as spaces. Note: single tag, doesn't really need to be closed.

<noembed>...</noembed> — If your browser can't handle the embedded object, e.g. because the RealPlayer plugin is not installed, this text will be displayed. It is a good idea to display here a link to the media clip that will launch RealPlayer externally. Note this link does not use the embed argument, which means the ramgen server will send a .ram metafile and not a .rpm metafile to the browser. For local playback (e.g. from CD-Rom), use a .ram file here as well.

CLASSID="..." — This specifies what filetype will be loaded here, and accordingly what application should handle it. This is the same code used in the Windows registry. The value must be copied literally.

height="...", width="..." — You need to tell the browser what area to reserve for the display of this object. You should specify at least the actual size of the object, or RealPlayer will scale them accordingly (see also center parameter).

CODEBASE="..." — This object-parameter normally tells IE where to get the ActiveX control, if the user doesn't have it installed in his browser yet. Installs it on the fly, if the user permits it. For RealPlayer, to my knowledge this option is unavailable, as RealNetworks wants users to fo through their advertisement-rich webpage to download the player.

pluginspage="..." — Tells Netscape-compatible browsers where to take the user, if he doesn't have the right plugin installed, and chooses the "Get Plugin" option.

<param name="..." value="..."> — All parameters could be included in the main object tag, but for readability it is recommended to supply additional parameters via these param tags and their name-value pairs. Quoting the arguments is necessary!

src="..." — This is the URL to the source file for this object, i.e. the media clip (movie, audio, Flash animation, SMIL file, etc.). While IE's ActiveX control takes the direct URL to the streaming media with the rtsp:-protocol, Netscape-compatible browsers require a metafile, a little text file that will launch RealPlayer and pass the media URL to it. You can either make such a metafile yourself and put it on your website together with this page, or use RealServer's ramgen feature to have the metafile auto-created, as in the example given. For local playback from CD-Rom, however, you do need a metafile, which needs the .rpm extension for embedded players. The option "?embed" at the end of the ramgen URL ensures that the Realserver sends a .rpm file, not a .ram file. Note that the ActiveX control needs only one src parameter per console, whereas the embed tags all need a src parameter.

id="..."/name="..." — Assigning an ID/name to the ActiveX control lets you access it via JavaScript. Otherwise this attribute is not needed.

console="..." — This links together various components of the controller, if you placed them separately on the page. If you use only one clip on the page, the imagewindow can use the same console value as your controls, and they can even be joined into a single object/embed tag by simply using controls="ImageWindow,All". If you want to display multiple clips, the ImageWindow component needs to be separate and needs to have console="_master".

controls="..." — Here you specify which control elements this code group should produce. Some of the other choices: PlayButton, StopButton, MuteCtrl, PositionSlider. Note: to lay out multiple control elements side by side, you need to create them as separate code blocks. When listing multiple controls in a single object's controls parameter, they will be placed above each other.

center="true"/"false" — If some of your clips are smaller than the area reserved for the ImageWindow control, they will be scaled to fill the window, unless you specify center="true". You can also control what type of scaling will be applied with a maintainaspect parameter. Recommended: true.

autoplay="true"/"false" — Should the movie start playing automatically? Recommended: true for single clips, false for multiple clips on a page.

loop="true"/"false"— Should the movie play only once or continuously? Recommended: false (when set to true, you can also control the number of times it is played via the numloop parameter).

nojava="true" — Netscape only: the Java virtual machine should not be loaded (it is only necessary when you are using JavaScript to control the player). Otherwise slows down page display unnecessarily (a lot!). Recommended: true.

There are additional parameters for the RealPlayer plugin. For more information and a full list of the names of the various RealPlayer controls, please refer to the RealSystem Production guide, which has all the details.

This sample in action:



Last updated: Nov. 14, 2002 — vk