Preparing and presenting video for the web...

Recently, I've had to convert a 15 minute infomercial for BetterDaysMinistries.org, a non-profit organization. I was provided with a dvd, that cycled the infomercial twice during playback. Besides, the phone number and address shown on the original infomercial was old and that information needed to be updated. Below are highlights of the whole conversion process.

  1. I used dvdshrink to grab just the single playback section of the dvd. This resulted in a VOB file of about 256MB.

  2. To do the edits, I had to convert it to an avi and used ffmpeg for the conversion process. Did the conversion keeping all of the same aspect ratios doing a lossless compression and keeping all values to be the same as that of the original video.
    $ ffmpeg -i VTS_01_1.VOB -f avi -s 460x320 -vcodec mpeg4 -b 8000k -g 300 -bf 2 -acodec mp3 -ab 128 betterdays.avi
  3. After doing the edits with MovieMaker, the video was compressed for the web using flv format, with the final video size compressed down to about 20MB:
    $ ffmpeg -i betterdays.wmv -s 320x240 -r 12 betterdays.flv
  4. I then used flvtool2 to add the video duration into the FLV's metadata which would then be used by FlowPlayer to read the duration information from the FLV and display it.
    # flvtool2 -U betterdays.flv
  5. A static html page was created with the embeded video presented via FlowPlayer, a free and opensource Flash video player.
    <object type="application/x-shockwave-flash" data="/media/flowplayer/FlowPlayer.swf" width="320" height="263" id="FlowPlayer">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="/media/flowplayer/FlowPlayer.swf" />
    <param name="quality" value="high" />
    <param name="scale" value="noScale" />
    <param name="wmode" value="transparent" />
    <param name="flashvars" value="config={videoFile: '/media/videos/betterdays.flv'}" />
    </object>
  6. Finally, the page with the embedded flash video was linked from the homepage presented via GreyBox.

  7. The final product can be seen at BetterDaysMinistries.org. Click on the infomercial link to get the video.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Make greybox work from within frames

If linking from within frameset, change the following line of the file "loader_frame.html".

var GB = top.GB_CURRENT;

to

var GB = parent.GB_CURRENT;

Comment