Tip #3: Creating Flash Video with Free Tools

Today's tip is a start-to-finish how-to on creating Flash video for displaying embedded video on your website... Using freely available tools, you can create videos for your site that will be viewable by anyone who has a Flash enabled browser (which is just about everyone)...

First, let's run through the tools we'll need to complete this...
1. Mencoder - Part of the MPlayer package... Select a mirror under "Windows releases"...
2. FLVMDI - FLV Metadata Injector... For injecting metadata into our video so Flash will play it...
3. The SWF files to embed in your web page:
FLVPlayer_Progressive.swf (right click and SaveAs)
clearSkin_3.swf (right click and SaveAs)
And finally, we'll need a source video to work with... I'm going to demo with a short clip from archive.org...

Step 1: Convert Your Video to FLV (Flash Video)
Download and install MPlayer/Mencoder... Next, open a command prompt (Start/Run/cmd) and change directories to where you installed it...
cd \Program Files\MPlayer

Now use the following line to convert an existing file to the FLV format:
mencoder "infile.avi" -o "outfile.flv" -of lavf -oac mp3lame -lameopts br=32 -af lavcresample=22050 -srate 22050 -ovc lavc -lavcopts vcodec=flv:vbitrate=340:autoaspect:mbd=2:trell:v4mv -vf scale=320:240

That should be all on one line, and that is one long command... We'll go through it to highlight the important bits... The "infile.avi" should be replace with the path and name of the file you are trying to convert... The quotes are needed if the path has a space in it... The "outfile.flv" is the path and name of the output FLV file you are creating... The "-oac mp3lame" through the "-srate 22050" specify the codec to be used for audio compression, as well as the bitrate and sample rate of the audio to be created... The "-ovc lavc" through "...v4mv" specify the codec to use for video compression and bitrate, as well as some options for motion estimation... The final "-vf scale=320:240" says to rescale our video to be 320 by 240 resolution...

After you run this command on your source video, you will then have the FLV video file to embed in your web page... But it's not quite ready yet... It needs metadata added to it if you want the Flash Player to be able to play it...

Step 2: Add Metadata to Your FLV File
We need to do one more step to the FLV before we release it to the masses... We will add the FLV metadata to it using the FLV Metadata Injector... (see above under required tools...)

After you have downloaded and extracted FLVMDI, change to the directory you extracted it to and type the following:
flvmdi whateveryourfileiscalled.flv
That's it... flvmdi will add the necessary metadata and we'll be ready to go to the next step...

Step 3: Place the Necessary Files on Your Webserver
Okay, now you'll need to upload the FLV file you created, as well as the FLVPlayer_Progressive.swf and clearSkin_3.swf to your webserver... It is probably preferable to place all the files in a single directory for this example...

Step 4: Add the following block of code to the page you'd like to embed the video on...

<!-- Begin Flash Video for Progressive download -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v..."
width="320" height="240" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars"
value="&skinName=clearSkin_3&streamName=yourfilename&autoPlay=false&autoRewind=false"
/>
<embed src="FLVPlayer_Progressive.swf"
flashvars="&skinName=clearSkin_3&streamName=yourfilename&autoPlay=false&autoRewind=false"
quality="high" scale="noscale" width="320" height="240" name="FLVPlayer"
salign="LT" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!-- End Flash Video for Progressive Download -->

The key things you'll need to change in this block are the two locations for width and height, and the two locations for the basename of your FLV file... The streamName should not inlcude the .flv extension... Also, make certain that the src and streamName point to the correct location if your html document is not in the same directory as your FLV and SWF files...

Step 5: Enjoy Your Video
If done correctly, your FLV video should now be viewable on your site... The example below shows the resulting video...

Please post in the comments if you have any ?'s...