posting family / hobby videos

We hope to be posting more videos on our blogs in the future, so we need to work out a good process and format for converting and posting the videos. Flash video files are becoming very common and are handled nicely in most browsers (pretty much everything but the iPhone as far as I can tell) so that seems like a good starting point.

SWF or FLV
The Adobe Flash movie player plugin expects SWF files but the FLV files are better for us because they can stream out to the player. The reason to point that out is that if you look at the excellent Adobe documentation for object / embed for the Flash movie player, you only see the movie parameter pointing to an SWF file. I chose a nice looking embeddable FLV player from advanced flash components to be the SWF file that streams / plays the FLV files in the blog posts.

ffmpeg or mencoder
Our camera produces HD videos at 1280x720 pixels and the files are pretty large. I tried 2 different tools to convert the large .mov file to .flv:

ffmpeg:
ffmpeg -i P1010013.MOV -acodec libmp3lame -ab 64k -f flv -b 800000 -r 30 -s 400x225 -aspect 16:9 ravioli.flv

mencoder:
mencoder P1010013.MOV -o ravioli.flv -of lavf -oac mp3lame -lameopts abr:br=56 -ovc lavc -lavcopts \
vcodec=flv:vbitrate=600:mbd=2:mv0:trell:v4mv:keyint=10:cbp:last_pred=3:aspect=16/9 -vf scale=400:225 -srate 22050

I've used ffmpeg more in the past so I intended to use it for this; however, the basic options above resulted in a lot of popping in the resulting .flv file. I started reading about the audio codecs and tried a few different settings but decided to try a basic config for mencoder that I was familiar with. I think that either of the above could be improved: ffmpeg could get audio fixed or mencoder could ensure that the aspect ratio gets coded into the video info.

Preview Image
In the case of the ravioli video, I didn't like the default preview image so I generated a series of jpegs and used MS Paint to scroll through the images until I found one I liked.

mplayer:
mplayer.exe ravioli.flv -nosound -vo jpeg

Embedding the Video
To get the video into a Web page, we just need to invoke the player and tell it what .flv file to use. We currently have the .flv files on our regular blog server; in the future, I'd like those moved to AWS or some similar content network.

object / embed:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
  width="400" height="225" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="base" value="/" />
  <param name="movie" value="/AFC_EmbedPlayer.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <param name="FlashVars"
    value="flvURL=/moo/ravioli.flv&autoHideControls=true&autoStart=false&previewImageURL=/moo/ravioliPreview.jpg" />
  <embed base="/" src="/AFC_EmbedPlayer.swf" quality="high" bgcolor="#ffffff"
    width="400" height="225" align="middle" allowScriptAccess="sameDomain"
    allowFullScreen="true" type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    FlashVars="flvURL=/moo/ravioli.flv&autoHideControls=true&autoStart=false&previewImageURL=/moo/ravioliPreview.jpg"></embed>
</object>

References

• Embeddable FLV Player


• Flash OBJECT and EMBED tag attributes


• Flash OBJECT and EMBED tag syntax


• Basic usage of MEncoder


• MPlayer


• FFmpeg