sheep.handturkeystudios.com

So we’ve migrated the main Hand Turkey Studios website to a new backend using WordPress and a variety of other cool bits of software. One part of the process was revamping our Print and Animation portfolios to have more friendly navigation. In particular, we really needed to find a way to show our animated work in a single, unified framework. For all intents and purposes, this means Flash video. The FLV format is ubiquitous and nearly universally playable (even for Linux nerds like me).

Of course, being a Linux and open source geek, I really wanted to find a way to create and embed these Flash videos without ever needing to boot into Windows. Fortunately, there is a way. That way is a combination of ffmpeg, flvtool2, and a really cool tool called FlowPlayer. I’m not going to get into how to install and/or compile these tools since it varies across platforms. For that, you’d be better off going to the relevant app’s documentation.

Let’s start with the encoding first. There were some good suggestions on the FlowPlayer website, but ultimately, the quality of those files was far too low for my tastes. Here’s an abstracted version of the ffmpeg command I used:

# ffmpeg -i [input_video] -s [640x480|480x360|320x240] -qscale 4 -ar 44100 [output_video].flv

Alright… so what does all that mess mean? Most of it should be obvious, but I’ll go through some notes. The [input_video] can be nearly any format (ffmpeg recognizes quite a few), however, in my experience, it plays nicer with videos wrapped in .avi than videos wrapped in QuickTime’s .mov format. The next block scales the video… Since the majority of my source material is NTSC formatted, I used one of the 3 sizes up there to scale to a square-pixel size (think of them as large, medium and small). All of the videos in our Animation portfolio are scaled to 480×360.

The next bit is where I differed from the FlowPlayer encoding page. That page uses ‘-r 12′. This attribute sets the framerate to 12fps. I don’t want that. I want to maintain the same framerate, but compress things more. Removing that attribute from the command does indeed maintain the framerate of the source video, but there’s no control over the compression. Setting ‘-qscale 4′ solved this problem nicely for me. The rest of the command is pretty straightforward: setting the audio rate to 44.1 kHz and naming the output file.

So now the file is encoded, but it still won’t play nice with embedded Flash video players. It needs to have FLV metadata injected into it. Enter flvtool2. The command for this is very simple:

# cat [input_video].flv | flvtool2 -U stdin [output_video].flv

Note that [input_video] can be the same filename as [output_video] and everything will still work nicely. And with that, you should now have a Flash video file that can played by an embedded player.

“But Jason,” you say, “don’t you have to use Flash to make those neat Flash video players like they have on YouTube and MySpace?” NO. You don’t. This is where the beauty of FlowPlayer comes in. FlowPlayer is an embeded Flash video player developed without using the Flash authoring tool. Rather, it was made using as2ant and it comes with source code! Woohoo!

“That’s great n’ all, but how do I get it on my website?”

That’s actually the easiest part of this mess. After you’ve downloaded FlowPlayer to your machine, unpack it and upload FlowPlayer.swf to some publicly accessible directory on your web host (for our purposes here, we’ll assume you uploaded it to the root of your web directory). From this point it’s a simple matter of adding this code where you want to put a video:

    <object type="application/x-shockwave-flash" data="/FlowPlayer.swf" id="FlowPlayer" height="376" width="480">
      <param name="allowScriptAccess" value="sameDomain"></param>

      <param name="movie" value="/FlowPlayer.swf"></param>
      <param name="quality" value="high"></param>
      <param name="scale" value="noScale"></param>
      <param name="wmode" value="transparent"></param>
      <param name="flashvars" value="config={videoFile: '[video_file].flv'}"></param>
    </object>

This, of course, assumes that your .flv file is in the same directory as the FlowPlayer.swf file, though you could very easily place it anywhere and give the full path to it. There are a number of other attributes that FlowPlayer will recognize for loading a splash image, controlling auto-buffering, changing the look of the player, and even setting up playlists. For us, we did a little simple php and greybox and I think the result turned out quite nice. Hopefully this posting proves to be useful for you other open source software users interested in embedding Flash video on your websites without ever having to leave the comforts of your Linux environment.

And even cooler: you can embed flash across websites… like this:

So there you are. If you have any questions, feel free to post them in the comments section.

This entry was posted on Tuesday, March 27th, 2007 at 9:42 pm and is filed under Projects, Site Stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.