Jameser's Tech Tips

Thursday, June 29, 2006

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

23 Comments:

  • At 7/12/2006 9:32 AM, Anonymous Anonymous said…

    Are the two files "FLVPLayer_Progressive.swf" and "clearSkin_3.swf" both royalty-free files that you created or what? Where did they come from?

     
  • At 7/12/2006 3:13 PM, Blogger Jameser said…

    I can't recall exactly where I got the SWF's from, but I believe they were authored directly by Macromedia... You can check out http://www.peldi.com/blog/downloads/FLVPlayer_d12.zip to see if you an find any licensing information from those files, as I believe they are the same... The zip also contains the source...

    If you're looking for a web FLV player with open source origins and Apache licensing, you may want to check out FlowPlayer @ http://flowplayer.sourceforge.net...

     
  • At 8/01/2006 2:24 PM, Anonymous marcuzzer said…

    hi, i've just released a new improved version of the flvplayer,very easy to install (you just have ovewrite your flvplayer.swf file).
    Find it here http://www.10people.net/blog/index.php/category/snowboard/
    I hope it's gonna be usefull for every video blog visitors

     
  • At 8/01/2006 7:11 PM, Blogger Jameser said…

    Hi marcuzzer... Your player looks pretty cool... I'll have to check it out when I get the chance...

    James...

     
  • At 8/04/2006 10:19 AM, Anonymous Anonymous said…

    is there a "Full screen" option available ??

     
  • At 8/15/2006 5:26 AM, Anonymous vandor said…

    Hi Jameser,

    big thx this page!!

    FLVMDI is a Windows-only application.
    Norman Timmler's flvtool2 is a similar command-line application that was developed with Ruby and will run on Windows, Mac OS X, and Linux.

    http://inlet-media.de/flvtool2

    example usage:
    flvtool2 -UP yourflvfile.flv

    Z

     
  • At 6/07/2007 7:19 PM, Blogger rouftop said…

    Great page!
    This plus this handy tip for IIS finally got me on the right foot: http://blogs.ittoolbox.com/c/engineering/archives/adding-flv-mime-type-in-iis-4198?e=unrec#commentsForm

     
  • At 12/03/2007 2:53 PM, Anonymous joopdog said…

    This works great! I love it. However, how can I add image preview for an FLV?

     
  • At 12/15/2007 5:45 AM, Anonymous John said…

    I want just two options in right click of player.

    1. About FLV Player
    2. Change Size
    1. 320x240
    2. 480x360
    3. 640x480
    When user select options. It change size of video.

    How to do it????????

    Second query is that how to add full screen option in player..

     
  • At 12/29/2007 6:24 AM, Blogger skumar said…

    This is great. How do I embed the video on a myspace page or any other html page?

     
  • At 1/01/2008 5:44 PM, Blogger skumar said…

    Is there a version of this player available that has a "time bar" where I can see the played time/max time of the video clip. e.g
    1:29/4:44 ?

     
  • At 3/02/2008 4:16 PM, Anonymous Anonymous said…

    I would like to see if there is one that shows incorporates in the seek bar how much of the video has been loaded....

     
  • At 3/06/2008 4:04 AM, Anonymous Anonymous said…

    skumar said...
    Is there a version of this player available that has a "time bar" where I can see the played time/max time of the video clip. e.g
    1:29/4:44 ?

    Try JW FLV MEDIA PLAYER 3.15

     
  • At 5/20/2008 4:55 PM, Anonymous Carros DF said…

    Anyone has replace object tag with javascript swfobject?

     
  • At 5/26/2008 7:15 AM, Anonymous Tato said…

    2604
    Lovely tool!
    Thanks!

     
  • At 11/28/2008 10:11 PM, Anonymous Sean said…

    THANK YOU!!! I have been killing myself trying to get dreamweaver to do this.. your code did it instantly, I can now get some sleep!!!

    -Sean

     
  • At 3/05/2009 4:51 PM, Anonymous Anonymous said…

    any idea on how to play flv that are in different directories?

    on my blog I have the permalinks enabled and I don't see a way to the absolute url of the flv to the streamname parameter

     
  • At 4/04/2009 7:45 PM, Anonymous Greg Mangin said…

    Thanks for this, just what I was looking for. Worked just as you said.
    Greg Mangin

     
  • At 4/06/2009 5:54 PM, Anonymous Anonymous said…

    could someone please tell me how to incorporate full screen view? is there a parameter to set for this? Also, the parameter for scale is set to "noscale"...what do you change it to for allowing scaling?

     
  • At 9/01/2009 8:00 PM, Blogger ecstasy said…

    I would like to hide buttons on player (not to show at all)

     
  • At 9/09/2009 2:41 AM, Anonymous Anonymous said…

    Great - Thank you, some good instructions and the necessary files to download.

     
  • At 7/28/2010 12:25 AM, Anonymous Artium said…

    Anyone knows how to add fullscreen toggle button to this player?

     
  • At 12/17/2010 3:12 PM, Anonymous Anonymous said…

    Buddy U r cool .... suppose i wanna download the flash file ... what i see no swf .... directly // but some progressive_flash player // what shoul i do then ........????

    u solved my problem ----

    goto source code locate the progressive scan.swf file see the code find strean name -- FILENAME

    that's it ... copy entire file name before (&) sign and add flv

    copy it FILENAME.flv is your required flash //

    THANKS ...........
    Thanks ..

     

Post a Comment

<< Home