Recently I've seen a lot of screencasts in the Planet Ubuntu RSS feed. A screencast is an embeded flash video of your desktop, often used in tutorials instead of screenshots. I wondered if I could make these online flash videos myself; turns out, it's pretty easy! So in this article I will cover how to install the video capturing tool, how to use it, how to convert the video to a flash video (flv) file, and finally how to embed a flash player in your site just like YouTube. Create your own screencasts in 5 easy steps!

About this article

In this article I'm going to teach you how to create screencasts on Ubuntu Feisty, this may or may not work on other systems, I just haven't been able to test it. So no warranties, everything is on your own risk. That also goes for the script I provide. Some basic knowledge about system administration and webdeveloping is required.

Step 1: Install recordMyDesktop

There are other tools like Wink, but this one is nice and simple. How to install? Easy, just open a terminal and type:

aptitude -y update
aptitude -y install gtk-recordmydesktop

Done! Now to run recordMyDesktop click on: Applications -> Sound & Video -> gtk-recordMyDesktop.

Step 2: Record

You can do it like this:

gtk-recordMyDesktop will also install a little icon in your system tray. Click the icon once to easily start and stop recording.

Step 3: Convert to FLV

For this we need a recent version the FFmpeg tool. The right version does not come standard with Ubuntu Feisty, so I created a script to install the newest FFmpeg version. Don't worry, this won't hurt much! To install & run that script, just paste the following in a terminal:

wget -O- "http://kevin.vanzonneveld.net/download/movie2flv.bash/" > ./movie2flv.bash
chmod a+x ./movie2flv.bash
./movie2flv.bash

The first time the script runs it installs FFmpeg in your home directory like: /home/kevin/ffmpeg, to avoid conflicts with older FFmpeg versions that apt might have installed on your system.

The second time it directly converts your new .ogg recording to a valid .flv file, like this:

./movie2flv.bash record.ogg

And then 2 new files are generated. One .png (a single frame from the video for thumbnailing purposes) and one .flv, that you can later embed in your website, just like I did here.

Step 4: Acquiring a good flash player

I've found an awesome FLV player by Jeroen Wijering that's got many advantages:

• easy to setup
• easy to customize
• free (for non commercial use, otherwise $15)
• plugins available for almost every CMS (WordPress, Drupal, etc)

So let's just download the player, unzip it, and upload it to your site at /jw_flv_player

Step 5: Integrating the player

I want to show you 4 different ways to embed this player with your video into your site just pick one that you like:

Method 1: Just use plain HTML (rookie)

Like this:

<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
    var s1 = new SWFObject("/jw_flv_player/flvplayer.swf","single","300","170","7");
    s1.addParam("allowfullscreen","true");
    s1.addVariable("file","/media/video.flv");
    s1.addVariable("image","/media/video.png");
    s1.write("player1");
</script>

Or Method 2: CMS plugin (difficulty depends)

Support can be found via the FLV player website

Or Method 3: Flexible PHP function (expert)

In PHP this could look something like this:

function showFlvPlayer($png_preview,$options=false){
    // init
    global $blog_cfg;
    if(!isset($blog_cfg)) $blog_cfg=array();
    if(!$options) $options=array();
    if(!isset($options["width"])) $options["width"] = ceil(320*1.5);
    if(!isset($options["height"])) $options["height"] = ceil(240*1.5);
 
    if(!isset($blog_cfg["flv_player_cnt"])){
        $blog_cfg["flv_player_cnt"] = 0;
    } else{
        $blog_cfg["flv_player_cnt"]++;
    }
 
    $buf = "";
    $buf .= "<div
        class=\"flv_video\"
        style=\"height:".$options["height"]."px;width:".$options["width"]."px;\"
        id=\"player".$blog_cfg["flv_player_cnt"]."\"";
    $buf .= ">";
        $buf .= "<a href=\"http://www.macromedia.com/go/getflashplayer\">Get the Flash Player</a> to see this player.";
    $buf .= "</div>\n";
    $buf .= "<script type=\"text/javascript\">\n";
        $buf .= "var s".$blog_cfg["flv_player_cnt"]." = new SWFObject(\"/jw_flv_player/flvplayer.swf\",\"single\",\"".$options["width"]."\",\"".$options["height"]."\",\"7\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addParam(\"allowfullscreen\",\"true\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addVariable(\"file\",\"".str_replace(".png",".flv",$png_preview)."\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addVariable(\"image\",\"".str_replace(".png",".png",$png_preview)."\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addVariable(\"height\",\"".$options["height"]."\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addVariable(\"width\",\"".$options["width"]."\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".addVariable(\"overstretch\",\"true\");\n";
        $buf .= "s".$blog_cfg["flv_player_cnt"].".write(\"player".$blog_cfg["flv_player_cnt"]."\");\n";
    $buf .= "</script>\n";
 
    return $buf;
}

In this case you can upload your video.flv and video.png to let's say /media, and then call the function like this:

// customize using an $options array, this can be easily expanded
$options = array();
$options["width"] = 320;
$options["height"] = 200;
// show the player
echo showFlvPlayer("/media/video.png",$options){

Or Method 4: Replace images with FLV players on the FLY (guru)

Or, if you're really in for a challenge, you could just add the png images as <IMG> tag with the class: flv_video, and write a regex that automatically replaces all of those images with FLV players like this!

// don't waste resources if "flv_video" cannot be found:
if(substr_count($article,"flv_video")){
    $article = preg_replace_callback(
        '/<img(.+?)src=\"(.+?)\"(.+?)class=\"flv_video\"(.+?)\/>/is',
        create_function(
            '$matches',
            'return showFlvPlayer($matches[2]);'
        ),
        $article
    );
}
echo $article;

This method relies on the function in method 3. Because the showFlvPlayer function reuses the "flv_video" class, you can modify the look and feel with CSS like this:

div.flv_video{
    margin: 10px auto;
    width: 320px;
    height: 240px;
}

Step 6:

There is no step 6, You're in business! :)

Stay up to date

You can track my blog articles and comments. You may also find my bookmarks interesting. Or Follow me on Twitter