As you all know, there is different ways to spread video over the web, the most common technologies are Windows Media and RealPlayer and don't forget the MAC users using Quicktime.
Either if you do Streaming or progressive download you always need a player that get's the IP-videoinformation and converts to our known formats.

Whe are going to create together a basic Flash Video Player, first of all please ensure that you have everything needed for it:

• Macromedia Flash MX 2004


• Riva FLV Encoder

If you don't have an FLV encoder, then just download my FLV that I'm using
HERE

Let's get down to it.

Step1:
- Create a new FlashMovie, since my movie has a dimension of 320x240, we're going to set the stagesize to 330x280, so we have a clear border and also space for our controlbuttons.

- Open your library and select New Video from the Library options menu to create a video object.

- Drag the videoObject to the stage to create a VideoInstance.

On this tutorial everything will be hardcoded on a upcoming tutorial I will show you how do it dynamically.

- Give the videoObject an instanceName of "myVideo" and following settings

• Width: 320


• Height: 240


• X: 5


• Y: 5

Now you should see your blank stage with a green box in the middle.

Step 2:
We are doing this thing to keep it clean.
- Rename the layer where your video is to "VideoHolder" and lock it.
- Create a new layer called "Actions" and lock it also.

Where's our video? we're going to attach it with actionscript.
Here the code:


Let me explain what we're doing here:
Create a variable "nc" with a Netconnection attached to it.

This tells that you are not using a FCS server, you are using localhost


New Variable named "ns" with a NetStream attached to it.

We tell the Netstream to wait till 5 seconds of the video has been loaded.

Now we attach the Netstream we created named "ns" to the VideoHolder that have been created in Step 1 named "myVideo"


Step 3:
So you got your basic player, and the video is running? Cool!
Let's move on and create some basic functionality.

- Buttons ("Play and Rewind")
- Draw your own buttons, and place them on the stage. give the play Button an instance name of "playButton" and to rewind "rewButton"

- Go to your actions layer and put this code in:


Let me explain what we're doing here:
Here we tell the instancename "rewButton" to activate a function.

And with this will tell the NetStream to seek back to 0 seconds.


Here we tell the instancename "playButton" to activate a function.
And with this will tell the NetStream to play or pause the video.

It's a good way to put all your scripts in one single frame in your timeline, so you don't have to search inside of movieclips and buttons for your code. :)

Press Ctrl+Enter to test the movie and your buttons.

Step 4:
Maybe you want to add a timedisplay, where it shows how far your movie is. I'm creating this textfield with actionscript:
Here the code that I'm using:


Let me explain what we're doing here:
Here we create a new textfield named "time_txt", with the getNextHighestDepth function we get... guess what? :D the nexthighestdepth :D, the last 4 numbers are (Xposition, Yposition, Width, Height).

This is an easy one, we set a new variable, define it as a number use the setInterval to get an update every 0.5sec of the function named "checkTime.
And here the Function, I think it's pretty selfexplanatory.

Have a look at the Built-In Actionscript dicitionary and search for NetStream Class.
There you will find a lot of information about it.

Here the finished Example that we've created together.
EXAMPLE

Want to learn more? Then get going to Part 2 of this tutorial HERE