Flash Projects - #6 - Slim Custom Video Player with Flashvars

Well, we have come a long way since the swf video player and the flv video player. Both versions of the player had a menu built in to the flash movie for selecting which video you want to play. But not all applications of a video player require a built in menu, what if you only want to play one video?

Let's go further. What if you want to play one video on one web page, but another video on another web page?

Do we have to produce a whole video player flash movie for each video we want to show?

The good news is NO. The other good news is that building a custom flv player in flash that we can re-use for different videos is a great excuse to learn some more ActionScript.

Ready? Then let's begin.

Defining the problem

So we want to produce a video player in Flash that knows which video to play, when we press play, without having to "hard code" this knowledge into the video player.

Consider solutions

There are several ways we can tackle this problem, such as:

1. We "hard code" the video player to look for a video of a pre-determined name and pre-determined relative location. But that means having multiple copies of the same video player in different folders. Saves us some ActionScripting, but means that the user has to download the video player every time from a new location.
2. We use an XML file external to the video player to tell it what video it needs to play. Not a bad idea but some relatively complex ActionScript for a relatively simple thing. No, there is a simpler way.
3. We use the obscure but very handy Flashvars capability to tell the videoplayer what to play by including the information within the Object and Embed tags in the HTML.

We do the last option.

How does Flashvars work?

Adobe sum it up on their website, but if that looks hard don't worry, I am about to talk you through it.

Take a look at the example on this page (click). As you can see it looks pretty much like any Object and Embed tag but this time with the addition of the Flashvars parameters.

Within Flashvars we can define any variable with any value. These variables and their values are then passed to the flash movie we are Objecting and Embeding and created within the movie before the first frame of the movie. If we were "hard coding" the variables and their values into the video player we would expect to do it in the first few lines of the first frame in the timeline. That Flashvars creates the variables before the first frame is just as good from our point of view.

This means we can include the same video player in every page of our website, but get each one to play a different flv file by simply changing the values of the Flashvars parameters in the HTML Object and Embed tags.

A quick recap (before we make changes)

The original code had the name of the flv file "hard coded" for the menu button as follows:

_root.m1_btn.onRelease = function () {
video_ns.play("video1.flv");
currentvid = "video1.flv";
}

The code above does two things when the button is released. First, it tells the NetStream object called "video_ns" to play a specified FLV file. Secondly it sets the value of a variable called currentvid to be the same as the name of the FLV file - this helps us later on when we are programming the playback controls.

Now making the changes

Basically, instead of having the menu button, you just include the following variable and value in the Flashvars.

Within Object:

param name="FlashVars" value="currentvid=video1.flv"

Within Embed:

flashvars="currentvid=video1.flv"

And it is that simple.

All your existing code should still work.

Taking it further

If you feel like getting more advanced (and if you are not using flv 1.1 files) you could even include the length of the flv video (in seconds) as a Flashvar too. If you remember, only flv 1.1 or later includes the duration of the flv in meta data, and our progress bar relies on knowing the duration of the video. Using Flashvars as follows you can tell the video player the duration without needing meta data:

Within Object:

param name="FlashVars" value="currentvid=video1.flv&duration=999"

Within Embed:

flashvars="currentvid=video1.flv&duration=999"

Then you can delete (or comment out) the code that tries to get the duration of the flv from the metadata, you know, this bit:

NetStream.prototype.onMetaData = function(obj){
var duration = obj.duration;
}

You can delete the above and your play, pause, and progress bar will still work, because instead of getting the duration from metadata it will now be getting it from Flashvars.

Voila!

Oops, nearly forgot...

Oh, one last thing, make sure you add the following code to the first line on your first frame:

var playstatus = 2;

This is needed because in the original player, as soon as you selected the video it begins to play, the play/pause system then worked on the assumption that the video is already playing. The code was as follows:

video_ns.onStatus = function() {
if (video_ns.time >= duration-1){
playstatus = 2;
_root.pause_mc.gotoAndStop("pauseon");
}
else {
playstatus = 1;
_root.pause_mc.gotoAndStop("pauseoff");
}
}

_root.pause_mc.onRelease = function () {
if (playstatus == 1){
video_ns.pause();
_root.pause_mc.gotoAndStop("pauseoff");
}
else if (playstatus == 2){
video_ns.play(currentvid);
}
}

Read the code and you will see that you can only play the video if playstatus = 2. But because we now get the video info from Flashvars the video is not already playing so we need to set the playstatus to 2 manually or you can never play the movie. Hence make sure you add the following code to the first line on your first frame:

var playstatus = 2;

What fun.