Using SMIL Files with the FLVPlayback Component

One of the less touted features of the FLVPlayback component is its capability to load SMIL files. SMIL stands for Synchronized Multimedia Integration Language, which can describe an interactive presentation layer in a multimedia playback environment, such as Real One layer. Real was one of the first companies to actively push SMIL for the creation of interactive Web content involving video and audio playback. SMIL is just a collection of markup tags like HTML or XML. For Flash Video playback, though, SMIL can be used to describe a collection of .flv files encoded with different data rates. In this section, you learn how to create SMIL files that work with either progressive .flv files on a Web server or streaming .flv files on a Flash Communication Server (or Flash Video Streaming Service provider account). The FLVPlayback component picks the appropriate .flv file to play based on the data rate available to the user. Let's look at streaming .flv files first.

Caution 

The FLVPlayback component that shipped with Flash Pro 8 had an ActionScript code error that caused inaccurate .flv filenames to be selected from the SMIL file used with the component. We've fixed this error, and recompiled the FLVPlayback component. To avoid this error, you must use the FLVPlayback component stored in the library of the smil_starter.fla document located in the ch17/smil folder of this book's CD-ROM.

For Streaming .Flv Files

In this section, you learn how to stream .flv files from a Flash Communication Server application (or a Flash Media Server application). All Flash Video Streaming Service providers use Flash Communication Server to stream video and audio content as well. One of the benefits of using a Flash Communication Server is that the bandwidth available to the Flash movie can be determined automatically with a server-side script. As you learn later in this chapter, you have to go through a more manually intense process with nonstreaming .flv files to determine bandwidth.

Note 

Even if you don't have a Flash Communication Server, you can still complete this exercise. You access a remote FlashCom account — you only need to have an Internet connection to see this exercise fly!

Setting Up the Flash Communication Server Application

In order to use real-time streaming video content with SMIL files and the FLVPlayback component, you need to prepare your Flash Communication Server application with the server-side script that communicates information back to the FLVPlayback component. Macromedia has provided the server-side script in the following folders. Note that the indicates a continuation of the pathname.

On Windows:

 C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\ Components\FLVPlayback 

On Macintosh:

 [Applications folder]: Macromedia Flash 8: Samples and Tutorials: Samples: Components: FLVPlayback 

In this location, you can find the main.asc file to put in the application folder of your Flash Communication Server. For this example, we use an application named f8b on a Flash Communication Server account provided by Influxis (www.influxis.com). For this exercise, the main.asc is already uploaded to the FlashCom account. If you're using a Flash Video Streaming Service provider account, the necessary server-side code is already in place for you.

Note 

Many thanks to Richard Blakely at Influxis for providing hosting to us for sample video files used in this section.

Creating the SMIL File

The schema used by SMIL files to be used with the FLVPlayback component is easy to learn. Here's an overview of the supported tags:

• head: This section of tags describes the base URL of the video files, and the width and height to be used for all streams.

• meta: This tag specifies the base URL of the video files, as a base attribute. This location can be relative to the .swf file, or an absolute location. Examples include <meta base=" video/" /> and <meta base="http://www.flashsupport.com/video/"/>. For streaming .flv files, you should specify an RTMP location, such as <metabase= "rtmp://your_streaming_server/appName" />. You should only specify one <meta> tag.

• layout: This tag specifies the width and height of the FLVPlayback component, within a nested node named <root-layout> (see the example in Listing 17-4).

  Listing 17-4: The SMIL Data

   <smil>     <head>         <meta base="rtmp://flashbible.rtmphost.com/f8b" />         <layout>             <root-layout width="320" height="240" />         </layout>     </head>     <body>         <switch>             <video src="/books/4/403/1/html/2/lizardVP6_1Mbps_Stream.flv" system-bitrate="1000000" />             <video src="/books/4/403/1/html/2/lizardVP6_768K_Stream.flv" system-bitrate="768000" />             <video src="/books/4/403/1/html/2/lizardVP6_512K_Stream.flv" system-bitrate="512000" />             <video src="/books/4/403/1/html/2/lizardVP6_384K_Stream.flv" system-bitrate="384000" />             <video src="/books/4/403/1/html/2/lizardVP6_256K_Stream.flv" system-bitrate="256000" />             <video src="/books/4/403/1/html/2/lizardVP6_112K_Stream.flv" system-bitrate="112000" />             <ref src="/books/4/403/1/html/2/ lizardVP6_56K_Dial_Up_Stream.flv" />         </switch>     </body> </smil> 

• body: The body section of tags enumerates the .flv files that are available for playback. These .flv files are not a playlist. Rather, each .flv file has the same content. The content is simply encoded at varying data rates so that there's a wide range of .flv files to choose from.

• switch: This tag begins the list of .flv files to be chosen from by the FLVPlayback component.

• video or ref: Either or these tags can be used to list an .flv file. You must specify a src value, indicating the file's name. The system-bitrate attribute should be specified for every entry, except for the last. The last entry is the default video file that will be played if the data rate can't be determined or if the user's connection speed is slower than the last specified system-bitrate value.

Cross-Reference 

The tags listed here are those necessary for our exercises in this chapter. You can find more information in the Flash 8 Help panel if you search for the term "smil."

To create the SMIL file for this exercise:

1. Create a new text document in your preferred text editor, such as Macromedia Dreamweaver 8, Notepad on Windows, or TextEdit on Macintosh.

2. Save the file as lizard_vp6.smil.

   Caution 

   You must name your file with an .smil extension in order for the FLVPlayback component to recognize the content as SMIL data.

3. Add the code shown in Listing 17-4 to the text document. This SMIL data lists different data rates for an .flv file.

4. Save the text file. You load this text file into the Flash movie we describe in the next section.

Note 

This SMIL file describes the .flv files that you can find in the ch17/smil/progressive/videos folder. These files have already been uploaded to the publicly accessible Flash Communication Server account on www.Influxis.com. The Influxis account URL is specified in the base attribute of the <meta> tag.

On the CD-ROM 

You can find the completed SMIL file for streaming content, lizard_vp6.smil, in the ch17/smil/streaming folder of this book's CD-ROM.

Building the Flash Movie

Now, you learn how to use our fixed version of the FLVPlayback component to use the SMIL file you created in the last section.

1. Open the smil_starter.fla file located in the ch17/smil folder of this book's CD-ROM. Resave this document as detect_streaming.fla, at the same location as the SMIL file you created in the last section.

2. Rename Layer 1 to cfp. On frame 1 of this layer, drag an instance of the FLVPlayback component from the Library panel to the top left area of the Stage.

   Caution 

   Do not drag an instance of the FLVPlayback component from the Components panel. The shipped version of the component contains a bug with the SMIL and data rate detection code.

3. Select the instance on the Stage, and in the Property inspector, name the instance cfp.

4. Create a new layer named text. Place this layer at the top of the layer stack. Below the cfp instance, use the Text tool to add the static text Detected bandwidth:. To the right of that text, create a Dynamic text field named tBitrate, as shown in Figure 17-32. Optionally, you can set this text field to use the new Anti-alias for readability setting. You must embed the font you use in this Dynamic text field in order for this new feature to work.

5. Create a new layer named actions, and place the layer above the text layer. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on Mac). Add the code shown in Listing 17-5. Two functions are defined to initiate loading of the SMIL file and indicate the download speed:

   • init: This function is invoked as soon as the Flash movie loads. The onReady() function is used as a listener for the "ready" event broadcasted by the cfp instance. The contentPath property is set to the name of the SMIL file you created in the last section.

   • onReady: This function is invoked when the "ready" event fires from the cfp instance. Here, the bitrate value from the cfp instance is retrieved, converted from bits per second to kilobits per second, and used as the value of the text value for the tBitrate field.

   Listing 17-5: Initiating SMIL Data for Streaming Video

    import mx.utils.Delegate; var cfp:mx.video.FLVPlayback; var tBitrate:TextField; init(); function init():Void {    cfp.addEventListener("ready", Delegate.create(this, onReady));    cfp.contentPath = "lizard_vp6.smil"; } function onReady(oEvent:Object):Void {    tBitrate.text = Math.floor((cfp.bitrate/1024)).toString() + "Kbps"; } 

6. Save the Flash document, and test it (Ctrl+Enter or z+Enter). Depending on the speed of your Internet connection, the appropriate .flv file streams into the FLVPlayback component (see Figure 17-33).

Figure 17-32: The text below the FLVPlayback component

Figure 17-33: The .flv file streaming from the Influxis server

On the CD-ROM 

You can find the completed file, detect_streaming.fla, in the ch17/smil/streaming folder of this book's CD-ROM. This document features additional code in the onReady() function to display the stream name picked from the SMIL file to the Output panel.

For Progressive .Flv Files

If you're not keen on using a Flash Communication Server to stream files, you can use a good old-fashioned Web server to serve the .flv files listed in a SMIL file. In this section, you learn how to modify the files you created in the last section to work with a Web server.

Modifying the SMIL Data

For this exercise, you use the same .flv files used in the streaming example. You can find these video files in the ch17/smil/progressive/video folder on this book's CD-ROM. Make a copy of the video folder to your computer. The only modification necessary to the SMIL file is the base attribute of the <meta> tag. Open the lizard_vp6.smil file you created in the last section (as shown in Listing 17-4), and change the <meta> tag to:

 <meta base=" video/" /> 

The video/ path is relative to the Flash movie you create in the next section. Save the SMIL as lizard_vp6_http.smil.

On the CD-ROM 

You can find the modified file, lizard_vp6_http.smil, in the ch17/smil/progressive folder of this book's CD-ROM.

Modifying the Flash Movie

As we mentioned earlier in our SMIL coverage, one of the benefits of using a Flash Communication Server to stream video content is that the FlashCom application can determine the download speed of the Flash client movie. If you progressively load .flv files from a Web server, you need to establish some other means to determine bandwidth. In this section, you learn how to load a poster frame of the video (as a JPEG file) into the Flash movie before loading the Flash Video content. Based on the speed of downloading the JPEG file, you can make a fairly accurate determination of the bandwidth.

1. Open the Flash document you created in the previous section, or open the detect_streaming.fla file from the ch17/smil/streaming folder on this book's CD-ROM. Resave this document as detect_progressive.fla, at the same location as the lizard_vp6_http.smil file. Both of these files should be in the same parent folder to the video folder. Make a copy of the lizard.jpg file from the ch17/smil/progressive folder to this location as well.

2. Select frame 1 of the actions layer, and open the Actions panel (F9, Option+F9). Add the bold code shown in Listing 17-6. Instead of directly loading the SMIL file in the init() handler, you need to initiate the download of the movie's poster frame image (lizard.jpg) to get a decent estimation of the user's available bandwidth. Here's a breakdown of how the functions work:

   • downloadImage: This function creates a MovieClipLoader instance to track the load progress of the lizard.jpg image into the mcHolder instance. The mcHolder instance is placed at the top-left corner of the cfp instance. As such, the poster frame appears on top of the display area of the FLVPlayback component.

   • onLoadStart: This function is used as a listener for the MovieClipLoader instance. When the poster image begins to load, this function is invoked, marking the time with getTimer() that the load was started.

   • onLoadComplete: This function is also automatically invoked from the ovieClipLoader instance. Here, getTimer() is used again to mark the time when the image has finished downloading.

   • onLoadInit: This handler is invoked after the JPEG image has fully loaded and initialized within the movie. The calculateBW() and loadContent() functions are then invoked.

   • calculateBW: This function retrieves the total bytes of the JPEG image, and divides that number by the amount of time (in seconds) used to load the image. (Note that the bytes are converted to bits by multiplying by 8.) The data rate is then used to set the bitrate property of the cfp instance. Once the bitrate property is set, the appropriate .flv file from the SMIL file can be selected once the data is loaded. The data rate is also displayed in the tBitrate field.

   • loadContent: This function loads the lizard_vp6_http.smil file you created in the last section.

   • onReady: This function has been modified from the last exercise to account for the poster frame image on top of the cfp instance. The mcHolder instance is hidden, and the MovieClipLoader instance is deleted. The other lines of code in this function drill into the private properties of the FLVPlayback component to reveal the name of the .flv file that was selected from the SMIL file.

   Listing 17-6: Creating a Bandwidth Detection Script

    import mx.utils.Delegate; var cfp:mx.video.FLVPlayback; var tBitrate:TextField; var streamName:String; var nFirstCheck:Number; var nSecondCheck:Number; var mcHolder:MovieClip; var mcl:MovieClipLoader; init(); function init():Void {    downloadImage();    cfp.addEventListener("ready", Delegate.create(this, onReady)); } function downloadImage():Void {    mcl = new MovieClipLoader();    mcHolder = createEmptyMovieClip("mcHolder", 10);    mcHolder._x = cfp._x;    mcHolder._y = cfp._y;    mcl.addListener(this);    mcl.loadClip("lizard.jpg", mcHolder); } function onLoadStart(mc:MovieClip):Void {    nFirstCheck = getTimer(); } function onLoadComplete(mc:MovieClip):Void {    nSecondCheck = getTimer(); } function onLoadInit(mc:MovieClip):Void {    calculateBW();    loadContent(); } function calculateBW():Void {    var nTB:Number = mcHolder.getBytesTotal();    var nTime:Number = nSecondCheck - nFirstCheck;    var nDataRate:Number = (nTB*8)/(nTime/1000);    tBitrate.text = Math.floor((nDataRate/1024)).toString() + "Kbps";    cfp.bitrate = nDataRate; } function loadContent():Void {    cfp.contentPath = "lizard_vp6_http.smil"; } function onReady(oEvent:Object):Void {    var cfp:Object = oEvent.target;    var oHack:Object = cfp.getVideoPlayer(cfp.activeVideoPlayerIndex);    streamName = oHack._ncMgr._streamName;    trace("\tstreamName: " + streamName);    mcHolder._visible = false;    delete mcl; } 

3. Save the Flash document, and test it (Ctrl+Enter, or z+Enter). Because all of the files are local (that is, on your computer), you'll likely see incredibly high data rates reported in the text field below the component. However, you can use the download simulation feature available in Test Movie to test other connection speeds. As you test the movie, choose View ð Download Settings ð 56K, as shown in Figure 17-34. Open the Bandwidth Profiler in order to watch the download simulation (View ð Bandwidth Profiler). Then, choose View ð Simulate Download. The stage of the movie remains white while the Flash movie loads. Once the file loads, the poster frame download initiates, and the bitrate of the Flash movie is determined. Then, the appropriate .flv file is loaded, as specified by the SMIL file. For the 56K simulation setting, you should see the lizardVP6_56K_Dial_Up_Stream.flv play. Feel free to try other download speeds with the Simulate Download feature.

Figure 17-34: Choosing a connection speed

Note 

You might be wondering why we didn't simply use the load progress of the actual Flash movie file (.swf) to determine the data rate. Unfortunately, getBytesLoaded() and getBytesTotal() return the uncompressed bytes of the Flash movie, not the actual file size. As such, accurate bandwidth detection can not be conducted on the .swf file download.

On the CD ROM 

You can find the completed files in the ch17/smil/progressive folder of this book's CD-ROM.

Using Appropriate Data Rates with Your Target Audience

You might be wondering why it's worth going through so much hassle to use SMIL files with multiple encodings of video content. To be blunt, serving video over the Web is entirely subjective. You can make anyone wait for a high-quality video file, regardless of the connection speed. In fact, some Web sites only want to offer high-quality video, because their audience has high expectations for online content — if you have a slow connection, you can tough it out and wait for the video to download. There are a few issues you should consider, though, when devising your video deployment strategy for a Web site:

• Streaming or not? If you decide to use real-time streaming video with Flash Communication Server, you can't make your visitors wait for streaming content. By definition, streaming content is served piece-meal to the Flash movie. Only so much video is stored in the buffer of the Flash Player for streaming content. So, if you push a high data rate stream to a user with a slow connection, the stream buffers as much as it can before playback starts. When playback begins, the buffer is exhausted more quickly than it can be replenished. The video, therefore, will pause. The user continues to experience this start and stop playback of the video. With streaming video, it's critical to offer multiple versions of the same content — unless you know that your target audience can support higher quality content.

• Qualitative experience? There are cases where you simply can not offer low data rates for video content. For example, a training video that shows a desktop screen capture can not be reduced to 320 x 240 nor can it be drastically compressed — the details of the computer screen captured just won't be decipherable. Another example may be promotional material such as a theatrical film trailer. A movie studio may not want to distribute low-quality video over the Internet; who would be encouraged to see a movie if everything in the promo was blurry? Who wants to watch an action segment at six frames a second? Such experiences could negatively affect the promotion.

• Frame rate versus frame quality? As you adjust data rates for multiple .flv files of the same content, you may find yourself in a dilemma. Do you reduce the frame rate to preserve image quality of the overall clip, or do you reduce the image quality and use a higher frame rate? Ultimately, the content should direct this decision. If you have a video clip of a dance performance, preserving smooth motion is more important than maintaining a high level of detail.

Whatever you use Flash Video for, be sure to consider these factors as you plan the architecture of your video files and server deployment.