Streaming Media - August/September 2007 - (Page 52)

viewer stops watching the video halfway through, you’ve only transferred half of the video file. If they were watching a progressive video, the whole video may have been downloaded and cached by the time they’ve watched half. So you’ve just transferred twice as much data as you needed to for the same experience. Cha-ching. • Do you want to have the ability to detect the viewer’s bandwidth fluctuations and adjust the quality of the video to assure a smooth viewing experience? One great benefit to streaming video is the ability to swap out the video on-thefly during playback. You can detect the viewer’s bandwidth, and if it dips, you can swap in a lower bit rate video without interrupting their viewing experience. You can detect bandwidth when using progressive delivery as well, but you’d have to stop playing the current video and start playing the lower bit rate video from the beginning. (Caveat: There are ways to start playback in the midpoint of a progressive video, but they involve some tricky serverside scripting.) • What’s the scale of your project? Will there be steady, heavy traffic or traffic spikes? If you expect a lot of viewers (one can hope!), you may want to consider hosting your videos with a content delivery network (CDN). CDNs offer load balancing and geo-targeting to assure fast, reliable video delivery. These services can be used for both progressive and streaming video. a crash course in flash video can choose to create either an ActionScript 2 file or an ActionScript 3 file. If you choose AS2, it will be playable in Flash Player 8 or 9. If you choose an AS3 file, viewers will need Flash Player 9. (In these examples, though we’re working in Flash CS3, the steps for Flash 8 are virtually the same. I’ll point out any differences along the way.) Step Two: Open the Components panel if it’s not open already. You’ll see a menu similar to Figure 3 (p. 48). From the Video directory in the panel, click and drag an FLVPlayback component onto the stage. Your stage should look something like Figure 4 (p. 48). Step Three: Now, with the component selected, take a look at the Parameters panel (Figure 5, p. 50). This is where you specify all the parameters for the component you’ve got selected. (Note that all of these properties can also be set in ActionScript, if you prefer to write code instead of setting them in the Flash workspace.) There are really just two important parameters to set for most simple uses: source and skin. The other parameters are explained in Table 1. Though most CDNs offer support for Flash Video, there are five companies that have officially partnered with Adobe to fully support Flash Video streaming: Akamai, Limelight, VitalStream, Mirror Image, and J-Stream. These companies participate in the Flash Video Streaming Service (FVSS) program, working closely with Adobe to optimize their networks specifically for FLV streaming using Flash Media Server. If you’re going to stream large amounts of Flash Video, I recommend that you look at one of these companies first. Figure 6. Choosing a skin for the FLVPlayback component. How Do I Get FLVs into Flash? All right, now that all that is settled, let’s take a look at how you actually get an FLV to play in Flash. There are two options: the FLVPlayback component or a Video object. Arguably the easiest way to play an FLV is by using the FLVPlayback component that ships with Flash (Figure 2, p. 48). There are a variety of player control skins available to use with the component, or you can create your own. The newest version of the FLVPlayback component that ships with Flash CS3 is actually pretty easy to customize (compared to the older Flash 8 component). This new CS3 version was completely rewritten to be easier to skin, and has a much smaller file size. Using the FLVPlayback component is quite easy; it’s just a matter of dropping the component on the stage in Flash, setting a few parameters, and publishing your movie. Let’s walk through the process: Step One: Open a new document in Flash. If you’re working in Flash 8, you’ll be creating an ActionScript2 file. In Flash CS3, you 52 STREAMING MEDIA August/September 2007 Step Four: To choose a skin (playback controls) for your video player, select the skin parameter in the Properties panel, and then click on the magnifying glass icon. From here, you can choose one of the skins included with Flash CS3 from the drop-down menu. You can also specify a custom skin URL if you’ve created your own (see Figure 6). Step Five: After choosing a skin, click OK. Then publish the SWF to watch your video, complete with playback controls. See, wasn’t that just too easy? The second, more Zen-like option to get an FLV playing in Flash is to use a simple Video object. This is basically just a box that the video will play in. You specify the size of the box, the filename of the video you want to play, and voila! There are no skins, player controls, or other bells and whistles. This can be perfect if you just want a small, lightweight SWF that plays video, or if you’re building a customized player. The Video object can be just the building block you need. To use it, however, you have to write a bit of ActionScript. Not much—the magic happens with

Table of Contents Feed for the Digital Edition of Streaming Media - August/September 2007

Table of Contents Sweet Sixteen Letters to the Editor Technology and Business Trends IBM Takes Webcasting to the Desktop ROI in the EDU Bank Serves Espresso, Enterprise Video Online Video Advertising: Hit or Miss MLB’s Foul Bawl A Crash Course in Flash Video Newspapers in Multimedia Metamorphosis Webcasting Large Entertainment Events: Seeing Through the Hype Webcasting With Windows Media Can’t Start A Fire . . . A WiMAX Primer Mobile Video at Last Telestream Episode Pro Grass Valley ProCoder 3 Silverlight Is No Flash Killer

Streaming Media - August/September 2007

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.