Flash video template: Dynamic video playlist
Lisa Larson-Kelley
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 Flash Video Learning Guide has a whole section on adding Flash 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 CS3 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 of 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. 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.0—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
Figure 1. Elements of the video playlist application
Requirements
To complete this tutorial, you'll need to install the following software and files:
Flash CS3 Professional
- you can find in this Blog Full version with Serial
Flash Media Server 3 (for streaming delivery)
- you can find in this Blog Full version
Sample files:
- video_playlist_as3.zip (ZIP, 12.4 MB)
Prerequisite knowledge
This article assumes that you are familiar with Flash Professional CS3 and have a basic understanding of delivering video through the Flash authoring tool and Flash Media Server. You should also have a basic understanding of XML and ActionScript 3.0.