How to use Adobe Flash CS3 to create your own FLV Player

If your media clips are not already in flash video format, you will need to encode them into .FLV files. You can use Adobe Flash Video Encoder or any other FLV encoder for this. If you do not have an FLV encoder, you can download and use Riva FLV Encoder, which is free, from http://www.rivavx.com/?encoder.
 

Riva FLV Encoder users PLEASE READ! Riva FLV Encoder does not properly insert meta data into the encoded FLV files. This usually results in playback problems such as the scroll bar not showing or the inability to jump to different portions of the video during playaback. A free tool available for Windows, called FLV MetaData Injector, can be used to fix this. You can download FLV MDI from http://www.buraks.com/flvmdi/ FLV MDI is a command line tool so you might want to grab the Windows user interface for it which is available for download on the same page. You can also insert FLV meta data from our servers: If you are familiar with SSH (Secure Shell), you can login to your account via SSH and use yamdi to insert FLV meta data. Sample usage: >> yamdi -i video.flv -o correctedvideo.flv If you are not famliar with SSH, you can just upload your FLV videos and send us an e-mail. We'll insert the FLV meta data for you.

A commercial FLV encoder which is highly regarded in the Flash community is Sorenson Squeeze: http://www.sorensonmedia.com

For a list of encoders listed on download.com, click here.

How to encode your clips using Adobe Flash Video Encoder:
 

Start Adobe Flash Video Encoder.

Drag any video clips you want to encode into the queue (or use the 'Add' button):



Click on 'Settings' and under 'Encoding Profiles' select the desired bit rate (default should be Medium Quality).



Click on 'Video' and set the 'Video codec' to 'On2 VP6'.



Click 'OK'.

Click 'Start Queue' to start the encoding process. The encoded Flash video (.FLV) files will be saved on your computer.

 

Uploading your flash videos (.FLV files): Your flash videos (.FLV files) must be uploaded into the folder called 'media' your account. The path to the 'media' folder is: public_html / flash_stream / vod / media / e.g.   public_html/flash_stream/vod/media/clip1.flv   public_html/flash_stream/vod/media/clip2.flv   public_html/flash_stream/vod/media/clip3.flv   etc ...

What are the .swf and .html files used for?

• An .SWF file: This file contains all images, sounds and vector data necessary to play the video clip. Adobe Flash will automatically generate this file for you.
• An .HTML file: This file will contain the HTML code necessary to play the video clip. Adobe Flash will automatically generate this file for you.

To create these two files, please follow these instructions:

Start Adobe Flash.

Create a new flash document. Select 'Flash File (ActionScript 3.0)' when prompted for document type.

Select 'Windows' -> 'Components'



From the 'Components' window select 'FLVPlayback' and drag it to the page. You should now see an instance of the FLVPlayback component on the page.




Click on the FLVPlayback component you just created and select the 'Parameters' tab at the bottom of the screen. Find the parameter 'Source' (or 'Content Path' in some versions of Adobe Flash). Enter the following for the content path value:
 

rtmp://Your_Domain_or_IP/vod/media/filename.flv

Replace 'Your_Domain_or_IP' with your domain name (do not include the www. portion!). If your account has been assigned a dedicated IP address, you can enter the IP address instead of your domain name.
 

PLEASE NOTE: Notice that there is no reference to the flash_stream/ directory in the URI. This is not a mistake.

EXAMPLE: If customer with domain mysite.com wants to stream the file sample.flv, the correct rtmp path to specify would be rtmp://mysite.com/vod/media/sample.flv
 

Sample screenshot of 'Content Path' value being entered.

To test if the rtmp path is entered correctly, try selecting the 'Match source FLV dimensions' option. If all is well, Adobe Flash will connect to the server and grab the width and height of your video clip and adjust your FLV player dimensions accordingly.

You can now preview the streaming video on your browser by selecting 'File' -> 'Publish Preview' -> 'Default - (HTML)'.



 

Troubleshooting Tip: Video clip not playing? Your Flash player has a built-in security measure which prevents flash documents residing locally on your computer from accessing video clips residing on the internet. To make an exception, you will need to change the 'Global Secuity Settings' of your Flash player. Here's how: Select 'File' -> 'Publish Preview' -> 'Default - (HTML)' in Adobe Flash to preview your flash document. From within your browser, right click your mouse on the flash video player and select 'Settings...'   A small window will pop-up. Click on the 'Advanced' button.   A new web page titled 'Flash Player Help' will open up in a new browser window. Click on the 'Glabal Security Settings Panel' link on the left hand side.   Click on the 'Edit locations...' pulldown menu and select 'Add location...'. Type in your domain name or IP address if you've been assigned a dedicated IP address. Click 'Confirm'.   Change the option 'Always ask' to 'Always allow'.   Close the 'Flash Player Help' web page and try selecting 'File' -> 'Publish Preview' -> 'Default - (HTML)' again from within Adobe Flash. Your Flash player should now allow flash documents saved locally on your computer to connect to the server.

If everything is working well, the video clip will start streaming and you are now ready to create the .html and .swf files.

From the File menu select 'Publish Settings'.

Edit the filename for .swf and .html files (click on the folder icon to specify where they should be saved). You only need to have the Flash (.swf) and HTML (.html) choices selected.
 

It is best to create an empty folder to save the published files in because Adobe Flash will likely generate some additional files (such as a .js file) which are required for your player to work.

Click on the 'Publish' button and then 'OK'. Adobe Flash will have generated the required .swf and .html files as well as any other additional files required for your FLV player to work.

You can upload the .swf, .html, and .js (if any) files generated by Adobe Flash anywhere under your public_html/ folder. These files do not need to be uploaded into your flash_stream/ folder. Just make sure they reside in the same folder (unless you have changed the path to the SWF file in the HTML code).

PLEASE NOTE: If uploading your files using the webcontrol file manager tool, the public_html/ folder is referred to as the 'web root'.

You can now watch your video stream by pointing your browser to the Adobe Flash generated .html file.

To embed the video into your web pages, copy and paste the code found inside the .html file.