Home / Developer Center / Flash Developer Center /

Flash Article

Delivering High-Quality Video with Flash Video Streaming Service

Tim Napoleon

Flash Video Streaming Service (FVSS) is a hosted service by VitalStream that allows you to deploy Flash video quickly and easily over a load-balanced, reliable content delivery network. Think of FVSS as a web host for Flash audio and video that delivers all the advantages of on-demand streaming from Flash Communication Server without requiring you to purchase, set up, and maintain servers of your own. FVSS provides a turnkey service that offers clusters of streaming servers that are load-balanced across multiple data centers. Because the back-end complexity is simplified, sophisticated developers as well as ordinary video users can take advantage of this service.

Key features of FVSS include the following:

On-demand audio and video streaming by simply uploading Flash audio or video (FLV) files or MP3 audio files.
Full "true-streaming" capabilities, such as quick start, ability to seek to any point in a file before it downloads, efficient bandwidth usage, no media file downloads on the client, and so on.
Ability to receive events and notifications from the server during video playback. For example, find the length of an FLV file from the server and update a customized progress bar.
Built-in load balancing and failover that handles a large amount of traffic.
Reporting and monitoring tools for instant statistics about your traffic.

Pricing for the service can be found at www.vitalstream.com/macromedia. Call (800) 254-7554 and mention the Macromedia Developer Center to set up a free trial account.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flash MX Professional 2004

Basic Use of FVSS

No programming or building of Flash files is required. The FVSS Project Manager outputs simple copy-and-paste HTML that embeds a professionally designed Flash skin with controls for video playback:

Go to macromedia.com and install the latest version of Flash Player.
Go to flashadmin.vitalstream.com and log in to your account.
Click the Create a Project button and then click Next.
Click Upload and drag your FLV files onto the server. After the upload, the file becomes available for streaming within one minute.
Refresh your browser and select a file for playback. Click Next.
Select a size and Flash Player skin and click Next (see Figure 1).
Click Preview to watch the video stream.
Click Select All and then copy and paste the HTML code to embed this player in any web page (see Figure 2).

Figure 1. Select from these ready-to-use templates or (in the next screen) download the source FLA file to create your own.

Figure 2. The complete HTML and Direct File Link information is provided for easy pasting into a web page for playback.

Beyond the Basics

FVSS includes a full set of developer features to handle any specialized development efforts that may occur:

XML Interface to Streaming Servers: Return streaming application path guarantees optimal stream performance.

Note: FVSS implements a crossdomain.xml file for Flash Player 7.0. For applications using Flash Player 6.0, read the Flash TechNote, "Loading Data Across Domains."

Integrated Behavior for Media Components: Necessary code is added automatically to connect Flash MX Professional 2004 media components to FVSS.
ActionScript: FVSS supports the on-demand object model of Flash Communication Server.

Streaming Using Media Components

To build a streaming slide show, connect the media components to the XML interface using the FVSS behavior. Follow these steps to start a new Flash slide presentation:

Right-click in the Timeline and select Insert Slide in the pop-up menu.
Repeat Step 1 to create three slides total.
Add whatever graphics or movies you want to create your dynamic slide presentation.
On the top presentation slide add the Media Playback components.
In the Components window add the slide timings by scrolling down to the plus sign and adding the slide's name and timing (using format hh:mm:ss:ff).
Select the media component on the presentation layer. From the Behaviors window add a behavior by choosing Media > Flash Video Streaming Service Powered By VitalStream. A window will prompt you for a URL to the VitalStream server XML file.
From a web browser log on to flashadmin.vitalstream.com.
Select a project and click Get Embed Code.
At the bottom of the page select the URL in the Direct File Link field. For example: http://flash.vitalstream.com/flashgen.cgi?sname=xxx.flv&aname=xxx_vitalstream_com.
Paste the URL into the prompt mentioned in Step 6 and click OK.
With the Media Playback component still selected you can synchronize the slides with the media using another behavior. Add the behavior by choosing Media > Slide CuePoint Navigation.
Test your movie. See the movie start and the slide flip when the movie hits the key cue points.

Adding Advanced Features

For some applications advanced developers may want to use ActionScript that's independent of the built-in behaviors. The following steps show you how to create a video stream using FVSS and ActionScript:

Call the VitalStream XML file to return an application server. For example: rtmp://server/application.

Place the following code in the onload object of the Media Display component so it can call the VitalStream XML file:

on (load) {

   // Start VitalStreamMediaURL Behavior
   // Example Vital Stream Media URL:

//http://flash.vitalstream.com/flashgen.cgi?sname=flashfile.flv&aname=xxx_vitalstream_com
   // Example rtmp URL, derived from VitalStream Media URL
   // rtmp://server/xxx_vitalstream_com

//Create a XML object that will load the media url

   var vs_xml:XML = new XML();
   vs_xml["media"] = this;
   vs_xml.onLoad = function(success:Boolean)
   {

//The success event on the xml load event 
//We can now parse out the values we need

      if (success)
      {

//We transverse the XML file to grab the appURL(rtmp://server/xxx_vitalstream_com)

         var appURL:String = this.firstChild.firstChild.nextSibling.firstChild.nodeValue;

//The XML file passes back a file passed in from the sname querystring. This allows a developer to dynamically pass media files to a compiled swf file.

         var streamName:String = this.firstChild.firstChild.firstChild.nodeValue;

// We don't seem to need ".flv" at the end of the file name for the Media Components. 

         this["media"].setMedia(appURL + "/" + streamName, "FLV")

      }
      else
      {
         trace("Loading Error!");
      }
   };

//This fires off the XML for loading. If you are using a 6.0 player and all the XML variables seem to be null read up on cross domain policy. 7.0 Players will read the cross domain policy files.

vs_xml.load("http://flash.vitalstream.com/flashgen.cgi?sname=flashfile.flv&aname=xxx_vitalstream_com");

Launch your movie and watch the video play almost instantly (see Figure 3).

Figure 3. Your video is ready to play in just a few clicks.

If you place your SWF file on a web server it will automatically play videos from the streaming service. You won't have to worry about capacity limitations or concurrent users. The service routes all traffic dynamically as long as you call the XML file correctly.

FVSS allows anyone to power Flash video applications using a world-class network. The workflow is flexible enough to support nontechnical Flash users as well as advanced developers:

Encode Flash video directly from Flash Video Exporter.
Upload the FLV files to FVSS.
Connect to FVSS using the direct link and XML object to get the correct URL for the video.
Stream your video through the Flash MX Professional 2004 media components.

As you can see, along with the video functionality provided in Macromedia Flash MX Professional 2004, FVSS provides a complete streamlined workflow for creating and deploying compelling Flash video websites.

About the author

Tim Napoleon is Director of Business Development at VitalStream, Inc., a leading Internet streaming integrator. Their mission is to empower content owners to use the Internet as a profitable distribution channel. E-mail questions or comments to Tim at tnapoleon@vitalstream.com.