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

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.
<embed
src="player.swf"
width="500"
height="400"
bgcolor="undefined"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=Cruise-pics.flv & image=cruise.jpg"
/>
Note:
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:
    http://www.gummy-stuff.org/Cruise-pics.flv
  • 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:
    http://www.gummy-stuff.org/cruise.jpg
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!          
<embed
src="player.swf"
width="400"
height="320"
bgcolor="undefined"
allowscriptaccess="always"
allowfullscreen="true"
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.
        <br/><br/></li>
        <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
    </div>
    <script type="text/javascript">
                var so = new SWFObject('avs4you_player.swf', 'player', '450', '370', '7', "#ffffff");
                so.addParam("allowScriptAccess","always");
                so.addParam("allowFullScreen","true");
                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");
                so.write("flashcontent");
        </script>

With this code:
<embed
src="http://www.gummy-stuff.org/player.swf"
width="400"
height="400"
bgcolor="undefined"
allowscriptaccess="always"
allowfullscreen="true"
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.