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

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

Here are all the articles in the series:

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

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.5. Earlier iterations of Flash Media Server (FMS) were not exactly one of those things you'd categorize as "really easy to learn." In fact, many people who approached Flash Media Server 2 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.5: 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.5 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.5. If your goal, like me, is simply to get your video up and running, then Flash Media Streaming Server 3.5 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 Television Production students at the college where I work.
2. Navigate to C:\Program Files\Adobe\Flash Media Server 3.5\applications. Inside this folder you will see a folder named vod. Open it.
3. Copy the Legend.flv file from the downloaded sample files into the media subfolder (see Figure 1).
4. Close the open windows.

Flash Media Server 3.5 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 CS4 Professional (or CS3) 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 (Flash CS3) or open the Component inspector (Flash CS4) and use the following settings:
• align: center
• autoPlay: true
• cuePoints: None
• isLive: False
• 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).

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.

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

Streaming various file formats

Flash Media Server 3.5 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:

Note the change after /vod. Also, you do not 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.

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.5 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.

A no-Flash, no-code approach to FMS

This technique is brand new to Flash Media Server 3.5 and should get the attention of any web developer out there who lives in a world of pure HTML and CSS. If you're always telling yourself that you simply never have time to learn Flash, then your time has arrived. All you need is Adobe Dreamweaver (CS3 or CS4). For you purists who believe that plain-text editors like Notepad are the way to code, knock yourself out.

When you installed Flash Media Server 3.5, you also installed an HTTP server running Apache 2.2. If you open the webroot folder (C:\Program Files\Adobe\Flash Media Server 3.5\webroot), you will disover that there is a vod folder too. Let's use this folder to add the video player contained on the start screen to play a video:

1. Launch the start screen (see Figure 5). When it opens, you will see the video player and a text box. Click in the text box and press Control+A to select all of the HTML code in the text box. Copy the selected text to the Clipboard.

There is another way to do this. Navigate to the samples folder in your Flash Media Server 3.5 folder. Open the videoPlayer folder and double-click the videoPlayer.html file in that folder. The code you can copy appears at the bottom of the page. There is a bit more to this and I'll get into that in the next installment of this series.

2. Launch either Dreamweaver CS3 or CS4. Create a new page and save it to the FMS 3.5 webroot folder (C:\Program Files\Adobe\Flash Media Server 3.5\webroot).
3. Click once on the page and select Insert > Media > SWF (Dreamweaver CS4) or Insert > Media > Flash (Dreamweaver CS3).
4. Navigate to the swfs folder (C:\Program Files\Adobe\Flash Media Server 3.5\webroot\swfs) and insert the videoPlayer.swf file into the Dreamweaver page.
5. Open the Code view pane. Select all of the text between the <object> and </object> tags, including the two tags.
6. Paste the code into the Code pane and click the Refresh button in the Property inspector.
7. Return to Design view and test the page in your browser by either pressing F12 or selecting File > Preview in Browser. As you can see, you are streaming video through Flash Media Server 3.5 and the only skill you need is knowing how to place a SWF file on a Dreamweaver page (see Figure 6).

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.