Adding Flash video to your website
Posted on 29 May 2009If 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:
- flowplayer-3.1.0.min.js
- flowplayer-3.1.0.swf
- flowplayer.controls-3.1.0.swf
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.