Chapter 3: RealSystem: Embedding

Example 1 - Simple cross-browser embedding
Example 2 - Cross-browser embedding with RealPlayer controls
Example 3 - Cross-browser embedding with RealPlayer controls, sliders and panels.
Example 4 - Cross-browser embedding with several RealPlayer consoles.

Links: RealPlayer Embedding

RealNetworks Production Guide
Chapter 20: Web Page Embedding Go

Example 1 - Simple cross-browser embedding

This is a simple example for an embedded RealOne Player. Here the EMBED Tag was ”nested” into the OBJECT Tag. As we have seen in the book Internet Explorer uses the OBJECT Tags to embedd an ActiveX control with a given ID into a HTML page. Although proprietary, the concept of ActiveX controls gives programmers much more flexibility than Netscape’s plug-in model. For example, you can integrate functions of Windows Media Player, Encoder and Services in websites using ActiveX controls.

The source code below just embedds a RealPlayer ImageWindow without any controls, buttons or info panels.

Source code:

See it in action.

Example 2 - Cross-browser embedding with RealPlayer controls

Like in example 1 an ImageWindow is embedded into the HTML page. Additionally RealPlayer’s PlayButton control is integrated to pause the playback of the clip.

Using the internal controls of RealPlayer is an easy and reliable way to give users the chance to use functions like play, pause, stop, etc.. The disadvantage: the design of the controls depends on the installed version of RealPlayer and cannot be edited.

Source code:

See it in action.

Example 3 - Cross-browser embedding with RealPlayer controls, sliders and panels.

The ImageWindow seen in example 1 and 2 is extended with a stop-button, sliders and info panels.

Source code:

See it in action.

Example 4 - Example 4 - Cross-browser embedding with several RealPlayer consoles.

Several consoles can use one ImageWindow to display the stream they refer to. If every conole links to different streams (using the scr parameter) the consoles can be used to easiely switch between different streams in the ImageWindow.

Source code:

<table cellspacing="10">
<tr>
<td>
<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="320" HEIGHT="240">

<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="_master">
<PARAM NAME="AUTOSTART" VALUE="FALSE">
<embed type="audio/x-pn-realaudio-plugin"

name="realPlug1"
controls="ImageWindow"
console="_master"
width="320"
height="240"
autostart=false>
</embed>
</object>

</td><td>
Play stream 1:<br>

<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="52" HEIGHT="26">

<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
<PARAM NAME="SRC" VALUE="/media/realvideo8_sure.ram">
<PARAM NAME="CONSOLE" VALUE="video1">
<embed type="audio/x-pn-realaudio-plugin"

controls="PlayButton"
console="video1"
src="/media/realvideo8_sure.ram"
width="52"
height="26"
</embed>
</object>

<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="120" HEIGHT="26">

<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="PositionSlider">
<PARAM NAME="CONSOLE" VALUE="video1">
<embed type="audio/x-pn-realaudio-plugin"

controls="PositionSlider"
console="video1"
width="120"
height="26"
</embed>
</object>

<br><br>Play stream 2:<br>

<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="52" HEIGHT="26">

<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="PlayButton">
<PARAM NAME="SRC" VALUE="/media/realvideo8_sure1.ram">
<PARAM NAME="CONSOLE" VALUE="video2">
<embed type="audio/x-pn-realaudio-plugin"

controls="PlayButton"
console="video2"
src="/media/realvideo8_sure1.ram"
width="52"
height="26"
</embed>
</object>

<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="120" HEIGHT="26">

<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="PositionSlider">
<PARAM NAME="CONSOLE" VALUE="video2">
<embed type="audio/x-pn-realaudio-plugin"

controls="PositionSlider"
console="video2"
width="120"
height="26"
</embed>
</object>

</td>
</tr>
</table>

See it in action.

Synopsis and Basics Production RealMedia Windows Media QuickTime
Further Solutions About the author