Flash 8 template: Creating a dynamic playlist for progressive Flash video

Lisa Larson-Kelley

FlashConnections

Note: This article is legacy content. For the latest information, check out the latest version of the article.

There's been a strong outcry for an article demonstrating an XML-driven playlist that does not require Macromedia Flash Communication Server. You wanted the flexibility to update your progressive Flash video (FLV) playlists without editing your Macromedia Flash source files. Ladies and gentlemen, let me present VideoSource Pro.

This version of the dynamic playlist code is adapted from the Flash Communication Server XML-driven playlist written by Chris Hock and Srinivas Manapragada, covered in detail in my other article, Creating a Dynamic Playlist for Streaming Flash Video. By changing a few lines of that code, I will show you how to create an XML-driven playlist of progressive FLV files, allowing you the flexibility to update your playlist without editing your Flash source file, and without requiring Flash Communication Server streaming.

I will outline the basic structure of this application in this article and explain the code that changes from the streaming example. For a more in-depth understanding of the code, please refer to my other article.

The basic framework of the VideoSource Pro application consists of the following components:

• An XML file as data source (playlist-demo-1.xml)
• A custom-made player for playback (VideoSourcePro.swf)
• External ActionScript files (VideoSourcePro.as, VideoThumb.as)

To get a taste of what I'm talking about in this article, check out the working sample application at the VideoSource Pro page.

Requirements

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

Macromedia Flash MX Professional 2004

Sample files:

• videosourcepro.zip (14.8 MB)

Download and unzip the contents of the videosourcepro.zip file to a new directory on your hard drive. Refer to the readme.txt file included in the ZIP file for more detailed instructions.

Prerequisite Knowledge

You should be familiar with Flash MX Professional 2004 and understand the basics of delivering video through Flash. You should also have a basic understanding of XML.

Here are some other articles that can help you get up to speed with Flash video:

• Flash Video Learning Guide
• Delivering Flash Video: Understanding the Difference Between Progressive Download and Streaming Video
• Flash Video Kit

Why Progressive Video?

Comparing the pros and cons of embedded, streaming, and progressive video is beyond the scope of this article. However, there are a few differences that warrant mention:

• Cache me if you can. Unlike streaming video, progressive video is cached. This can be a good thing (if the viewer wants to replay the clip it will play from the local cache) or a bad thing (a copy of the video resides on the viewer's computer, which could be an issue for material with strict copyrights).
• No Internet connection? No problem! For standalone usage such as a CD-ROM, where an Internet connection may not be available, progressive video is the only option for dynamic playlists. For video delivered offline, streaming video in Flash is not possible, since it requires a connection to a Flash Communication Server.
• 15 will get you… 15. Unlike videos embedded directly into your SWF file, the frame rates of your FLV files delivered through progressive download or streaming do not have to match the frame rate of the SWF file. This is an especially useful feature for a dynamic playlist application, since the FLV files in your playlist may come from different sources, and may not all have the same frame rate.

Understanding Your Thumbnail Options

The greatest hurdle in adapting this application for progressive streaming is creating the thumbnails. Flash Communication Server gives you a very simple way to create thumbnails, and it grabs only the data it needs to build a small thumbnail image. Progressive video is a bit trickier.

There are basically three approaches to implementing dynamic thumbnails of progressive FLV files:

• Attach the FLV file to a video object, scale it down, and pause on the first frame. This approach is not a feasible solution for videos of any significant length, because the file continues to load needlessly in the background, eating up bandwidth and slowing down your application.
• Manually create thumbnails as JPEG files, and reference them in the XML file. Although this approach does require a bit more work upfront on your part, it is the most bandwidth-efficient approach.
• Use a third-party server-side application such as ffmpeg to generate thumbnail images. This approach can be technically challenging, but worthwhile if you have more video clips than manpower.

In this article, I will briefly explain how to accomplish the first approach above, attaching a scaled-down FLV file to a video object for the thumbnail source. However, I will focus mainly on the second approach, pulling dynamic JPEG files for the thumbnails. The example files that accompany this article illustrate this solution.

Using Mini FLV Files

The down-and-dirty approach to grabbing thumbnails without any extra files is to attach the FLV file to a scaled-down video object, and pause the video on the first frame. This is an efficient approach for streaming video using Flash Communication Server, because only the video data needed for that frame is transferred. However, when using progressive download, the entire full-size video is loaded. If you have only very short videos, you may want to use this method. Below is the code you need to change in the VideoThumb.as file that is part of the ZIP file that accompanies this tutorial to use this method:

...
78    nc = new NetConnection();
79    nc.connect( null );
80    ns = new NetStream(nc);
81    ns.onStatus = function(info) {
80        if ( info.code == "NetStream.Play.Stop" ) {
81            nc = null;
82            ns = null;
83            }
84        }
85    thumb.video.attachVideo(ns);
86    ns.play( streamurl );
87    ns.seek(2);
88    ns.pause();
...

Here you create a new NetConnection object, and attach a new NetStream object to it. Note the NetConnection object is null for progressive video. The NetStream object is then attached to the thumb.video object and the stream is set to play, then pause on frame 2, displaying a single frame for your thumbnail. Just remember, although this video pauses, it continues to load in the background, potentially slowing down your application's performance.

A more robust solution is to load JPEG files instead. Next, I'll outline some different ways to create them, and walk you through the code that adds them to your playlist.

Creating JPEG Thumbnails

A more bandwidth-conscious way of displaying thumbnails is to create scaled-down JPEG files for each video file. You have several options for creating them; you can:

• Export a single scaled-down frame in a video editing program.
• Take a screenshot and scale it down in an image editing program.
• Use a third-party utility such as Camtasia to capture and export a single frame.

The optimal size for thumbnails in this example is 60 pixels high by 80 pixels wide, 72 dpi resolution. Place the scaled-down JPEG files in the same directory as your SWF file, in a directory called thumbs. When you have your thumbnail files, you'll need to tell your application where to find them, which brings me to the XML file that is part of the ZIP file that accompanies this tutorial.

Specifying JPEG Thumbnails in the XML File

To dynamically add new videos to your playlist, you simply edit the playlist-demo-1.xml file, which is included in the ZIP file for this tutorial. Thumbnail filenames need to be specified in this file as well. The last attribute of each item is thumb; its value is the thumbnail filename, as shown in the following code:

<xml>
    <listitem name="Battle 1" url="streams" thumb="battle1.jpg">
        <stream name="battle1.flv" />
    </listitem>

    <listitem name="Fight!!!" url="streams" thumb="fight.jpg">
        <stream name="fight.flv" />
    </listitem>

    <listitem name="Marco Diaper" url="streams" thumb="marcodiaper.jpg">
        <stream name="marcodiaper.flv" />
    </listitem>

    <listitem name="Cheetah Cougar" url="streams" thumb="cheetahcougar.jpg">
        <stream name="cheetahcougar.flv" />
    </listitem>

    <listitem name="Cloning" url="streams" thumb="cloning.jpg">
        <stream name="cloning.flv" />
    </listitem>

    <listitem name="Run" url="streams" thumb="run.jpg">
        <stream name="run.flv" />
    </listitem>

    <listitem name="Midgets 1" url="streams" thumb="midgets1.jpg">
        <stream name="midgets1.flv" />
    </listitem>

    <listitem name="Midgets 2" url="streams" thumb="midgets2.jpg">
        <stream name="midgets2.flv" />
    </listitem>

    <menu>
        <listitem name="Battle 1"/>
        <listitem name="Fight!!!"/>
        <listitem name="Marco Diaper"/>
        <listitem name="Cheetah Cougar"/>
        <listitem name="Cloning"/>
        <listitem name="Run"/>
        <listitem name="Midgets 1"/>
        <listitem name="Midgets 2"/>
    </menu>
</xml>

To display the thumbnails in the playlist, you'll now edit the VideoThumb.as file to grab them.

Adding JPEG Thumbnails to a Playlist

A few small changes to VideoThumb.as are needed to pull the thumbnails specified in the XML file:

60    //grab jpg thumbnail instead of initiating stream.
61    var newClip = this.createEmptyMovieClip("thumbie",this.getNextHighestDepth());
62    newClip.loadMovie("thumbs/"+stream);

This code attaches the JPEG file to a newly generated movie clip inside thumb.video, which is displayed in the ListBox component. Note that the thumbnail cannot be attached directly to the thumb.video object, as was done in the streaming example, because the JPEG file will not just attach, but will unload any content currently loaded. In this case, it unloads the caption data. So you will create a new movie clip inside, called newClip, and load the JPEG file there.

There's only one more change needed to finish up the application, in the VideoSourcePro.as file.

Changing the NetStream Code

You have to makeonly one simple change to the VideoSourcePro.as ActionScript to convert it from streaming to progressive download:

14    nc.connect( null );     //null connection for progressive download

That's it! Now you can publish your VideoSourcePro.fla file and experience the power of progressive download video streaming (see Figure 1). Vive le FLV!

Figure 1. The final VideoSourcePro.swf file

For a working sample application, go to the VideoSource Pro page.

Where to Go from Here

You can refer to the following resources on the Macromedia website relating to XML and Flash video technology for other useful applications:

• XML Topic Center
• Flash Video Topic Center
• Creating a Playlist for Streaming Flash Video
• Understanding the Difference Between Progressive Download and Streaming Video

Also, if you want to further customize the thumbnail and caption display you may find this overview of Cell Renderers very helpful.

About the author