Embedding RealMedia Files Using HTML

There are two options for streaming RealMedia:

• Using a Streaming Server, or
• HTTP Streaming.

A streaming server, such as Helix Universal Server from RealNetworks, has the capability to support many different formats including RealMedia, Windows Media, Quicktime and MPEG-4. There are many advantages to this:

• You can make use of the three-pane environment that RealPlayer has to offer.
• The viewer can interact with the streaming video without having to wait for the entire file to download.

Using HTTP progressive streaming for RealMedia on the other hand is a cheaper alternative, though not "true" streaming, just a good simulation of the process.

• For this to work the viewer must have the correct plug-in installed on their computer.

Once you have created a RealMedia "ram" format file ready for downloading it can be streamed to your viewers by embedding the RealMedia file into your webpage using the appropriate HTML code. RealMedia is a very good quality standard with low file sizes.

Creating the Video File

Using a conversion utility, such as RealProducer Basic, you can compress your media file into a streamable video file for use in your webpage. RealProducer Basic is a free software tool for encoding RealAudio and RealVideo clips, a more advanced version is RealProducer Plus but this is not free.

Creating the RAM File

With your video file ready, you now need to make a RAM metafile file. This is nothing more than a text file containing the full URL to a video clip and is necessary because this enables the browser to use RealPlayer as a helper application.

To create the RAM file, open a text editor, such as Notepad, and type in the full URL of the video clip, e.g., http://www.websitename.com/video-filename.rm.

• You must include the full URL including the HTTP protocol.

Save the text file with the ram extension, e.g., "video-filename.ram". This is the file that will be used to stream the video from your web page. If you double-click it, it will launch RealPlayer.

Hyperlinks to RealMedia Files

The simplest way to add RealMedia to a web page is to make a hyperlink on the page directly to the video file:

<a href="video-filename.rm">Click here to download video</a>

When the end user clicks this hyperlink the video file will be download ready for use on the viewers computer. Alternatively, if you point the link to the ram metafile instead:

<a href="video-filename.ram">Click here to stream video</a>

When the viewer clicks this hyperlink the video will be streamed transparently to the viewer instead of downloaded.

Note: For RealMedia files to stream from your website, your host server must recognize the RealMedia mime types.

Embedding RealMedia Files

Embedding a RealMedia video file into your web page requires the use of specific HTML code.

The following code will embed a RealMedia "ram" file in the web page.

<OBJECT ID=RVOCX CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
WIDTH=320 HEIGHT=180>
<PARAM NAME="src" VALUE="video-filename.ram">
<PARAM NAME="controls" VALUE="ImageWindow">
<PARAM NAME="console" VALUE="video">
<PARAM NAME="autostart" VALUE="true">
<EMBED TYPE="audio/x-pn-realaudio-plugin"
SRC="video-filename.ram"
WIDTH=320 HEIGHT=180 AUTOSTART=true
CONTROLS="ImageWindow" CONSOLE="video">
</EMBED>
</OBJECT>

To use the file you will need to replace the following parameters:

• Replace the "video-filename" with your filename.
• Replace WIDTH and HEIGHT as required, i.e. 800 and 640 respectively.
• Decide if you want AUTOSTART to be "true" or "false".
• Do not modify the <OBJECT> tag parameters, these are required for browsers using ActiveX support such as Internet Explorer.
• Do not modify the <EMBED> tag parameters, these are required for browsers such as Mozilla FireFox.

<OBJECT> Tag Parameters

NOJAVA – This is for Netscape only.
CLASSID – This tells the browser what file type to expect and which application should handle it.
WIDTH and HEIGHT – Width and height of displayed image in pixels.
PARAM NAME="src" VALUE – The URL to your file.
PARAM NAME="controls" VALUE="ImageWindow" – This displays the playback window.
PARAM NAME="console" VALUE="one" – This links various components of the controller.
PARAM NAME="autostart" VALUE – When "true" the video clip will begin playing as soon as it completes loading.

<EMBED> Tag Parameters

SRC – The URL to your file.
WIDTH and HEIGHT – Width and height of displayed image in pixels.
AUTOSTART- When "true" the video clip will begin playing as soon as it completes loading.

Code Usage

To use the code simply place it where you want your multimedia presentation to be shown in your web page.

Notes:

• HTML elements are not case-sensitive.
• Tag parameter values should always be enclosed in, "double quotation marks".

You may also be interested in the following:

Adobe. "A Streaming Media Primer." (10/5/2007)
http://www.adobe.com/products/aftereffects/pdfs/AdobeStr.pdf
Adobe products.

For additional RealPlayer control features, see Adding RealPlayer Controls.