Until last month (April 2006), when we would post a video on this site, we would simply provide a link to a file. We tried providing the video in a number of formats such as XviD, MPEG-1, and WMV, but we weren’t all that consistent. Also, each format has issues when we’re trying to choose a video format that is viewable by the most people: XviD is supported on quite a number of platforms, but relatively few people have the video decoder installed because it doesn’t come with Windows; MPEG-1 works for the most part, but the files are larger than we would like; WMV works for Windows, but it strands our Mac and Linux users.

The solution to this video format problem is to use Flash video. There are three parts to supporting Flash videos on our site: picking a Flash video player that can be hosted on our web pages, encoding the source video into FLV format, and putting the player onto the page where we want the video to be viewed.

The Flash video player that we chose was written by Jeroen Wijering. His video player is available to be freely downloaded, and it includes the source code. We tweaked the player slightly so that it doesn’t rewind to the beginning of the video when it finishes, because we prefer to show the last frame instead.

To encode our videos into FLV format, we use the free Riva FLV Encoder. It’s a no-frills video encoder, but it does the job. It has had no trouble with supporting source videos in MJPEG, MPEG-1, or XviD format.

Finally, we need to put the video on the page itself. The FLV Player from Jeroen Wijering comes with documentation that says that one should write some HTML that looks like this:

<object type="application/x-shockwave-flash" width="400" height="220"
	wmode="transparent" data="flvplayer.swf?autoStart=false">
	<param name="movie" value="flvplayer.swf?autoStart=false" />
	<param name="wmode" value="transparent" />
</object>

What this doesn’t account for is detecting if the browser supports Flash. To test for browser support, we use an excellent Javascript file called SWFObject (formerly known as FlashObject until Adobe’s legal department cracked down on the name). Essentially, you give SWFObject the name of a <div> tag where the Flash object should be embedded. It tests if the right version of Flash is supported and if so, loads it onto the page.

So, we encode our video with Riva FLV Encoder, we put it in a directory on our site, and we make a call to SWFObject to place Jeroen Wijering’s FLV Player on a web page with our video. Feel free to contact us if you would like any help in putting FLV videos on your own site.

As a postscript, it appears that someone has built a WordPress plugin that transforms <flv> tags into the appropriate HTML code to load Jeroen Wijering’s FLV player. It seems like a good idea, but it probably makes sense to tweak it to use SWFObject. If we make this change, we’ll be sure to write about it here.