Adding Flash video to your website

Posted on 29 May 2009

If you want to set up a Flash video on your website, and you are using Linux, then this post is for you. I’ll cover the steps one by one. Keep in mind that there are many different solutions and I have only documented one.

1. Istanbul Desktop Session Recorder

Download Istanbul using “sudo apt-get install istanbul”. Istanbul will let you record either complete windows, or regions of the screen, and save them as Ogg media files. Use it to record your desired video.

2. FFmpeg

Download FFmpeg and use it to convert the Ogg file to a Flash video file (.flv).

ffmpeg -i input_file.ogg -f flv output_file.flv

3. Flowplayer

Now all you need is a Flash player to embed into your HTML page and play the Flash video file (this lets users pause, rewind, etc). There are many different options here, but one good option is Flowplayer. Download the package from their website. Place the following files from Flowplayer onto your website:

Also upload your flash video file (output_file.flv in our example) up to your website. Note that Flowplayer won’t run by default if you try and run it locally. Then just add the following into your HTML page:

<script src="flowplayer-3.1.0.min.js"></script>
<a href="output_file.flv" style="display:block;width:425px;height:300px;" id="player"></a>
<script language="JavaScript">
flowplayer("player", "flowplayer-3.1.0.swf");
</script>

Note that the “player” parameter to flowplayer() must match the id value in the tag. You can change the size around as much as you like.