Thursday, February 21, 2008

Publishing Multimedia Files with RealMedia
Now that you're all big audio and video producers, it's time to actually get those files up on your site. As I discussed earlier in this tutorial, one of the biggest challenges with multimedia files has always been keeping file sizes down to a dull roar. Recently, streaming media has eased this pressure to cut corners from your files. Streaming lets users play a clip as it downloads, alleviating the need to wait for the entire thing to arrive before enjoying it. After struggling with embedded QuickTimes for years, the Webmonkeys think this streaming development is pretty cool. (There will be more about this topic on Day 7, when we'll dive deeper into the stream.)
Today we'll focus on encoding files using RealNetwork's RealMedia suite. Why? Well, to ensure that your media can be viewed by the maximum number of users, you need to encode it for the most popular player on the market (i.e., you need to get Real). And it's no coincidence that this is the group of tools we Webmonkeys use and like. However, if you do opt to use something else, the basic concepts I cover here should still be useful.
Before we begin, let's take a quick look at Real's suite of products.
RealPlayerThe RealPlayer (the beta version is available for free) is a helper application that attaches itself to your browser, remora-fashion, and is invoked by an HTTP request for a RealMedia file. This launches the Player and lets you see/hear the file.
RealEncoderEssentially, the RealEncoder (which is also free) takes your file and squashes it. By stripping out extraneous layers of information from your audio or video clip, the RealEncoder reduces your file size. Back in the day of RealAudio 1.0, this process made your audio file sound like it'd been run though a Mr. Microphone: terrible. Since then, RealNetworks has built a number of options into its 5.0 RealEncoder that allow you to offer high- and low-bandwidth options on your site. The resulting compression algorithms are a leap-and-bound improvement over 1.0. Do your job right, and the media can look/sound really, really good.
OK. Everybody have everything they need? All right, let's cakewalk through the process of encoding an audio file.

The Finishing Touch: Encode that File!
Audio
First, open the RealEncoder. Select your digitized audio file from the dialog box, and then select your codec (or compression/decompression algorithm). The 5.1 encoder has a dozen codecs to choose from, from "Audio 14.4 Music-mono" to "Audio 56k Music-Stereo," so just select the one that best describes your file.
Be sure to experiment with several codecs. If you're not happy with one, try another. As you play around with codecs, it's nice to use a clip that accurately represents your content but is only 3 to 5 seconds long (since the encoding process does take a while).
It's a good idea to offer your audio file in different compression versions. Make each version available via different links -- "14.4 bps," "28.8 bps," and "56k-ISDN or above." It's understood that the feeble-connection version will sound dirt-poor, but a T1 connection can get the in-stereo, Rolls-Royce version. (Real claims CD quality here, but we think it's more like a high-quality cassette tape running through a good system.) The number of surfers sitting at the end of T1s or T3s is surprisingly high these days, so developers interested in maintaining their street cred should provide the best possible quality files for their bandwidth-endowed surfers in addition to low-bandwidth options.
Once you've created all your files, all they need is the ".ra" suffix and they're done.
Video
Other than naming your file with an ".rm" suffix (versus an ".ra"), encoding video for the RealPlayer is almost identical to the audio procedure.
As with audio, I recommend spending some time experimenting with different codec settings. A "wizard" will make most of the decisions for you, or you can use an "advanced" option if you want more control. And, as with audio, you should provide your users with a range of options -- like "talking heads mono 28.8" or "talking heads stereo 56k-ISDN."
Something else to note: The latest versions of RealEncoder allow you to capture video directly. Although this seems like a cool feature, be careful -- it will leave you without a digital master of your original video file, which is pretty sketchy (unless the RealMedia product is the only thing you care about).

Now Put that File to (Em)bed
It's time to publish the file in your Web page. (Finally!) But first you need to decide what route you want to take: A tad complicated but free? Or one-click easy for $50?
To go the free route, start by moving the .ra files to your Web server using an FTP program, specifying "raw data" as the media type. Be a good li'l Webmonkey and drop them into their own directory. Now, in the Web page you're using to feature the sound files, embed the following:
Listen to Tim, the Webmonkey cowboy, rock on the banjo at:

14.4 bps

28.8 bps

56k/ISDN
You may want to make a glossy button in Photoshop; it's guaranteed to get your users a-clicking. If you want to go the art route, simply use the image tag in place of the text in the example above.


Listen to Tim at 14.4 bpssrc="stuff/button_1.gif" />

More advanced designers will no doubt want to construct cool-looking JavaScript-driven players with modular edges and mouse-over buttons, but I digress. Or get ahead of myself. Or something.
And that's it! Pretty simple, huh? But throw some money at it, and it could be even easier.
For fifty bucks, Real now offers a nifty tool called RealPublisher. (The RealEncoder is included in the price, so if you were planning on getting that anyway, this may be a good way to go.) With RealPublisher, you don't have to monkey around with FTP and HTML. All you have to do is open the application, tell it which (already encoded) file you want to publish, what the FTP filepath will be, and hit the "Create HTML" button. The tool then spits out a chunk of HTML, or an entire Web page, and FTPs the files to your server. This is pretty handy if you are working on a high-volume site. If that's the case, RealServer might be something else to look into, especially if it comes packaged with the other Real products - buying piecemeal from RealNetworks can leave you with nothing in your wallet but an echo.
But whether you go for free or for fifty, I strongly recommend a dress rehearsal: Before you make that be-audioed page live, test it out using your own RealPlayer.
COMING UP NEXT: On Day 6, the lovely Wendy will cover everything you need to know about image mapping in RealVideo. And on Day 7, I'll finally get down to the nitty-gritty of streaming audio and video. Be there or be L7!