Flash Projects - #3 - Custom FLV Player

Back in February I posted a tutorial to make a video player in Flash that played external SWF files. I promised then to post another tutorial that showed how to make a video player in Flash that played external FLV files. I wrote the program ages ago but finally got round to writing it up for my blog.

Although both programs are fine, FLV is much the up-to-date way of showing video in Flash so I hope you find this useful. feel free to leave comments or questions.

Getting Started

To keep things organised I like wherever possible to keep all my code in one place. All the ActionScript in this tutorial should be attached to the first key frame in your movie.

Unlike the version of the video player that played SWF movies, we cannot use loadmovie to simply show a movie within a movie. FLV files require us to use NetConnection and then NetStream to stream the FLV file from its location.

First off then we need to create a new NetConnection called "myConnection_nc":

var myConnection_nc:NetConnection = new NetConnection();
myConnection_nc.connect(null);

Now we need to create a NetStream called "video_ns" that will stream through the NetConnection you made above:

var video_ns:NetStream = new NetStream(myConnection_nc);

Now we have created a NetConnection and a NetStream through which we will stream the FLV file, we need to create a video object on the stage through which the FLV will be displayed.

First, you need to create a new Embedded Video object in the library. To do this, click the little menu in the corner at the top of the Library and select the "New Video" option. It should appear in the Library as "Embedded Video 1". Then drag an instance of the Embedded Video 1 onto the stage and give it the instance name of "my_video".

Now we are ready to attach the NetStream created above to the video object you just placed on the stage called "my_video":

my_video.attachVideo(video_ns);

Now we need to do two things. First, we need to find out how long the FLV file is (its duration), second we need to set the value of the duration variable equal to the property of the duration object. This will allow us to control the playback of the FLV later on.

To do this we first use prototype.OnMetaData to find the duration of the video - this only works with FLV 1.1 files and later, earlier versions do not include duration in metadata.

Unfortunately there is no other way of finding the duration of an FLV file (you can't use the _totalframes method like you can in SWF files).

Then we can set the value of the duration variable to be equal to the duration property of the FLV file as defined in the FLV's MetaData. Here goes:

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

Video Selector

Now for the playback controls. The simplest control is the video selector. This allows the user to choose which video they want to watch.

First create a button in the Library, then drag two instances of the button onto the stage. Give the buttons the following instance names - "m1_btn" and "m2_btn".

Because we are playing FLV files and not SWF files, we cannot use the loadMovie method. Instead we need to tell the NetStream object we created earlier, to play and tell it which FLV file to play. We create code for each of the buttons we created earlier, so that when each is clicked, the NetStream object we created streams a different FLV file to the video object:

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

_root.m2_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.

Rewind Button

Dead easy. Create a button in the Library that looks like a rewind icon. Drag an instance of the button onto the stage and give it the instance name of "rw_btn". Then add the following code to the first key frame with the rest:

_root.rw_btn.onRelease = function () {
playpos = video_ns.time;
if (playpos > 10)
{
video_ns.seek(playpos-10);
}
else
{
video_ns.seek(0);
}
}

The code above makes the video jump back 10 seconds when the rewind button is clicked. It might seem pretty complex considering that all we want to do is rewind a bit. What it actually does first is check how far into the video we have progressed and the reason for this is that we don't want to jump back to a point before the video starts, that would be impossible. Depending on how far the video has played the code then does one of two things. If the video has played more than 10 seconds, then it tells the NetStream object to jump back 10 seconds in the FLV, if the video has not yet been playing for more than 10 seconds it tells the NetStream object to go back to the beginning of the FLV.

I found that in practice, with large FLV files, the rewind is not always reliable, and can get "stuck" at points, refusing to rewind past them. I suspect this is something to do with the FLV itself, rather than the coding - however, I have also included the option of clicking on the progress bar to jump to any point in the video, which so far has proved very reliable - this is explained later in the tutorial.

NOTE: If you made the previous video player that used SWF instead of FLV files, you will notice that we are using a lot of different methods. Most significant is that with FLV we cannot gotoAndPlay specific frames as we can with SWF files. Instead we use the seek method, and it is the NetStream object called "video_ns" that we are instructing to seek, not the video instance on the stage.

Forward-wind

This is much more straightforward. As before, create a button in the Library that looks like a forward-wind icon. Drag an instance of the button onto the stage and give it the instance name of "fw_btn". Then add the following code to the first key frame with the rest:

_root.fw_btn.onRelease = function () {
playpos = video_ns.time;
video_ns.seek(playpos+10);
}

This isn't nearly as complex. When the forward-wind button is released the code sets the value of a variable playpos to the current time position of the movie using video_ns.time. It then simply uses the seek method to tell the NetStream object to jump forward 10 seconds from the current time position in the FLV.

Play and Pause Button

Now we get more complex. For my player I opted to have the Play and Pause buttons be the same button, but have the icon on the button change depending on whether the movie is playing or not. If the movie is playing, the pause icon is visible, telling the user they can click to pause. If the movie is paused, the play icon is visible, telling the user they can click to play.

To accomplish this the play/pause button is not a button at all - it is a movie clip. The movie clip has two frames, one frame with the play icon, the other with the pause icon. The frames are then given labels - "pauseon" and "pauseoff". This allows us to dynamically change which frame is currently visible, and therefore the appearance of the play/pause button. Create a movie clip that does all that, then drag an instance of it to the stage and give it the instance name of "pause_mc". Then add the following code to the first key frame in the root timeline with the rest:

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");
}
}

The code above uses a change in the NetStream status to trigger a check. The code checks whether the current position within the FLV file is greater than or equal to 1 second from the end of the file. If so it sets the value of the playstatus variable to "2" (we use this later), and tells the play/pause button to move to the frame labelled "pauseon", so the button shows the pause icon, telling the user they can click to pause.

If the current position within the FLV file shows there is more than 1 second of the movie left to play, then the code sets the value of the playstatus variable to "1", and tells the play/pause button to show the frame labelled "pauseoff", so the button shows the play icon, telling the user they can click to play.

the above code just sets the playstatus variable, and changes the visual appearance of the play/pause button. Now we need to enter the code that actually controls the playing and the pausing. Add the following code to the first key frame in the root timeline with the rest:

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


This is where lots of the variables we have been setting earlier, with no visible purpose, suddenly become useful. The code above runs whenever the play/pause button is released.

First it checks the value of the playstatus variable. If the value of playstatus is "1" (which means the FLV file has more than 1 second left to play - see above), then it tells the NetStream object called "video_ns" to pause, and tells the play/pause button to show the frame labelled "pauseoff", so the button shows the play icon, telling the user they can click to play again.

If the value of playstatus is "2" (which means the FLV file is in its last second of playback - see above), then it tells the NetStream object called "video_ns" to play the FLV file again, and uses thevalue of the currentvid variable, which was set when the user click the button to select which video they wanted to see, to tell it which FLV file that was. This currentvid reminder is needed because we are playing FLV files and so must use NetStream and not loadmovie as we would if we were playing SWF files. With loadmovie the SWF file remains loaded into memory and so the program does not need reminding which movie to play because it still has it, with NetStream the file is streamed from its location and not kept in memory - this is why the currentvid variable was needed, to remind the program which FLV to play, without the user having to select it again using one of the video selector buttons we created right at the beginning. This is all about making it work more smoothly for the user - trying to make it work how they expect, rather than expecting them to learn the quirks of how your's works.

Progress Bar

No video player is complete without a progress bar telling the user how quickly the video is progressing, where they are in the video timewise, and how long is left.

To create the progress bar graphics, draw a rectangle on the stage to represent the video progress bar. Make sure the rectangle has a fill and a stroke. Then select the filled area only, press F8 and convert it into a movieclip called progbar. Make sure you set the registration point of the symbol to be top left. Then select the stroke that outlined the rectangle, again press F8 and convert it into a movieclip called progbarframe. Again make sure you set the registration point of the symbol to be top left. Give each an instance names "progbar_mc" and
"progbarframe_mc".

Add the following code to the first key frame in the root timeline with the rest:

onEnterFrame = function() {
comppc = video_ns.time / duration;
_root.progbar_mc._width = _root.progbarframe_mc._width*comppc;
}


The above code sets a variable called comppc with a value that comes out of dividing the current position of the FLV movie in seconds with the duration of the movie in seconds. This gives comppc a a value between 0 and 1. A value of 0.5 would mean the movie was half way through. We then multiply the maximum width of the progress bar (based on the width of the progbarframe_mc) by the value of comppc to set the current width of the progress bar. By using onEnterFrame the progress bar updates several times per second as the movie plays, thus giving an accurate graphical representation of how far the movie has to go.

Progress Bar Jumper

Now we want to make it so the user can click anywhere on the progress bar and jump to that part of the movie. Add the following code to the first key frame in the root timeline with the rest:

_root.progbarframe_MC.onRelease = function() {
barleft = _root.progbarframe_MC._x;
jumppos = (_xmouse-barleft)/_root.progbarframe_MC._width;
if (playstatus == 1)
{
video_ns.seek(Math.round(jumppos*duration));
}
else if (playstatus == 2)
{
video_ns.play(currentvid);
video_ns.seek(Math.round(jumppos*duration));
}
}

The above code is probably the most complex part of the whole program. Funny how the luxuries, the "optional extras", that provide the least functionality are often the most complicated parts of the program.

First we define a variable for the left side of theprogress bar called barleft. This gives us a zero point against which to measure the location of the user's click on the progress bar. Then we define a variable that represents the users click on the progress bar called jumppos.

The value of jumppos is defined by getting the X coordinate of the mouse when the bar is clicked and then subtracting from that the value of barleft (the X coordinate of the the start of the bar). This tells us how far along the bar the user clicked. This number is then divided by the total width of the bar to give a number that represents how far along the bar the user clicked as a value between 0 and 1. A result of 0.5 would mean the user clicked in the middle of the bar.

We then tell the NetStream object to seek to the point in the movie corresponding to where the user clicked on the bar. This is calculated by multiplying the value of jumppos (where on the bar the user clicked) by the value of the duration of the FLV file in seconds. However, I have also used Math.round to convert the result into an integer (by rounding up or down to the nearest whole number). This just helps keep things tidy and means the FLV will jump to a whole second, rather than a fraction of a second which may not exist.

If the value of playstatus is "1" then we just attempt to seek straight to the relevant point in the FLV file. However if the playstatus is "2" this means there is only 1 second or less of the movie to go, so to make sure it works and we get no glitches, we tell the NetStream object to play the currentvid from the beginning and then seek to the relevant point in the FLV file. We have to do this because, as mentioned before, with NetStream the video is not stored in memory, and so if there is less than 1 second left in the video, the streaming might be over before Flash has a chance to seek to another part of the movie. By telling the video to start again using the currentvid variable to remind it which video, and then seek to the relevant point, we can get a smoother operation.

Converting Video to FLV Format

Of course, for this player to be any use, you need to be able to convert your video to FLV format.

One programme that has worked for me without trouble is Free Video to Flash Converter.

It is completely freeware and can convert video into SWF or FLV. You can even export video with its own player interface - and, while this defeats the object for my use of it, since I wanted a custom interface of my own design, some people may find this feature helpful.

The program is pretty self explanatory, all you need to do is remember to export the movie as a FLV and save it with the name you programmed into your player and in the same directory as the player.

The End

And there we have it. Export your player as a SWF into the same directory as the FLV files you linked to and it should just work. Any problems, leave a comment and I will try to help.