Post a Movie File On Your Website

4:15 pm Internet

If you have ever wanted to post a movie on your website (instead of using Youtube and other similar services), the steps below might help you get started. I will provide instructions for converting a movie AVI file from my digital camera into a Flash Video (FLV) file for posting on a web page.

019MickeyMagicMy camera, a Canon SD870 IS, produces video files in AVI (Audio Video Interleaved) format. The videos are 640×480 at 30 frames per second (at about 18mbps bitrate) and mono audio at 44kHz sample rate (at 705kbps bitrate). The bitrate and audio bitrates, in combination with the other attributes, determine the video and audio quality. For example, at a higher bitrate, a video frame will look much sharper with less artifacts. Also, the video and audio bitrates together determine how much bandwidth you would use to play the movie when streaming it. Knowing this info will come in useful when we do the movie conversion below.

The goal is to convert the AVI movie file into a FLV movie file which is much smaller and supports streaming playback (which allows the user to view the movie as it downloads). As an example, I have an AVI file which is 17 seconds long and 30MB in size. I will want to convert that down to a 2-4MB FLV file size (1/10 the original size) with a 1-1.5mbps video bitrate and at most 96kbps audio bitrate. These bitrates should be easily handled by users who are using DSL or cable Internet broadband services. To maintain video quality, I will also switch the video to be 15 frames per second while keeping the same 640×480 resolution.

There are two free utilities that you will need to download and install:

  • MediaInfo supplies technical information (resolution, frame rate, bitrate, sample rate, etc.) about a video and/or audio file.
  • Free FLV Converter to convert from AVI (and others) to FLV format.
    Note: When installing, select “Custom Installation” and unselect the two Searchqu install options!

First, run MediaInfo and open the original movie file. Take note of the video bitrate, video resolution, video frames per second (fps), audio bitrate, audio sample rate, and number of channels (mono 1 vs stereo 2). When you set the target FLV attributes, you will want to pick values which are equal to or less than the original values. You can keep MediaInfo opened to refer to.

Second, run “Free FLV Converter” and click on the “Conversion to FLV” button at the top middle. Browse to and select the original movie file; AVI file in my case. Unfortunately, the “Free FLV Converter” does not use the original file’s video/audio attributes. Instead, in the “Output configuration”, I had to make the following changes:

  • Change Video Size from 320×240 to 640×480.
  • Change Video Bitrate from 386 to 1500. (I tried keeping it at 386 and the resulting FLV movie was extremely pixelated. Even at 800, it was still too pixelated for my taste.)
  • Change Frame rate from 25 to 15.

I left the Audio settings of Frequency (aka sample rate) at 44100 and Bitrate at 96 Kbps. Hit the Convert button to convert to FLV format.

The “Free FLV Converter” utility will save the converted FLV movie file (with the same name as the original file but a .flv extension) to the desktop. The resulting file size is 3.5MB. If the file had been bigger, I would need to reduce the FLV target settings further. In addition, the utility will nicely generate an example HTML file (with same name as the video file), a FLVPlayer.swf (a Shockwave Flash movie player), and a Skin.swf (skin for the Flash movie player) file. Open the HTML file in a browser to play the FLV movie. Hopefully, the quality of the generated movie is good.

You can use the generated HTML file as-is or as a reference. To use as-is, just copy the generated FLV movie file, the HTML file, the FLVPlayer.swf, and the Skin.swf to your website. You will want to upload the four files into the same online directory. To use as a reference, copy-paste the <object> definition from the generated HTML to your own HTML page. You will still need to copy the FLVPlayer.swf and Skin.swf files to your website.

Note: If you use another FLV conversion software and notice that the download progress bar on the movie player (dark grey background) doesn’t advance, then it may be that the software did not add the appropriate meta data to the FLV file. In this case, you can use flvmdi.exe tool to add the missing metadata.

The settings used above worked for me. You may wish to adjust for your needs accordingly. Have fun!

Leave a Comment

Your comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.