IRT: Support: Web/Media: Workshops: Streaming Media

I can still remember it as if it was yesterday. A colleague of mine called me into his office and excitedly proclaimed, "you have to hear this." In front of him was computer hooked up to the Internet. Out of the little speaker came the muffled but intelligible sounds of the first RealAudio.

Back then, the company was known as Progressive Networks. They barely had a Web site and a phone number or even a mailing address was almost impossible to find on it. For a company about to revolutionize the Internet, they liked to play it low key.

Since those early days, the company now named RealNetworks has grown to be the streaming champ. Oh sure, you can talk about how this or that format is better in some way or another than RealNetworks. It might even be true. But spend time on the Web and you will soon realize that RealNetworks has become the de facto standard of streaming media.

RealNetworks is hard to put in a box. Sometimes cunning like Microsoft, sometimes aloof like Apple in its early days, Real must surely know that the battle for streaming dominance is theirs to lose. It might not necessarily be a good place to be for a company that has always seemed to view itself as the underdog to Microsoft.

As a technology, RealMedia is easy to create and implement. Now in version 8 (beta server,full release player), RealMedia has matured and offers an impressive range of solutions for the Web producer. The player handles audio, video, animation, still images, and text. Third party vendor support is strong. The consumers are familiar with and loyal to the brand. And with support for SMIL, Real has boldly staked out new territory in the emerging world of Web multimedia.

While a big fan of RealNetworks, I do have my complaints. Personal experience has shown me that their technical support is sometimes weak. Authoring tools and players for the Macintosh community have often been slow in coming out. Users sometimes complain to me that the company seems indifferent in dealing with its customers. Perhaps these are only growing pains for a company that has a new industry by the tail. But for the most part, Real makes decisions that keeps them on top of the streaming media world.

Real G2/v8 Basics (2)

RealPlayer Plus G2

A Player or a Browser?

Receiving RealNetworks streaming media requires a RealPlayer. A browser plug-in supports embedding Real content in a Web page. Officially, the G2/v8 player is just that, a player. But take a closer look at this player and you will see it is really a multimedia browser. It handles audio, video, animation, still images, and text. About the only file type it doesn't seem to support right now is HTML. I would not be surprised if, in a back room at Real's Seattle headquarters, there sits a RealPlayer that does that too. Future versions of the player promise multiple windows and a URL window. RealPlayer is quickly becoming the multimedia browser.

Much like Apple's QuickTime player, RealPlayer software is available in two versions. You can download both versions from http://www.real.com/realone/plus/index.html.The basic player is free download and covers most of the needs any user might have. For $29.99, you can upgrade to the Plus version. For the extra cost, you get better control of your video picture and sound enhancement. You also gain built-in MP3 support. For most people, these features are not that critical. The record feature, for those sites that support it, is the one feature that I find makes the Plus version worth the extra cost. If a streaming clip is broken up, recording the feed and then replaying it off of the hard drive is handy. RealPlayer will delete the buffering gaps and give you just the data. The catch is that many sites disable the ability for users to access this feature.

Real G2/v8 Basics (3)

What About the Server?

Of course, RealNetworks has to make their money somewhere. They make it off of Plus versions of their software and the RealServer. Real does offer a Basic Server G2/v8 which is free and supports 25 streams (simultaneous users) at a time. For many smaller organizations, that might actually do the trick. Basic Server Plus G2/v8 software currently retails at $695. That will support up to 40 streams. If you want to stream Macromedia Flash animations using Real's RealFlash, throw another $295 on the pile. 100 users will cost around $6000. 400 will cost about $24,000. If you are more serious than that, you had better give a Real salesperson a call. I'm sure they'll be very happy to talk to you.

One of the advantages of the G2/v8 server is that it supports a new RealNetworks technology called SureStream. This wonderful technology dynamically adjusts the quality of the signal during playback. For my audio presentations, I typically encode a file for LAN to 28.8 modem speed. That is quite a range and the files get large. But the server will send the signal that makes the most sense depending on bandwidth. If the available bandwidth drops, the signal quality shifts down to match. The transition is usually very smooth and does not disrupt the user experience.

Don't Have a Server?

Most streaming formats support "psuedo" or HTTP streaming. RealNetworks G2/v8 is no different. So if all you have to experiment with is a normal Web server, you can still stream your Real G2/v8 content. To get it to work, you might have to ask your server administrator to configure a data-type so that the server knows how to handle the streaming files. Pseudo streaming G2/v8 is not as robust a solution as a dedicated streaming server. With Real G2/v8, there will be a delay while the server buffers enough information to begin playback. If the user wants to skip the playback slider ahead, RealPlayer will have to play the file off the server in real time until it reaches the point where you have "skipped ahead" to. As you can imagine, this defeats the purpose of skipping ahead. So why pseudo-stream? If you are beginning to experiment with RealMedia, it is a great way to test it out. Once you have tried it out, invest in a server and reap the benefits of more user control and SureStream.

All SMILs

Of course, there is far more to streaming media than audio and video. The future of streaming is in offering the user a sophisticated multimedia experience. Here, RealNetworks is ahead of the pack. Ever since the G2/v8 technology rolled out, RealPlayer has support the W3C's Synchronized Multimedia Integration Language (SMIL). Look at SMIL as HTML for multimedia and you aren't too far off. SMIL is an XML-based language that allows you to time and position media within the player window. While RealPlayer G2/v8 is not the only SMIL capable browser, it is by far the most popular. Real adds to SMIL with their own RealPix and RealText variants that allow the streaming of still images and text. Simple SMIL is relatively easy to write. Much like HTML, a text editor and SMIL browser are all that is required to author the language.

SMIL is not perfect yet. Much like early HTML, it has a long way to go. Current SMIL authoring tools are usually buggy. But as the language develops, it should become an important word across the lips of many a Web designer. Finally, a richer multimedia experience is possible on the Web.

Real G2/v8 Basics (4)

Follow the RealProducer encoding wizard...

and RealProducer is ready to encode. On the left is the source clip. On the right, the encoded version (once encoding begins).

Getting Started

At the very least, encoding for RealPlayer G2/v8 requires RealProducer G2/v8, you can download from the RealNetworks site. Real does offer a $150 RealProducer Plus G2/v8. For streaming server users, the extra encoding features are well worth the investment. Indeed, if you buy a Real server, RealProducer Plus G2/v8 is typically included in the package.

There are may third party solutions that also encode Real G2/v8 content. From the Adobe Premiere plug-in to Sonic Foundry's Sound Forge to Terran's Media Cleaner to shareware utilities, a number of products export directly to RealMedia. But for now, I will stick with RealProducer Plus G2/v8.

Assuming that you have some kind of audio/video digitizing board in your computer, RealProducer is ready to go to work. Digitization from your input device is supported right within the RealProducer software. As for me, I already have a short clip saved as a QuickTime file (AVI is also available). From here, I'm ready to encode for G2/v8 with RealProducer.

Off to Use the Wizard

By default, RealProducer guides you through the basic encoding process with a software wizard. Give RealProducer and input filename, choose a streaming format (SureStream or HTTP based), provide a data rate (28.8 to LAN), tell it what the audio is (music versus voice), and tell it what to do with the video (a range from high motion to a slideshow). Then click the Start button and the file encodes at what it thinks are the best settings. Could it be that easy? Yes with the wizards, you have clip ready for streaming as quickly as your computer can crunch the data. But if you want to really get into the software and tweak the settings, you probably want to leave the encoding wizard behind.

Real G2/v8 Basics (5)

Turn off the encoding wizard and you get this rather boring session box to identify you input and output files.

But turning off the encoding wizard also connects you up directly with the RealProducer encoding settings in the main window. Shown here are settings for Target Audience, Audio and Video Format, and File (Streaming) Type.

Behind the Curtain

If you are like me, you view software wizards are meant for well meaning beginners. We cyber warriors like to mess with things even if we don't entirely know what we are doing. Generally put, the RealProducers wizards do a great job. But if you want to step into the software and tweak, RealProducer obliges.

Choose New Session under the File pulldown menu and select the Don't Use Recording Wizards box. Now you are ready to go "off-road" with the software. You tell RealProducer what your clip is and where to dump it after conversion. From there, you jump directly back to the main window to make your own Target Audience, Audio/Video Format, and File (streaming) Type choices.

Target Preference Power

If you pull down the Options menu in RealProducer Plus, you'll find my most valuable RealProducer Plus feature: Target Audience Settings. Here, you can actually adjust how much bandwidth is used by the various connection settings set in the main window. Want a little more power for your 56k video? Maybe trim the audio down a tad and pump up the video. Or maybe you just want to adjust the overall target bitrate from the designated norms. Or adjust the maximum frame rate. Target Audience Settings are powerful enough to improve your clip (or mess you up really bad). Did you get lost in the settings? No fear. Just click the Restore Defaults button to return things to factory standard.

It may look bland but the RealProducer Statistics window will tell you all about your streaming clip.

Statistics, Statistics, Statistics

Once you have actually encoded a clip, a dialogue box will pop up and tell you that the job is done. But if you notice the Statistics button and click on it, you will be rewarded with a wealth of information about your streaming clip. Such areas as bandwidth used (audio versus video) and playback framerate are covered. If you don't like what you see, simply tweak your settings and re-encode. So with my video clip encoded, it is time to get it posted on the Web.

Real G2/v8 Basics (6)

Putting RealMedia on the Web

Two Choices

Like most streaming media environments, Real G2/v8 offers two choices in playback. You can either link to the file for playback in the RealPlayer. Or you can embed the file for streaming playback within the Web page. In the practice of teaching streaming media production,I find that most producers can easilly handle linking for playback in the external RealPlayer. But for some reason, embedding in Web page can be a trick at times. So I will start with linking to external playback with the RealPlayer first.

The RAM File

If I am going to lose people in understanding RealMedia, I always have the greatest chance of that happening when I start talking about the RAM file. It's not really that complicated to understand. But I think people want it to be more complicated than it is and that is where the trouble begins.

For a little background information, I want to spend a moment talking about what happens when a user clicks on a RealMedia link. RealMedia is not the World Wide Web. What that means is that a browser needs additional software in order for you to see or hear the streaming media. That is pretty much the same with most streaming media. The Web is an open environment that allows other technologies to be plugged into it as needed.

So when you click on a RealMedia link, your Web browser gets confused. It looks at all this foreign data coming at it and tries to determine what to do with it. The server says to the browser, "hey, this is RealMedia!" To that, the browser says to itself, "hmm, I think I have a player or plug-in lying around here somewhere that can handle that!" And so after the browser looks at its internal list of available helper applications and plug-ins, the data is handed off to the software that can actually display the data properly.

With RealMedia, this hand off requires a file called RAM. That is short for "Real metafile." Sound complicated? It isn't. The purpose of the RAM file is to make sure the streaming data is passed on to the RealPlayer. When you click on a RealMedia link on a Web page, you are actually clicking on a link to a RAM file. The RAM file contains the Internet address to your streaming media. The browser receives that RAM file and forwards the information to the RealPlayer. The RealPlayer reads the file and knows where to find your streaming media. Then it starts to play.

So How Do I Create a RAM File?

A RAM file is the easiest thing in the world to create. It is simply a text file just like your HTML. Open a text editor and type the address to your RealMedia files on the server. It should look something like this:

http://www.myserver.com/myfolder/myvideo.rm

Then, save the file with a ".ram" extension. That's it. If that seems too simple, wipe your mind clean. A RAM file is a text file with an address to your streaming media and a ".ram" extension on the filename. Nothing more.

Hold on to that RAM file. I will be making a link to it in Web page in a minute.

Real G2/v8 Basics (7)

Reference the RAM File

If you have overcome the simplicity of the RAM file creation, it is time to make a link in your HTML. Treat your RAM file just like any other HTML file. For example, a relative link to the RAM file from a an HTML page in the same folder might look like this:

<a href="myvideo.ram">Click me</a>

Upload your files to the server and test your link out. When the user clicks on the hyperlink to the RAM file, the RAM file will load into the browser and begin the hand off to the player. Since the RAM file carries an absolute URL, the RAM file can be in another account or even located another server. It will play just fine. Try this link to see a RAM file in operation.

RAMGEN

So far, I have shown you RAM files for pseudo-streaming off of a normal Web server. RAM files will be slightly different if you are working with a RealServer. I suggest you study the Real documentation for your situation if you are not pseudo-streaming.

There is a handy trick, however, that you can use when working with a RealServer. By using a RAMGEN command in your hyperlink, you can force the server to automatically generate a RAM file for you. This simplifies things even further. A typical RAMGEN link in your HTML to a RealServer running on port 7070 (or whatever port your administrator set up) might look something like this:

<a href="http://www.myserver.com:7070/ramgen/myfolder/myvideo.rm">Click me</a>

Notice that I referenced the streaming clip directly. The "ramgen" reference in the path will make sure that the RealServer generates a RAM file and feeds it to the browser.

If all this RAMGEN stuff seems confusing, don't panic. Your server administrator can help you figure out the proper port number and path structure.

Real G2/v8 Basics (8)

Embedding the Image Window

Putting the Real G2/v8 clip in a Web page simply requires an <embed> tag and appropriate attributes.

Notice the rides.rpm file. This metafile follows the same format as a RAM file. The difference is the ".rpm" extension which will force the Real plug-in to load instead of the RealPlayer.

The controls attribute designates the control or image window to appear. The nojava attribute prevents the browser's Java Virtual Machine from launching (which would cause a delay in playback). console designates the identity of the embedded control or window (if you need more than one embed tag). Summed up, the above embed tag and attributes will load the streaming media clip into a display window 176 by 132 pixels wide.

Adding a Play Button

Having the clip display is great but I want to add some user control. I need a play button. So I add an additional embedding tag.

I now have two embed tags in my HTML. The controls attribute is identified as a play button. My smaller width and height in the second embed tag reflect the size of the play button.

Real offers a wide array of control options for the Web producer. Simply choose as many controls as you like and add an appropriate embed tag with attributes. For further information on embedding your RealMedia, consult the Real G2/v8 documentation.

Testing Our Work

With our image window and play button tags in place, I'm ready to upload my files and test my embedding. If you have the G2/v8 player installed in your browser, you should see the result below.

That does it for our Real G2/v8 Basics. We'll come back and visit some additional RealMedia topics farther down. But it is time to move on and our next upcoming section will look at Microsoft's Windows Media Technologies.

Take Control of RealPlayer with JavaScript

If you worked through my previous tutorial on RealNetworks streaming media you have a pretty good feeling on how to work with the format. You know how to encode your digital media, post it on a server, and make it accessible from a Web page. But what if you want to make your streaming video do new tricks?

If your idea of new tricks involves using JavaScript, RealMedia is up to the challenge. RealPlayer includes a number of hooks to make the player obey your commands.

In this tutorial, I will be using JavaScript to create a simple custom interface for my streaming media content. Hopefully you will find these simple steps an inspiration for your further exploration of JavaScript functionality in RealPlayer. One NOTE: Users of RealPlayer for Macintosh have had problems trying to play embedded content when viewing the target Web page with Internet Explorer. If you are a Mac user, and have any such problems with this article please try using Netscape to view the page instead.

Setting Up the <EMBED>

I begin by making some assumptions. I am assuming that you have already converted your digital media to RealMedia and have embedded that content into a Web page. If not, revisit my earlier tutorial on working with RealMedia before beginning.

If you are familiar with basic JavaScript, you know that the scripting language allows you to reference and manipulate objects within the browser document. In a classic rollover, JavaScript allows you to name a graphic, reference that graphic with the script, and change the graphic dynamically when the user rolls their mouse over a link.

Much like setting up a graphic rollover, our first step in hooking into the RealPlayer’s JavaScript power involves naming the plug-in instance. This is done simply by slipping a NAME attribute into the <EMBED> tag:

<EMBED SRC="libertyG2.rpm" NAME="libertyclip" WIDTH="256" HEIGHT="192" CONTROLS="ImageWindow">

In the example above, the <EMBED> tag does little more than display a window with the RealMedia content. To play the content, I would have to click the window and pull up "Play" from the contextual menu. Instead, I will add a few buttons and let JavaScript do the work. Now that we have the RealMedia object named ("libertyclip" in this example) I am ready to hook into that object with JavaScript.

RealPlayer Methods

In JavaScript, methods allow you to do something to or with your objects. RealPlayer supports a variety of methods that can be called upon to do work in your JavaScript. Among numerous other options, these methods allow you to start and stop the player, select a point within a clip to play, and recover performance statistics.

For my example today, I want to focus on two methods for controlling player playback:

DoPlay() will start the clip playing in the RealPlayer. DoStop() will stop the clip playing in the RealPlayer. With these two methods, I have enough to make the player start and stop my presentation.

Capturing Events

In order to call my DoPlay() or DoStop() methods, I need to have some kind of event happen. Obviously, clicking on buttons or an image map might do the trick. So for this example, I add the following images to my HTML:

or, in HTML as:

Now that I have buttons to click, I need to make make them active. I do this by adding an anchor to each:

<A HREF="javascript:void(0)" onClick="document.libertyclip.DoPlay()"><IMG SRC="play.gif" WIDTH="75" HEIGHT="75" BORDER="0" ALT="PLAY BUTTON"></A>
<A HREF="javascript:void(0)" onClick="document.libertyclip.DoStop()"><IMG SRC="stop.gif" WIDTH="75" HEIGHT="75" BORDER="0" ALT="STOP BUTTON"></A>

If you are new to JavaScript, the code here might look a little intimidating. It is really not that hard. The "javascript:void(0)" value to the HREF attribute simply tells the browser to ignore that actual HREF value. I do not want to send our visitor to another Web page. I simply want to make use of the linking power of the browser to launch or stop my video clip when the visitor clicks the graphic. I do just that with the OnClick event. The instructions "document.libertyclip.DoPlay()" is the RealPlayer method being told to do its thing within the Web page document on the EMBED source named "libertyclip". Now that we have the pieces in place, it is time to test it all out.

Testing It Out

So when I am all done with this basic example, my HTML looks like the following:

Does it work? Try the sample below:

This is a pretty basic example of how you can use JavaScript to access RealPlayer. If you are proficient with JavaScript, you might try something much more sophisticated. Spend some time exploring the Embedded RealPlayer/JavaScript documentation at RealNetworks and you might come up with a number of crazy ideas that just might work. Perhaps you will experiment with a JavaScript process in Flash or create an interactive presentation based on JavaScript acquired variables. Perhaps you will build an incredibly sophisticated RealMedia presentation application in JavaScript. The rest is up to your JavaScript imagination.

Another Real Networks Tutorial

http://hotwired.lycos.com/webmonkey/multimedia/tutorials/tutorial3.html

Return to Main Workshops Page or Continue to Windows Media

Modified: August 20, 2008

Home

Contents

Index

Feedback / Corrections