Geek Speak

Over this last year I have been experimenting with different ways of integrating video within our blogs. At the outset I had to main options: use something like YouTube or Google Video or host it myself. I picked the later option for two reasons. Firstly, I was not happy with the quality of the Flash videos on these free services; way too pixelated and absolutely no way of controlling this. Secondly, YouTube means that any idiot can come along and scribble profanity over what could be a video meant for a wide audience, including children.

I started by making Flash videos, but this brought back the quality problems. I’m not willing to fork out for expensive Adobe software and I don’t want to steal it. The free software options, such as avidemux, whilst being just satisfactory, didn’t give me enough control over quality and performance, plus there were bugs to work around. So I started looking at x.264 compression.

I really liked the look of mp4 / h.264 (x.264 / lavc) encoded video and delivered a lot of options for tweaking and optimising video quality and performance. Secondly it is an open standard, unlike Flash video, and there are better free / open source software tools out there for creating and editing this format. The way I look at it is that many people will already have Quicktime installed, probably as a result of using iTunes, and this is a wide enough user base for me. The next challenge was getting it to work well with Wordpress.

There are a number of ways that you can do video in Wordpress but my requirements were specific. Firstly I wanted a image placeholder that anyone could view without having Quicktime installed. Secondly I wanted to ensure that my blog post didn’t look like HTML soup when viewed as an RSS feed. I was amazed at how many of the WordPress / Quicktime plugins didn’t meet both of those requirements. Some relied on Quicktime to display the poster frame while others generated unavoidable interference in RSS feeds. This last option was important because I use the RSS feeds to supply content across our blogs. I finally settled on a suitable configuration.

I use a JavaScript library called jQuery (hosted on Google for my convenience) and a plugin for it called EmbedQuicktime. I simply included some code in the header of my site’s template like so:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
  src="http://www.swansonblog.com/scripts/jquery.embedquicktime.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery.embedquicktime({
      jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js',
      plugin: 'http://www.swansonblog.com/scripts/jquery.embedquicktime.js'
    });
  });
</script>

Then the jQuery library is available on any page of that blog.

When I want to embed a video in a post I simply upload the video and a place holder image to an appropriate location on my web site (I use a separate subdomain for this to avoid WordPress URL redirection problems and for future proofing). I then copy the HTML from a previous video post and change the particulars. I’ve also done up a template for the poster frame in GIMP so I can easily punch out that still image with the overlaid play button.

I’m quite happy with the end result, it’s a robust system of embedding video and, whilst not entirely automated, it delivers good product to wide number of people. Check it out the end result here:

http://www.swansonblog.com/paulandlauren/2008/12/22/and-oh-the-ice/