Flash Media Server Article

Beginner's guide to streaming video with Flash Media Server 3

This article is the second in my series of beginning-level tutorials about Adobe Flash Media Server 3. This particular tutorial gets you started using Flash Media Server 3 to stream a video into a Flash video player (SWF) using the new VOD service.

Here are all the articles in the series:

• Part 1: Installing Flash Media Server 3
• Part 2: Streaming video with Flash Media Server 3
• Part 3: Using ActionScript 3.0 with Flash Media Server 3
• Part 4: Streaming audio through Flash Media Server 3
• Part 5: Security features in Flash Media Server 3
• Part 6: Streaming live video with Flash Media Server 3

Requirements

To follow along with this article, you'll need the following software:

Flash Media Development Server 3

• Download

Flash CS3 Professional

• Try
• Buy

Sample files:

• beginner_vod.zip (ZIP, 2.6 MB)

What is VOD all about?

To understand VOD, let's take a minute and step back to understand some fundamentals about using Flash Media Server 3.

Previous iterations of Flash Media Server (FMS) were not exactly one of those things you'd categorize as "really easy stuff to learn." In fact, many people who approached it for the first time found that the learning curve was steep, to put it mildly. You couldn't simply install the server, launch Flash authoring, generate an FLV file, and get into the streaming game. No way, no how.

Here's the fascinating thing about Flash Media Server 3: that's exactly what you now do.

To understand what I'm getting at, you need to clearly comprehend the fact that Flash Media Server 3 uses a client-server architecture, in which Adobe Flash is the client and FMS is the server. For this to work right, though, you have to rethink your workflow slightly. Instead of putting your video files in a folder on your web server—the familiar progressive download model—you put the videos in a folder on the FMS server. This folder is known as the "application"; the folder where the media files are located is called the "instance." It looks somewhat like this: rtmp://server/Application/Instance. (You'll be using the RTMP path in a minute.)

This concept trips up a lot of people who decide to get into the streaming game with Flash Media Server. It even tripped me up at first.

The other part of the equation was that you needed a fundamental grasp of server-side ActionScript to get yourself rolling. This ActionScript could range from a single line of code to hundreds of lines depending on the complexity of the project.

This latest iteration of FMS marks a significant break with standard practice. If you are into writing hundreds of lines of code, then you are going to adore Flash Media Interactive Server 3. If your goal, like me, is simply to get your video up and running, then Flash Media Streaming Server 3 and its VOD service is tailor-made for you.

Setting up the sample files

Let's get started:

1. Download the files used in this article (linked to in the Requirements section). The FLV file is one created by the film and TV students at the college where I work.
2. Navigate to C:\Program Files\Adobe\Flash Media Server 3\applications. Inside this folder you will see a folder named vod (see Figure 1). Open it.
3. Copy the Legend.flv file from the downloaded sample files into the \media subfolder.

4. Close the open windows.

   

   Figure 1. Sample video file placed in the \media folder

Flash Media Server 3 contains a "video on demand" capability, which explains the folder name \vod. The VOD service lets you stream video and audio files through the server without having to write any application code or configure the server. You need only point the Flash FLVPlayback component or a Flash video object to a file in this folder and the file—as long as it is an MP4, FLV, or MP3 file—will play.

Creating a VOD streaming application

Now that you have placed the video in its proper location, let's play it locally using the VOD service on the streaming server:

1. Inside the Flash authoring environment, select File > New > Flash File (ActionScript 3.0) to create a new document. Once it opens, drag a copy of the FLVPlayback component from the Components panel to the Stage.
2. Save the Flash file to a folder of your choosing.
3. Click once on the component on the Stage, click the Parameters tab or open the Component inspector done and use the following settings:
• align: center
• autoPlay: true
• cuePoints: None
• preview: None
• scaleMode: maintainAspectRatio
• skin: SkinUnderAllNoFullNoCaption.swf
• skinAuthoHide: false
• skinBackgroundAlpha: 1.00
• skinBackgroundColor: #009933

4. Double-click the source parameter. When the Content Path dialog box appears, enter rtmp://localhost/vod/Legend (see Figure 2).

   

   Figure 2. Path to the video using an RTMP address

   That address is the path to the FLV file and follows the rtmp://server/Application/Instance syntax I mentioned earlier. In this case, the server is localhost, the application is vod and the instance is Legends.flv in the \media folder.

   Note: I discuss setting the FMS server to localhost in my other tutorial, Beginner's guide to installing Flash Media Server 3.

5. Save and test your movie. If everything is where it should be, the video starts to play (see Figure 3).

   

   Figure 3. Welcome to Flash Media Server 3!

Streaming various file formats

Flash Media Server 3 works with a number of file formats other than FLV. It also streams MPEG-4 and MPEG-3 files out of the \vod folder. If you decide to use these two formats, the content path will be different.

Assume you have an MPEG-4 and MPEG-3 version of the Legend file. You've named the files Legend.mp4 and Legend.mp3 and placed them in the \vod folder.

To access the MPEG-3 file, use this file path:

rtmp://localhost/vod/mp3:Legend

Note the change after the \vod folder. Also, you don't need to include the MP3 extension after the filename.

Things are a bit different when it comes to streaming an MPEG-4 file. As shown in Figure 4, the path to file would be this:

rtmp://localhost/vod/mp4:Legend.mp4

Notice that this time you do need to include the file extension (.mp4). This holds true for other formats that use the H.264 standard, such as MOV (.mov) files.

Figure 4. Setting the path to an MPEG-4 file

The different syntaxes are summarized as follows:

• FLV: rtmp://domain/app/streamname (no .flv suffix)
• MPEG-3: rtmp://domain/app/mp3:streamname (no .mp3 suffix)
• MPEG-4: rtmp://domain/app/mp4:streamname.mp4 (use the suffix for any compatible MPEG-4 file: .mov, .avi, .mp4, etc.)

Streaming in the real world

The next question, of course, is "That's all well and good, Tom, but how do I get it to play on a real, live FMS 3 server?"

The answer is a simple change to the code. Replace localhost with the RTMP address supplied by your Flash Media Server hosting provider and you are in business. Naturally, you will need to upload the video file to your account on the hosting provider's server but other than the address change and the upload, you really don't need to do much more than that.

Note: Keep in mind that no two Flash Media Server hosting providers are created equal, as pointed out in Consumer's guide to using a Flash Media Server hosting provider by the folks at Influxis. Your RTMP address and workflow may be a bit different, too, so it's always best to check with your hosting provider once you get going.

Where to go from here

The next tutorial shows you how to use ActionScript 3.0 to stream an H.264 video from the vod folder, and then stream that same video from an application.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author