It’s an all too familiar occurrence. You click a link to watch a video and, instead, have to sit through a 15 second ad before the video plays. Though this is an extreme example of how one plays a video sequence the technique is exactly the same.

In this tut, I’ll show you a method of playing sequential video through a video object and through the FLVPlayback component in Flash.

To get you going I have included 3 TV ads (FLV format) from the early days of television. These ads, from the Prelinger Archives are about 1 minute in length and will play one after the other. Download the files and let’s get started:

Step 1: New Document

Open a new Flash ActionScript 3.0 document. When the file opens add a new layer and name it “actions”. Lock the “actions” layer.

Step 2: Video Object

Add a Video Object to the Library. Now select “New Video” from the Library Pop Down menu. When the Video properties dialog box opens, make sure “Video (ActionScript -controlled)” is selected and click OK. When the dialog box closes you will see a video object (it looks like a video camera) in the Library.

Step 3: Add to Stage

Add the Video Object to the stage, then with the Video Object selected, click the properties tab and set the size of the object to 320 pixels wide and 240 pixels High. Additionally, in the property Inspector, give the selected video object the instance name of “myVideo”.

Before we get into the code let’s take a moment to think about what needs to be done. First off there are three FLV files that will be played through the Video Object (myVideo) on the stage. Somehow, Flash is going to need to be told which videos will played and in what order.

The next thing Flash needs to do is to cue up the next video in the line up. This tells you that you will need to keep an eye on how much time is remaining in the currently playing video. When it hits the end, or close to it, you will need to clear it out of the stream, queue up the next one in the lineup and get it playing.

Here’s how to do that:

Step 4: ActionsScript

Add the following ActionScript:

import flash.events.NetStatusEvent;

var videos:Array = new Array("Ad01.flv", "Ad02.flv", "Ad03.flv");
var currentVideo:uint = 0;
var duration:uint = 0;
var ready:Boolean = true;

The key to this entire exercise is waiting for one video to finish then lining up the next one to play. This sort of thing is tied to an event that is triggered by the video currently playing on the NetStream. That first line of code is why we import the NetStatusEvent class from the import flash.events package.

The next line of code throws the FLV files to be played into a list. Keep in mind the order of the videos in this list will be their playback order.

While we are on the subject of a list: “Yes this can be done using an XML document instead of hard-wiring the videos into the swf”. In this example we only have three videos, so managing them using an external XML document really isn’t necessary. Where an XML document is critical would be those situations where new videos are constantly being rotated through the line up or where an entire series of videos, let’s say 10 for argument’s sake, have to be played in a particular order.

The next two lines use the uint class to make sure we are always dealing with a positive number when referring to a video in the list or the length of its duration.

The final line sets a Boolean variable to true. We will be using it very shortly.

Step 5: More ActionScript

Enter the following ActionScript:

var nc:NetConnection = new NetConnection();
  	nc.connect(null);
  	var ns:NetStream = new NetStream(nc);
  	myVideo.attachNetStream(ns);
	ns.play(videos[currentVideo]);

var listener:Object = new Object();
  	listener.onMetaData = function(evt:Object):void {
  	duration = evt.duration;
 	ready = true;
 	};

ns.client = listener;

This is the standard code used to get a video to play through a Video Object. The first two lines establish a NetConnection and the null parameter in the second line tells Flash these videos will be played using a progressive download rather than streamed through a Flash Media Server.

The next code block creates a NetStream object and passes it the NetConnection parameter – nc. From there, the NetStream is fed into the video object named myVideo and Flash, through the play() method, is told which video to play in the video object.

The listener’s sole function is to reset the ready value to true. Hang on, didn’t we just do that with the variable in line 5? Yes we did, but the following code block makes the reason for this reset much clearer.

Step 6: Listen Up

Enter the following ActionScript:

ns.addEventListener(NetStatusEvent.NET_STATUS,nsHandler );

function nsHandler(evt:NetStatusEvent):void {
  if (ready && ns.time > 0 && ns.time >= (duration - 0.5)) {
  ready = false;
  currentVideo++;
  if (currentVideo < videos.length) {
  ns.play(videos[currentVideo]);
  } else {
  ns.removeEventListener(NetStatusEvent.NET_STATUS, nsHandler
  );
  }
  }
  };

We start by using a listener to tell Flash to keep an eye on what is going on while the FLV is playing. What Flash is listening for is a NetStatusEvent and these events are usually dispatched whenever the video does something like start, stop and so on. Whenever this happens the nsHandler function is fired.

The nsHandler function is where the magic happens in this project. The NetStatusEvent is constantly running and one of the things being checked is the current time in the video. Each video in this project is about 60 seconds in duration. In this case we want to be sure the current time is somewhere between 0 and 60 seconds. If it is ,the function is ignored…sort of.

Remember that ready variable in the metaData handler? A NET_STATUS event is fired a lot more than when the end of the video is reached. The ready variable ensures the function only does its thing once. If it didn’t there is a good chance it would constantly skip to the next video in the lineup because the two conditions are true. This wouldn’t be a good thing which is why, when the first three conditions – ready, the current time is greater than 0 and greater than or equal to the video’s duration – are met the ready value is set to false. The ready value is reset to true, thanks to the onMetadata handler, only when the next video loads.

Thus the balance of the code block starts to come into focus. If the current time on the stream is somewhere between 59.5 and 60 seconds, the video that is currently playing is ignored – ready = false – and the next video in the list – currentVideo++ - is yanked into the lineup. Of course, before it starts playing, it needs to prove it belongs in the lineup. This is done by checking it against its position in the array – currentVideo < videos.length - and, if its identity passes scrutiny, it is added to the stream and played.

Step 7: Save and Test

Save the movie to the download folder containing the FLV’s and test the movie.

Hey! What about the FLVPlayback component?

Glad you asked. Here’s how to do the same thing using the FLVPlayback component:

Step 8: New Document

Open a new Flash ActionScript 3.0 document. When the document opens add a new layer to the timeline and name this layer “actions”. Lock the actions layer.

Step 9: FLVPlayback Component

Add an FLVPlayback component to the stage.

Step 10: Resize the Component

Open the Properties panels and set its dimensions to 320 by 240. Next give the component the instance name of myVideo. Normally you wouldn’t manually resize the component because the component is sized to the video’s dimensions when one is chosen in the Component Inspector. In our case the entire thing will be driven by ActionScript, so you need to do this.

Step 11: Add a Skin

This can be done by selecting the component on the stage and going to Window > Component Inspector.

Step 12: ActionScript

Add the following ActionScript:

var videos:Array = new Array("Ad01.flv", "Ad02.flv","Ad03.flv");
  var currentVideo:uint = 0;

  myVideo.mouseChildren = false;

  function playCurrentVideo():void {
  myVideo.source = videos[currentVideo];
  myVideo.play();
  }
  playCurrentVideo();

  myVideo.addEventListener(Event.COMPLETE, completeHandler);

  function completeHandler(evt:Event):void {
  currentVideo++;
  if (currentVideo > 0) {
  myVideo.mouseChildren = true;
  }
  if (currentVideo < videos.length) {
  playCurrentVideo();
  }
  }

We start by creating the Array and using the currentVideo variable to keep track of which video in the list is playing.

The third line is optional but answers a “How do they do that?” question I am often asked. Have you noticed how, when you hit a site where the videos are bracketed by ads, that you can’t get at the controls to skip the ad? This line is how that is done. It simply disables all of the buttons in the component’s skin.

The first function – playCurrentVideo() - keeps the source property of the component’s instance current and plays the video.

The completeHandler() looks oddly familiar. In the case of the FLVPlayback component there are no NET_STATUS events to worry about. The only event to watch is the COMPLETE event fired when the component hits the end of the video. When this event is detected the next video in the array is yanked into the lineup and the playback controls are unfrozen. This only happens if the video can prove it is a member of the array and hasn’t been played already.

Step 13: Save and Test

Save the project to the same folder as the FLV’s and test the movie.

Conclusion:

In this tutorial I have shown you how to play a sequence of videos using either a Video Object from the library or an FLVPlayback component. You now understand how to create a playlist and have that list play in the order established. You have also seen how to disable the controls on the component’s skin to prevent users from changing the volume, skipping through the video or even pausing the first video in the lineup.

I hope you found it useful, thanks for reading.