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.

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.

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)

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.

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.

Similar Posts:

• Create dynamic playlist for streaming Flash video
• Generate Dynamic Thumbnails
• Setting Up Flash Media Server
• Add JPEG Thumbnails to a Playlist
• Create JPEG Thumbnails
• How to import a video file in FLA file
• Create Variations on a Theme
• Change the NetStream Code
• Set Up Flash Media Server on Windows
• Write the Client-Side ActionScript