How To Put Flash Videos On Your Blog In Many Easy Steps

I’ve been known to post adorable Flash videos of my son reading books and of the parodies I do of children’s shows. Perhaps you are asking, “How does he do it?” More likely you are asking “Why doesn’t he just post his videos to YouTube and be done with it?” In which case, hush, you.

Since the internet needs more how-to instruction pages, here’s how I do it. I used Windows, so don’t be surprised that the software I talk about uses Windows as well.

FLV? Wha?

FLV, or Flash video, is a file format that embeds video directly into Flash files, allowing Flash to do more than provide annoying website navigation and strange animations and games. Google Video uses it, as does YouTube. It has a lot of advantages over other methods of delivering video on the net. More people have Flash plugins than QuickTime, Windows Media, or Real Player. In addition, Flash is slightly less evil than the other three, killing only two puppies every time you use it as opposed to nuking baby seals from orbit and also selling your private information to spammers. (I’m looking at you, Real Player! But not too hard, lest you nuke me from orbit as well.)

To post your videos as FLVs on your blog or site, you need three things: original video, a tool to convert the video to FLV format, and a player to provide your FLV movie to visitors.

Getting Original Video

What, you don’t have a DV camcorder or something? Filming the boring mundanities of your life for posterity is an unalienable right. Get crackin’, and don’t come back here until you have three hours of birthday party footage, including young Suzie being frightened by the clown you hired.

Converting Videos to FLVs

Tools to convert video to FLV can run you from $50 to $700. Thankfully, there are free options. The command-line tool FFmpeg will do it for free, and it’s open source to boot. That means you can get it for most any platform. It also means that the documentation is terrible and it’s got a learning curve steep enough and high enough to carry you into orbit.

Enter the Riva FLV Encoder. It’s based on FFmpeg and it’s free. It’s also Windows-only. Such is life.

  • Grab a copy of the Riva FLV Encoder and install it.
  • Make a backup copy of your movie to work with. Riva FLV Encoder occasionally erases your original movie file. Better safe than sorry.
  • Run it. In the Input box, press the Browse button and navigate to the video you want to convert.
  • On the right side, set the video’s Resolution. I generally recommend a movie size of 320×240 — less if your video is of lower quality or doesn’t have a lot of fine detail.
  • Set the video’s Bitrate, which determines the video quality. For video with a lot of motion, you’ll want to set this reasonably high. I get good results with a bitrate of 360, though if you lower it, the final file’s size will be smaller.
  • If the audio in your original file is less than CD quality (i.e. 44100 Hz), try reducing the audio’s Bitrate and Sampling Rate. Lower values create lower-quality audio but a smaller final file size.
  • If you want to trim the boring bits off of the beginning and/or end of the video, enter when you want the movie to start (in seconds) in the Start Offset box and how long you want the movie to run in the Duration box.*
  • Press the Encode button.
  • Press the Preview button to make sure the video looks okay. If it doesn’t, try adjusting the bitrate or the Start Offset and Duration.

*I’ve run into a problem with trimming movies with Riva FLV Encoder: the sound isn’t in synch with the video any more. If that happens to you, you have two choices. One, trim the video in a video editor. Even Windows Movie Maker, which ships with Windows XP, will do. Two, turn the entire video into an FLV file with Riva FLV Encoder, then use a tool like flvtool2 to trim it. flvtool2 is a Windows command-line tool written in Ruby that does just about anything you want to FLV files. To use it to trim a movie:

  • Download the flvtools2 archive and put it in the directory where you keep your movies, to make your life easier. Unzip the flvtools2 archive and extract flvtools2.exe.
  • Open a command line window and go to the directory where your movies and flvtool2 are. If you’re not sure how to do this, you’re better off not using flvtool2 for now.
  • Open your new FLV file by double-clicking on it. This will load the FLV file in the Riva FLV player.
  • Play the FLV file to see where you want the final video to start and end. The Riva FLV player shows the time code in seconds on the bottom-right-hand side of the window. Write down the times for the video to start and end.
  • Type in the following command: flvtool2 -C -i [start] -o [end] [original flv name] [new flv name]. The bits in brackets are to be replaced as follows. [start] is when you want the video to start in milliseconds. So if you wanted the video to start at 1.231 seconds, type in 1231 where [start] is. [end] is where the video should end, also in milliseconds. Unlike Riva FLV Encoder, flvtools doesn’t use a relative measure of how long you want the video to be. [original flv name] is the file name of the FLV file you made with the Riva encoder, and [new flv name] is what you want the trimmed video to be called.

The encoded movie’s quality depends to a large extent on how good your source video is. If you’re using DV-encoded video, try scaling it down to an uncompressed 320×240 format before feeding it into Riva FLV Encoder, to reduce artifacts.

Playing the FLV On Your Site

Most people can’t play FLVs directly, as they would need to install an FLV player on their machine. Instead, you need to have a Flash application to serve the FLV file to visitors.

You could write your own in Flash, or pay someone for their FLV player. Alternatively, you can use Jeroen Wijering’s player, which he has made freely available for noncommercial use. Yay Creative Commons!

  • Download the FLV Player.
  • Put the flvplayer.swf file on your site. For example, mine lives at http://granades.com/flv/flvplayer.swf.
  • Upload your FLV file to your site.
  • To embed the FLV file in an HTML page or blog post, add the following HTML:
    <object type="application/x-shockwave-flash" width="[width]" height="[height+20]" wmode="transparent"
    data="/flv/flvplayer.swf?file=[movie]&autostart=false">
    <param name="movie" value="/flv/flvplayer.swf?file=[movie]&autostart=false" />
    <param name="wmode" value="transparent" />
    </object>

    /flv/flvplayer.swf is the relative URL to the flvplayer.swf file. [width] is the width of your FLV file (which I normally make to be 320) and [height+20] is the height of your FLV file plus 20 pixels. [movie] is where you uploaded your FLV file. &autostart=false means the visitor will have to click on the video before it plays — it’s optional, and may be left out if you want the video to play when the page is loaded.

That’s it! Give it a try. If you’re wanting to use this on a WordPress blog, you should try the FLV player plugin.

As to why I don’t post the videos to YouTube: because.

Share

30 Comments