Alright, it's not a gallery yet, but it plays video… if you don't feel like reading anything, just download the plugin here.

Step 1 - Convert video to .flv

In my humble opinion, the best way to publish video content is in flash video format (.flv) since it works the smoothest on all major platforms - Windows, Mac, and Linux. So the first step is to convert your videos to the .flv format. If the software you use to edit your videos can export to .flv, great. If it can't, you can use Riva LFV Encoder (works in Windows) which is a freeware that will convert many video formats into .flv. Linux users can use ffmpeg.

Step 2 - Preparing the video player

To post a flash video on your website, you need some kind of flash player. My most favorite one is made by Jeroen Wijering and can be found on his website.

To do this in WordPress, you're going to need to install a plugin. One that has worked well for me is Fallen Media Filter by fallen

Now the fun part: creating your own plugin by taking the best out of fallen's plugin and Jeroen's flash video player, and making it work for you. So let's get started.

To get the video you see in the example, you need this html: (Line wraps marked »)

<object type="application/x-shockwave-flash" data="http://yourwebsite/flvplayer.swf? »
file=videos/022.flv&autoStart=false" wmode="transparent" height="260" width="320">
<param name="movie"
value="http://yourwebsite/flvplayer.swf? »
file=videos/022.flv&autoStart=false">
<param name="wmode" value="transparent">
</object>

So when editing the plugin, instead of the following (embed tag is not valid):

$output = "<embed width=\"$width\" height=\"$height\" AUTOSTART=\"0\" src=\"$filename\"></embed>";

I do this: (Line wraps marked »)

$output = "<object type=\"application/x-shockwave-flash\" data=\"http://yourwebsite/flvplayer.swf? »
file=videos/$filename&autoStart=false\" width=$width height=$height wmode=\"transparent\">\n";
$output .= "<param name=\"movie\" value=\"http://yourwebsite/flvplayer.swf? »
file=videos/$filename&autoStart=false\" />\n";
$output .= "<param name=\"wmode\" value=\"transparent\" />\n";
$output .= "</object>\n";

Make sure that the file parameter you're sending to flvplayer.swf points to the path where your videos are stored. You can do either absolute or relative.

Now, delete the flvplayer.swf from fallen's plugin and replace it with Jeroen's flvplayer.swf.

Now install (and activate) this edited plugin.

Step 3 - Using the plugin in a blog posting

Here's an example of how it looks in a singe post. All you have to do to get something like this is…

1. If you want the video to show a thumbnail, you need to create it. It needs to have the same resolution as the video and same name. For example, if the name of your video file is myvideo.flv, the thumbnail for it needs to be myvideo.jpg.
2. This is what you enter into your blog posting.:
   [ACT]yourvideo.flv,320,260[/ACT]

Step 4 - OK, now it's time for a hack so you don't have to "Activate Content" in IE!

If you have used Internet Explorer to display a page with any flash in the past 6 or so months, you have noticed that sudddenly you are required to activate the flash content before you can use it by clicking on it. This was bad news. But the good news is that you can get around his "feature" by following Adobe's instructions. So should we just go ahead and copy and paste the code they provide? No way! Let's just use the same concept. So here it goes.

So instead of having the plugin insert the code wherever you put [ACT][/ACT] tags, we're going to create an external javascript file that will put the code loading the flash file there - and IE won't be mad.

The outcome is available here.

***This template has yet to be updated to the new beautiful look.