Homemade Videos

So we had just come back from a cruise and I had a bunch of video clips to show family & friends.
As evidence of creeping senility, it took two whole days to generate video for my web site.

First off, the video I extracted from my video camera was in MOD format.

It turns out I just had to change the extension from MOD to MPG and I could play the video with (almost) any player.

Aah, but to get it on my web site and play it as a flash file?
I needed to convert from MPG to FLV.

It turns out there are lots of conversion software available.
Though many are free, I bought a collection of audio & video editing software from AVS.
It converts MPG to FLV and adds sexy text and transitions from one scene to the next and background music etc. etc.

Eventually, I just needed to add a "player" file as well as the following HTML code -- wherever I wanted the video to play.
flashvars="file=Cruise-pics.flv & image=cruise.jpg"
There should be no spaces between flv and & and image.
I separated them 'cause the browser thinks the "&" means something special ... and it don't print proper-like.

In particular, note that:

  • player.swf is the flash player file that must be on your website -- wherever the above code is located.
  • Cruise-pics.flv is the FLV video that you want to play.
    If it ain't in the same folder as the above code, ya gotta give its URL, like mebbe:
  • cruise.jpg is the JPG picture that you want displayed.
    If it ain't in the same folder as the above code, ya gotta give its URL, like mebbe:
For example:
Check out this video:
I have all three files together (in the same folder, on my web site), namely:
  • The player (which I've called "player" -- what else, eh?): player.swf
       If you want, you could call it my-sexy-player.swf.
        Just be sure it's a valid FLV-player, with extension .swf.
        Mine is located here: http://www.gummy-stuff.org/player.swf
        You can download it, eh?
  • The FLV video file: Cruise-2009.flv
  • cruise2.jpg, the opening JPG picture ... which may have nothing to do with the video!          
flashvars="file=Cruise-2009.flv & image=cruise2.jpg"
Remember! The next-to-last line should have no spaces -- like so:

Now there are lots of sexy parameters that one can specify for the flash player (besides the width and height)** ... but I was happy with the simplest ritual.

Then I got busy and generated a bunch of videos: http://www.gummy-stuff.org/VIDEOS/someVIDEOS.htm

For example, the HTML code generated by the AVS software is much sexier.
In addition to the name of the player.swf, the flv file and the opening picture,
it defines a "theme" a la YouTube and requires two more files on your website, namely swfobject.js and Youtube.swf.

The sexy code looks like this:
<!-- SWFObject embed by Geoff Stearns: see http://blog.deconcept.com/swfobject/ -->
<script type="text/javascript" src="swfobject.js"></script>
    <div id="flashcontent">
        <strong style="font-size:large">The contents of the page could not be displayed.</strong>
        <br/><br/>This can be caused by the following reasons:
        <strong style="font-size:large">The contents of the page could not be displayed.</strong>
        <ul><li>Microsoft Internet Explorer blocks the flash content on your page.
        <strong style="font-size:large">The contents of the page could not be displayed.</strong>
        <br/>Click the warning in the upper part of the browser and select the
        <strong>Allow Blocked Content... </strong> option to continue opening the page.
        <li><strong>You need to install or upgrade your Flash Player.</strong>
        <br/>Please visit the <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe site</a>
        to download and install the latest version of the Flash Player necessary to be able to display the contents of this page
    <script type="text/javascript">
                var so = new SWFObject('avs4you_player.swf', 'player', '450', '370', '7', "#ffffff");
                so.addParam("wmode", "window");
                so.addParam("scale", "noscale");
        // this is the name of the converted file that will be played by the player
                so.addVariable("file", "dogs-playing.flv");
        // here the size of the player itself is set in pixels - width and height
                so.addVariable("width", "450");
                so.addVariable("height", "370");
        // the name of the player skin
                so.addVariable("theme", "Youtube.swf");
        // the movie loop parameter - can be set to 0 (the video will stop after the playback is over) or 1 (playback is looped)
                so.addVariable("repeat", "0");
        // the movie automatic startup parameter - can be set to 0 (the playback will not start automatically once the page with the video is loaded) or 1 (autostart)
                so.addVariable("autostart", "0");
        // the name and path of the image that will be displayed when the page is loaded, provided that the autostart value is set to 0 (i.e. no autostart is enabled)
                so.addVariable("image", "dogs.jpg");
        // the volume that will be used to playback your movie
                so.addVariable("volume", "50");
                so.addVariable("scaleonresize", "none");

With this code:
flashvars="file=http://www.gummy-stuff.org/gem-teppanyaki.flv & image=http://www.gummy-stuff.org/gem-teppanyaki.jpg"

I get this:

where I put together a number of video clips I found on YouTube.com (and elsewhere)
and stuck them all together using AVS Video editor.