Tuesday, July 08, 2008

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.

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 -i P1010013.MOV -acodec libmp3lame -ab 64k -f flv -b 800000 -r 30 -s 400x225 -aspect 16:9 ravioli.flv

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.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"
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"



MADCookie said...

Great research. Thanks for sharing all the details. It is frustrating on how "they" make this. The options are mind blowing and the combination of different options makes it even worse.

I wonder if the advent of SilverLight will ease video streaming to the market.

I'm going to look into the video player you used. I like it's control and feel.

Oh, you should have linked over the "Ravioli" posting -- very cute! Did you notice the splash jpg is rather pixelated?

MrTidy OTR said...

Wow - good eye on the preview image. I had originally shrunk the video down to 300px wide or so and generated the previews using that. I didn't like how small the video was so re-shrunk to 400px wide and didn't think to redo the preview.

I am mighty curious about SilverLight as well. While Hansel minutes and Technometria are still my favorit podcasts, I starting to get attached to stackoverflow. In this episode of stackoverflow they point out how significantly different 1.0 is from 2.0 - so not only do we have to look for SilverLight adoption, we have to wait for 2.0 adoption to see the really exciting stuff and since it is so different I wonder if the adoption will be slow.

MADCookie said...

Yeah, I finally got a chance to use this.