Web video template: Dynamic video playlist

If you've published video on the web yourself, without the help of a portal like YouTube, you know how easy it is to import video into Adobe Flash and publish a SWF file that contains the video component and plays your movie file. (If you don't, the Video Learning Guide for Flash has a whole section on adding web video to your website.) More often than not, however, you want to publish multiple videos on the same web page—without authoring a new SWF for each one. What you want is a player that's flexible and shows any number of videos you point it to.

This article explains how to do just that. It provides a template with instructions for both streaming and progressive delivery of your video to a customizable player. The sample project you create includes a dynamic playlist using XML and Flash CS4 components that you can customize and extend.

If this video template looks familiar, it's because I wrote a tutorial about it back when Flash first featured a video workflow (Flash MX Professional 2004). In this thoroughly revised article, I've incorporated some of the feedback that readers have sent me over the years about developing playlists, answered many common questions, and demonstrated some of the most requested features.

Note: This tutorial describes how to create a dynamic playlist for both progressive and streaming delivery of video to Adobe Flash Player 9 and later. To find out how to build a similar playlist targeting older versions of Flash Player, see my past articles, Creating a dynamic playlist for progressive Flash video and Creating a dynamic playlist for streaming Flash video.

The code in this article should be clear enough to follow, even if you're just getting started with ActionScript 3—so don't be intimidated! Sample code is provided, along with some sample videos (vintage cartoons courtesy of the Prelinger Archives), so you can test your application right away.

The basic framework of the playlist application consists of the following (see Figure 1):

• XML file as the data source (playlist.xml)
• Custom-made player for playback (VideoPlaylist.swf)
• Custom-made player source file (VideoPlayer.fla)
• External ActionScript files (VideoPlayer.as, Thumb.as)
• Adobe Flash Media Server if you plan to present your content via streaming delivery

Comparing the pros and cons of streaming and progressive video is beyond the scope of this article. (Read the Video Learning Guide for Flash for an overview of Flash video delivery options.) Even so, you should decide which method of delivery to use before you begin. As a quick review, let's outline the major benefits and pitfalls of each.

Progressive delivery

• A standard web server is all you need. You don't need any special server software to deliver video progressively. It is transferred via HTTP, just like any other file into your browser (such as a JPEG, GIF, HTML, or SWF).
• No Internet connection? No problem! For stand-alone 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 Player is not possible because it requires a connection to Flash Media Server.
• Caught in the cache. Unlike streaming video, progressive video is actually downloaded to the viewer's hard drive. 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). Streaming is a better option if you want to control who watches your video and what happens with it.
• Seek and you may not find. One limitation of progressive delivery is that you can seek only to downloaded keyframes. You may have experienced this if you ever started to watch a video and wanted to jump ahead to the middle right away—sometimes it just hangs there. This occurs because your browser hasn't yet received that portion of the file. You must download the video file up to the point you're trying to access. If the video hasn't yet downloaded, you can't jump ahead. You may also have noticed that the seek bar jumps forward or backward a bit from where you placed it; it jumps because there isn't a keyframe at that spot. You can seek only to keyframes—frames that contain 100% of the pixel data for that frame. (All other frames in a video contain only the data that has changed from the previous frame; this is how videos are compressed.)

Streaming delivery

• No cache. Unlike progressive delivery, streaming video is never downloaded to the viewer's hard drive. The video data is displayed as it is received, and then it is discarded. This is great for copyright-protected video, as there is never a copy of the file saved in the browser cache.
• Seek anywhere, anytime. You won't encounter any of the seek problems seen in progressive delivery when you stream your video. If you want to jump right to the end, no problem. You just start receiving data from that point, with a keyframe created by Flash Media Server on the fly.
• Trim your bandwidth budget. Another benefit to streaming is a potential savings in bandwidth costs. Unlike progressive delivery, only the content watched is transferred. For example, with progressive delivery, someone may start watching a video, have it completely download in the background, and then close the browser halfway through—effectively wasting all that downloaded data. With streaming, however, users download only the portion of the video that they watch.
• Hosting choices. Video is streamed to Flash Player through Flash Media Server. To stream your video, you'll need to purchase a license or work with a Flash Video Streaming Service. For testing purposes and small-scale deployments, you can use the free Flash Media Development Server 3. (For more information on that, read Tom Green's article, Beginner's guide to streaming video with Flash Media Server.)

Before beginning the development of your dynamic playlist application, you should understand how to deploy it to the web. The setup differs for progressive and streaming delivery, but only slightly. The biggest difference is where you place your video files. Take a closer look (see Figure 2).

No matter which delivery method you choose, you'll have to upload your application SWF and associated files to your standard web server. All of these files are required:

• playlist.xml
• SkinUnderPlayStopSeekFullVol.swf (or another player skin of your choosing)
• VideoPlaylist_CS4.html
• VideoPlaylist_CS4.swf
• thumbs directory containing all thumbnail JPGs specified in playlist.xml

You'll also need to upload your video files. The location you place them depends on your delivery method.

For progressive delivery, just create a new directory called videos in the same location as the files above and copy all of your files there. After doing so, you're ready to test your application.

Note: You can download the free Flash Media Development Server 3.5 for local testing or sign up for an account with a Flash Video Streaming Service (FVSS) provider if you don't yet own a Flash Media Server license.

For streaming delivery, you will need to upload your videos to Flash Media Server (FMS). The setup is quite simple. This article assumes that you are running FMS locally, but the application setup would be the same if you were using a remote server. Follow these steps to set up your FMS application:

1. Create a directory inside the Applications directory (in your Flash Media Server directory) called videoplaylist.
2. Copy the generic main.asc file (provided) into videoplaylist.
3. Create a streams directory inside videoplaylist.
4. Create a _definst_ directory inside the streams directory.
5. Place the video files that you wish to appear in your playlist in this _definst_ directory.

That's all the setup required on the server side for streaming delivery. You'll then be ready to connect to the application and test your streaming video playlist (once you create it, of course—I'm getting to that!)

The ActionScript for your playlist is identical for either deployment method. The only difference is in the source path of your videos in the playlist.xml file. I cover this in more detail in the next section.

This section describes the structure of the XML data files, playlist.xml, and playlist-streaming.xml, all of which are included in the sample files you downloaded on the first page of this article.

To add new videos to your playlist dynamically, simply edit the appropriate file: playlist.xml for progressive delivery or playlist-streaming.xml for streaming. Here's the code in playlist.xml:

Notice that both sample files have a very basic XML structure, holding two main elements:

• playlist (the list of video items)
• vid (video items with their description, source, and thumbnail attributes)

The src attribute must point to your video files.

For progressive videos (shown above), you update the src attribute with a relative path to the video from the SWF file; in this example, you've copied all the files into a folder aptly named videos.

For streaming video, just append your Flash Media Server address and application name to your video filenames, as shown in this playlist-streaming.xml example:

This playlist-streaming.xml example file assumes that you are working with Flash Media Server running locally. If you are running a remote FMS server or using an FVSS provider, include your server address here instead of "localhost."

Go ahead and edit the XML file that corresponds with your delivery mode to play your own videos, or proceed using the provided sample videos for now.

Note: When you are streaming MPEG4 videos (MOV, M4V, F4V, MP4, etc.) with Flash Media Server, you'll need to append MP4: to the beginning of your filename to make your video play.

The src attribute for a streaming MPEG4 video looks like this:

You do not need to add the "MP4:" prefix when using progressive delivery.

Now that you've established the data source for your playlist, launch Flash CS4 Professional and start working on the application interface.

Here I explain the structure of the finished player and walk you through the process of creating the interface in the Flash authoring environment.

The application has a relatively simple interface, consisting of an FLVPlayback component for the video display and a TileList component for the playlist (see Figure 3).

The TileList component is populated automatically from the contents of your XML file. The TileList component is perfect here because it allows you to easily include a small thumbnail preview of each video. Each item in this list links to the appropriate video file, which plays in the FLVPlayback component when clicked.

Create the interface by placing and configuring the two components. Open Flash and follow these steps:

1. Create a new Flash file (ActionScript 3) and save it as VideoPlaylist.fla.
2. Access the Components panel by selecting Window > Components. Drag an instance of the TileList component from the list of components to the Stage. Name the instance tileList.
3. Drag an FLVPlayback component from the Components panel onto the Stage. Name the instance myVid.
4. With the FLVPlayback component selected, edit its parameters by selecting Window > Component Inspector. Set autoPlay to false, and scaleMode to noScale. Since the dimensions of your videos will be automatically detected by the FLVPlayback component, the scaleMode setting will determine what to do if the videos are different sizes:
   • noScale retains the original size of the video and resizes the playback skin
   • maintainAspectRatio resizes your video to fit the current dimensions of the component but does not stretch the video
   • exactFit stretches the video horizontally and vertically to match the dimensions of the component
5. Ensure that you have updated these settings in the Component inspector before continuing (see Figure 4).

The component automatically changes its placement on the page, depending on the setting for the align property. By default, the component remains centered on its current registration point. If you were to reset the registration point to align topLeft instead, the placement of the video would remain anchored at the top left corner and would shrink or grow from that point. (I've encoded one of the sample video files with smaller dimensions than the others to demonstrate this alignment behavior. See if you can find which one it is!)

6. Click anywhere on the Stage to display the document properties in the Properties panel. Enter VideoPlaylist as the Class and adjust the Stage size if desired (see Figure 5).

At this point, your Flash file should look something like Figure 6.

7. Save the file as VideoPlaylist.fla.

That's all there is to creating the functional interface. Save this file; you'll create the separate ActionScript files next, and then open VideoPlaylist.fla again later to skin the playlist.

Are you ready for the fun part? The next section gets into the meat of the application—the client-side ActionScript.

This section explains how to read in, or parse, the XML document, create the dynamic playlist, and play selected videos. (I think you'll be surprised how remarkably simple it is to do all of this in Flash!)

As I mentioned previously, all of the ActionScript used in this project is contained in external class files. Begin by creating an ActionScript file called VideoPlaylist.as in Flash, Flex Builder, Dreamweaver, or in your favorite text editor. Save it in the same folder as VideoPlaylist_CS4.fla. I'll walk you through the code here, so you understand how it works.

Step 1: Import the required classes

Import the classes that are needed later in the script:

Step 2: Create the main constructor

Set up the class constructor and main VideoPlaylist method:

The VideoPlaylist method loads the XML data. Once it is successfully loaded, it triggers the initMediaPlayer method. ActionScript 3 has given us some powerful XML handling features, so this part is amazingly easy.

The overall format of the TileList component is set up in this first method as well, specifying the size, row height, and scrollbar behavior—and assigning the class that will control what the playlist looks like. (I describe that class in the next section.)

Here's the initMediaPlayer method:

The initMediaPlayer method accomplishes the following:

1. Assigns the loaded XML data to the myXML object.
2. Steps through all of the XML nodes (list items) and adds each one as an item in the TileList component.
3. Adds an event listener to react to selection changes in the TileList. When an item is selected, the listListener method is called.
4. Selects the first video in the list, and automatically loads it into the FLVPlayback component.

Finally, set up the listListener function to handle change events fired by the TileList component:

You're almost there. Now you have a video player that reads in a list of videos from your external XML data source and loads the first video in the list into the FLVPlayback component. Before you go ahead and test the app, however, you still need to set up the TileList component to accept the thumbnail of the video file. Just to get a bit fancy, I'll cover the process of customizing its skin as well—it's easier than you might think.

At this point, the application is clean and functional. However, the functionality for displaying the video thumbnails is not yet implemented.

To make the TileList component load your thumbnails, you need to set up a custom CellRenderer. While you're at it, why not customize the look of your list as well? Specify the skin for the mouseover and selected states of the video items.

Note: If you are integrating this code into your own custom file, it's important to note that the TileList will not populate correctly if you place it on a layer that is masked.

If you've worked with components in older versions of Flash, you're going to love how easy this is to do now. As you may remember, you've already assigned a CellRenderer in the main constructor of the VideoPlaylist.as class:

So, you now need to actually create this cellRenderer class. In the code editor of your choice, create a new ActionScript file and name it Thumb.as. Save this file in the same location as your VideoPlaylist.as file.

Step 1: Import the required classes

Import the classes that are needed later in the script:

Step 2: Set up the constructor

Set up the main constructor:

This main constructor accomplishes the following:

1. Sets up basic scaling and cursor behaviors.
2. Assigns movie clips to the mouseover states of the playlist items.
3. Creates and formats the description text field. (Here you are specifying an x coordinate, maximum line width, and allowing the text to wrap if it is longer than one line.)
4. Adds some additional style attributes to the text, specifying the font, color, and size.

After you've added this code, save the Thumb.as file.

That's all that's required to create the custom CellRenderer. There's just one final step before you can go ahead and test your application—create some simple movie clips that will be used to customize the look, or "skin" of your playlist. You specified these movie clips in the Thumb.as code:

Note: This step is optional. If you are happy with the default mouseover skins, you can remove the six setStyle lines from Thumb.as, then skip ahead to the section called "Publishing your video playlist."

Step 3: Create custom mouseover skins

Open your VideoPlaylist.fla in Flash. You'll be creating three new movie clips: ThumbCellBg, ThumbCellBgOver, and ThumbCellBgSelected. Follow these steps to use the movie clips as custom rollover states for your TileList component, and feel free to use other colors if you like:

1. Select Insert > New Symbol. Name the symbol ThumbCellBg and select the option to Export for ActionScript (see Figure 7).

2. With the Rectangle tool selected, draw a box that is 215 pixels wide by 86 pixels tall, at x=0 and y=0. Make sure it has no stroke, and give it a fill color with an alpha of 0%.
3. Still within the ThumbCellBg symbol, choose Insert > Timeline > Layer and select the first frame on the new layer you created. Again, with the Rectangle tool selected, draw a box at x=10, y=4 that is 78 pixels wide by 77 pixels tall. Give it a 1-pixel-wide gray (#999999) stroke with no fill. You've just created the basic look of an unselected playlist item.
4. Go back to the main Timeline and choose Insert > New Symbol again. Name this one ThumbCellBgOver and select the Export for ActionScript option. Using the Rectangle tool, draw a box at x=0, y=0 that is 215 pixels wide by 86 pixels tall with no stroke. Give this box a gradient fill with a basis color of #F4F402 and four points of variation (the outside edge points have a 20% alpha and the inside points have a 10% alpha in this example). You've just created a nice highlight for the "over" state of your playlist items (see Figure 8).

5. Create the final movie clip for your custom playlist skin, the "selected" state. The easiest way to do this is to duplicate the movie clip you just made. In the Library, select ThumbCellBgOver by clicking on it once, then select Duplicate from the Library's drop-down menu. Name the new movie clip ThumbCellBgSelected and select Export for ActionScript. Now you just need to add a box to outline your selected thumbnail in red. Create a new layer and select the first frame. With the Rectangle tool, draw a box at x=10, y=4 that is 78 pixels wide by 77 pixels tall. Give it a 1-pixel-wide red (#CC0000) stroke with no fill.

That's it! You've just skinned your playlist.

With all of your ActionScript and playlist skins in place, you are now ready to publish the SWF. Select File > Publish or Control > Test Movie. The XML data will load into your playlist, and your first video should be cued up to play. Just click the play button or select an item in the playlist to start playing a video.

Note: If you're using progressive delivery, your videos can be previewed locally with no Internet connection required. If you are streaming your videos using Flash Media Server, be sure that your videos are copied into your Flash Media Server directory as outlined earlier, and that your server is running (either running locally or accessible via the Internet) in order to test your application.

Playing in full-screen mode

One feature that you may want to add is support for full-screen video playback. This is remarkably easy to do. In fact, all of the video examples provided (and the code you've been working on so far) supports full-screen playback—and you didn't even know it!

All you need to do is specify the correct HTML template and publish your project. Select File > Publish Settings, check the box for HTML, and select the HTML tab. From the Template drop-down menu, choose "Flash Only – Allow Full Screen" (see Figure 9).

Click Publish, then OK. That's it! Now when you launch the HTML page in your browser, you can click the full-screen icon in your FLVPlayback skin (be sure to chose a skin that includes one) and voilà—full-screen video goodness!

The final step describes the process of deploying your files to the web for all the world to see.

The beginning of this article outlined the location of the video files for both progressive and streaming delivery. Now that you've developed the sample application, let's review. You will need to place your SWF file and other associated files in your web-accessible folder. And you'll need to copy your videos to either your web server (for progressive delivery) or Flash Media Server (for streaming).

The following files should be in your web-accessible folder on your web server:

• playlist.xml
• SkinUnderPlayStopSeekFullVol.swf (or another player skin of your choosing)
• VideoPlaylist_CS4.html
• VideoPlaylist_CS4.swf
• thumbs directory containing all thumbnail JPEGs you specified in playlist.xml

The last step is to be sure your videos are uploaded in the proper place for your method of delivery. If you're unclear about where they belong, refer back to the section of this article entitled "Understanding the files and servers."

Once all of your files are in place on your server(s), navigate to VideoPlaylist.html in your favorite browser to test your dynamic video playlist, complete with thumbnails and a custom TileList skin.

Preview the dynamic video playlist template

Extending the playlist

Now that you've explored the elements that comprise a simple video playlist navigation using XML, you can extend this basic framework with other features as well:

• Video clip navigation: With streaming delivery, you could specify timecodes in the XML for the beginning and end of "chapters" or "scenes" in your video. This would allow you to enable navigation within a single video via the playlist.
• Preroll ads: One way to insert ads between your videos is to specify the preroll ads in your XML. When a video from the playlist is selected, the ad plays first. In any approach, you'll need to detect when the ad has finished playing. You could do this with a custom listener, or you could add a cue point to the end of your ad that triggers a function that plays the currently selected video. To learn more about adding cue points, see Understanding cue points in the Programming ActionScript 3 for Flash online documentation.
• Synchronized captions and graphics: Closed captioning, coordinated slides and graphics with video, and other timecode-related triggers are relatively easy to implement in Flash. Using all-powerful cue points, you can add all sorts of dynamic behaviors to your video player. In addition, if you are using standard timed-text files for closed captioning, you can take advantage of the FLVPlayback Captioning component to automatically read in and display your captions. To learn more, read Web video template: Spokesperson presentation with synchronized graphics by Dan Carr.
• Dynamic streaming: Flash Media Server 3.5 and Flash Player 10 now support dynamic streaming, a new quality-of-service monitoring feature that enables you to switch seamlessly between versions of a single video stream that are encoded at different bit rates. This new feature enables media applications to adapt smoothly to clients with different capabilities—such as mobile devices with lower processing power and smaller screens, or clients with slower Internet connections—without interrupting the viewing experience. Dynamic streaming uses standard H.264 and VP6 files, and is ActionScript-controlled. For more information, refer to the Flash Media Server 3.5 documentation or Tom Green's article, Beginner's guide to dynamic streaming with Flash Media Server 3.5.

Where to go from here

In this tutorial, you created a flexible XML-based video playlist application that you can easily update, reuse, and reskin to your heart's content. Like most Flash developers, however, I'll bet you've got some custom features you'd like to add, don't you? Yeah, I thought so.

The framework I provided for you was meant to be streamlined and easy to follow, but you can easily extend it. In fact, there were some additional features that had been requested from my past articles that I've included for you. In the provided sample files, there are a few other variations you can play with:

• Loading a video using FlashVars: This example is not a playlist per se, but this sample file contains functionality that is often requested. You can specify a video name in your HTML embed code, and that video will play back automatically when you run the SWF file in your browser.
• Text-only playlist: Some of you didn't want to fuss around with thumbnails. So I adapted the code to use a simple text-only List component.
• Auto-play video sequence: Many of you wanted to know how to play one video after another automatically, so I demonstrated how that works in this example. To achieve this functionality, listen for VideoEvent.COMPLETE and trigger the next video in the playlist to play.

Some other, very useful features that you could add include bandwidth detection (client-based for progressive delivery, or server-based using Flash Media Server), custom metadata, dynamic cue points, or video preloaders. Take this basic framework and be creative.

The following resources can help you get up to speed with video in Flash, Flash Media Server, and customizing the components:

• Video Technology Center
• Flash Media Server Developer Center
• Flash Media Server documentation
• Displaying images with the TileList component
• CS4 TileList component: Custom CellRenderer and caching images (Paddy Keane)
• Skinning the FLVPlayback component

Be sure also to play with the other video templates in the Flash Developer Center.