Real Streaming Video Tutorial

By Dr. Edgar Huang and Clifford Marsiglio

Indiana University-Purdue University Indianapolis
School of Informatics

In this tutorial, the terms "movie" and "video" are equivalent.

Quite several software programs, such as Adobe Premiere Pro 2.0, Apple Final Cut Pro 5 and QuickTime Pro have the capability to encode Real streaming videos, but the most professional encoder for encoding Real streaming videos is RealProducer 11. It is PC-based. You can download the Basic version for free from real.com to play with it. Since you can't change the video size in the Basic version, encoding will produce a 720x480 pixel version if that is the original size. This fact makes the Basic version pretty much useless. To get the job appropriately done, you need to purchase the Plus version. This tutorial will show you how to batch-process multi-data-rate encoding with RealProducer Plus 11.

ENCODING

1. Importing

Launch RealProducer Plus 11 from a PC. RealProducer has a nice interface. The left side is for input processing and the right side is for output configuration. The bottom presents the encoding information. Click Browse on the left to open your video file for encoding. RealProducer can import videos in AVI and WMV formats easily. If you happen to need to process an MP4 video, you need to click the Files of type pull down menu to choose All files. In order to achieve the best encoding result, always try to encode the original video output in AVI or MOV format with a large file size.

2. Configuring

Under Destination on the right, you should see the default output name. Double-click it and rename it if you wish and assign it to a folder you desire. Like Windows Media Encoder 9 Series, Real exports all bandwidths into one output file.

Click Audiences. If your video contains music, choose Music. If your video is a lecture, which contains nothing but a talking head, choose Voice. Under Video model, change the setting depending on how much motion the video contains. The smoother the motion is needed, the more key frames will be made and the larger the file size will be. Most videos will be rendered properly with the balanced Normal Motion Video option. If you need to do a fast encoding, uncheck 2-pass video encoding. The image qualities from both encoding processes are pretty much the same, but one-pass encoding generally generates a larger file size since it doesn't care whether the video contains largely motions or a talking head.

Check Resize. This is the major reason why you have to pay for this encoder. Unfortunately, Real does not allow variation of size for different bandwidths. All bandwidths must stream the same dimension. This fact drastically reduces the usefulness of streaming for different bandwidths. Change the dimension to 496 by 332 pixels.

Select the only format in the lower right pane, 256 DSL or Cable, and click the trash can icon on the bottom to delete it. Click 128k, 384k and 768k separately and send them to the right pane. To reconfigure the default setting in each preset, double-click each selected setting in the right pane. For our purpose, we will leave all the default values alone. Click the Close cross in the upper right corner of the pane to close Audiences. Click Video Filters. Just make sure that Deinterlace is selected.

If you expect to use the same configuration repeatedly in the future, you may want to click the disk icon in the lower left to save the session. Otherwise, click the Encoder button. You can see the encoding information in the bottom pane. After the encoding is done, quit RealProducer.

SCREENCAST

To view the screencast for this tutorial, you must have the Adobe Flash Player plug-in. This screencast will walk you through the tutorial above.

 

WEB AUTHORING

Web Authoring with Real media is pretty straight forward.

Embedded in the HTML body is a set of codes similar to the one here:

   <OBJECT id="rvocx" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="448" height="332">
   <param name="src" value="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv">
   <param name="autostart" value="true">
   <param name="controls" value="imagewindow">
   <param name="console" value="video">
   <param name="loop" value="false">
   <EMBED src="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv" width="448" height="332" 
    loop="false" type="audio/x-pn-realaudio-plugin" controls="imagewindow" console="video" autostart="true">
   </EMBED>
   </OBJECT>
   <!-- ...end video window -->
   <!-- begin control panel... -->
<br /> <OBJECT id="rvocx" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="448" height="30"> <param name="src" value="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv"> <param name="autostart" value="true"> <param name="controls" value="ControlPanel"> <param name="console" value="video"> <EMBED src="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv" width="448" height="30" controls="ControlPanel" type="audio/x-pn-realaudio-plugin" console="video" autostart="true"> </EMBED> </OBJECT>

What makes Real different than the rest is that it embeds two separate controls — the media and the controller object. This makes it easier for a web developer to position the elements as needed.

The Video Object

In the first, we set the classid and the dimensions of the object:

   <OBJECT id="rvocx" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="448" height="332">

We edit the parameters as needed:

   <param name="src" value="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv">
   <param name="autostart" value="true">
   <param name="controls" value="imagewindow">
   <param name="console" value="video">
   <param name="loop" value="false">

As with all the videos, the most important portion is making certain that we can find the file. Select the SRC and the location of the streaming server. Do we want this to start as soon as it loads? If yes, set the autostart to true. Which controls are we using? This is the tricky one — we want the Image Window here. Also important here is the Console Parameter. Its is what ties the separate controls together. If you have multiple videos on a single page, you would want all controls for the first named to something like value="VidONE" and the second video and all its components to value="VidTWO".

To understand all the parameters available, check out Real's Production Guide1

   <EMBED src="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv" width="448" height="332" 
    loop="false" type="audio/x-pn-realaudio-plugin" controls="imagewindow" console="video" autostart="true">
   </EMBED>
   </OBJECT>
   <!-- ...end video window -->

The final portion to the video component is making certain that we address the EMBED portion. Same parameters, treated slightly differently all nested within the Object tags to ensure that its not called twice.

The Controller Object

   <!-- begin control panel... -->
<br /> <OBJECT id="rvocx" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="448" height="30"> <param name="src" value="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv"> <param name="autostart" value="true"> <param name="controls" value="ControlPanel"> <param name="console" value="video"> <EMBED src="http://video.indiana.edu:8080/ramgen/ip/nmstream/real/smoke.rv" width="448" height="30" controls="ControlPanel" type="audio/x-pn-realaudio-plugin" console="video" autostart="true"> </EMBED> </OBJECT>

Much like the first, but this is focused on the controller aspects of the plug-in. The Source and Console parameters remain the same. The Height and Width is contingent on the size of the controls needed. In this case, we've kept the same width and added a height of 30 pixels. Using the ControlPanel controls, we get the compact control panel featuring play, pause, stop and several other features. If we had selected ALL for the controls, we would have gotten a slightly larger control panel, with a few more bells and whistles. On the other end of the spectrum, selecting PlayButton would allow for the slimmest of controls.

For more information of the possibilities, visit Real's code sample pages2

The possibilities afforded by Real's flexibility may be appreciated by the most demanding webmaster and as it is one of the oldest technologies, streaming media personnel may have more access to resources to get this technology up and running.

Note: In order to play this correctly on newer browsers seamlessly due to the Eolas ruling, please see our javascript embedding tutorial.

External Links

  1. Real Production Guide: Embed
  2. Real code samples