FlashEmbedded Family

On Sunday we have been on a visit to my older brother and his family. Nerdy as I am I had our Sony Handycam with me on the trip and arrived back at home with plenty of new video footage. So I just wanted to make some videos available and digitalized and converted the dv source material from the camcorder with dvgrab and ffmpeg.

So this is some kind of a minimal HowTo, hope this helps someone.

If you are like me, you don’t like the idea to rely on 3rd party websites like younameit.xyz. There are a few good reasons to keep the video on your site – you have the physical control and you don’t need to accept confusing licence agreements. So here we go!

First I piped the output of dvgrab directly from the firewire to ffmpeg. This deinterlaced, converted and scaled the dv file to something more useful for a web page. I think that the following options are fine, feel free to change them and of course make use of man dvgrab and man ffmpeg.

dvgrab -format dv1 – | ffmpeg -deinterlace -f dv -i – -f flv -vcodec flv -s qvga -aspect 1.333 -qscale 3.5 -acodec libmp3lame -ab 32k -ar 22050 example.flv

Next I uploaded the example.flv file into the root directory of the domain. I use the open-source FlowPlayer Flash applet to actually embed the FLV video in my web page. I had to get a copy of the flowplayer.swf and flashembed.js from their page and copied the files to the root directory as well.

And finally I added the following lines to the html page.

<!– include flashembed –>
<script src=”flashembed.js”></script>

<!– this DIV is where your Flowplayer will be placed. –>
<div id=”videodiv” style=”width:640px;height:503px”></div>

<script>
// place Flowplayer to our DIV
flashembed(“videodiv”, “FlowPlayer.swf”, {config: {

// Flowplayer configuration as comma separated list
videoFile: ‘example.flv’,
initialScale: ‘scale’

}});
</script>

That’s it. You should now have your video embedded in your page.

Leave a comment

You must be logged in to post a comment.