for the good time Jerry’s ramblings…

You would think that since I work at Intel designing microprocessors, I would be more up on technology.  But I am not.  My friend Todd had to explain to me what ‘twitter’ is just a few weeks ago, and I have never actually seen facebook.  I only just got a cell phone last year, and some major trends in the tech world have completely passed me by. So perhaps I shouldn’t be surprised that web development tools have gotten so very sophisticated since I started playing with HTML back in 1994.  But, I am.  Wordpress is amazing - I was able to put this site up in minutes.

OK, it didn’t actually take me minutes exactly, I had to learn a bit about how it works, and I had a rough vision of the things that I wanted to do with our shrolly blog.  The devil is in the details, and there were several things I had to tweak before wordpress was working to my satisfaction.  My goals were pretty simple:

• A way to show movies embedded within my blog that could be viewed on every browser.
  • I want to host movies locally on my web site
  • I may also want to link to other movies and embed them into a blog entry
• A way to convert all of my Canon camera movies (AVIs) into a compressed format, and rotate them as needed.
• A slideshow tool that allows me to just throw my full-sized images into a directory and display them without any fuss
  • Photos are ordered in the date taken (filename won’t work because we have two cameras)
  • Photos are automatically pre-loaded when viewing in slideshow mode so that it is quick to flip through the images
  • Title and caption are automatically pulled from the EXIF data in the photo
  • Full-sized photos may be downloaded automatically
  • Allows arrow key movement in between images
  • Doesn’t require you to move your mouse when clicking from one image to the next if they have different orientation
  • Automatically rotates images based on EXIF data.
• When a single photo thumbnail is embedded, you can click on it to see a full-sized pic, and you can download the full-sized picture
• The blog is searchable

I wasn’t able to achieve all of these goals, but I got pretty close, and I’m sure they will come in time.

Embedded Movies

After some playing around, I came to the conclusion that the FLV (flash video) format was the best.  This is what YouTube uses, and it is ubiquitous - every browser supports it, the format has good compression (is it H.264?) , and last but not least, there are free flash players out there that integrate nicely with Wordpress.

After trying a few different options, I converged on the Flowplayer plugin for Wordpress.  Some installation notes:

• I had to use revision 2.0.1.0 for reasons I do not understand… Something about 2.0.1.2 was causing Wordpress to crash (resulting in a blank blog - I guess this is a common side effect of a bad plugin).
• I had to upgrade to PHP 5.x (using it with PHP 4.x results in a syntax error).
• I had to change some definitions in flowplayer.php:
  • change ‘RELATIVE_PATH’ in flowplayer.php to point to my blog subdir
  • change ‘VIDEO_PATH’ in flowplayer.php to point to my blog subdir
• Change plugin settings to set ‘autoplay’ to FALSE (i.e., don’t automatically start the movie when the page is loaded)
• Change plugin settings to set ‘autobuffer’ to TRUE (i.e., do automatically buffer the movie when the page is loaded)
• Create a new ‘videos’ directory under my wp-content for storing my movies, and point flowplayer.php to it.

So why did I choose this plugin over others?

• It works with movies locally posted to my web site
  • Some of the other player options out there required that you host a movie on YouTube, for example
• It has a nice, simple interface (play, pause, etc)
• The method for embedding the movie is trivial.  Just put some text like this in your blog entry, and the tool does the rest!

For example:

Generating Flash Videos

Of course, it isn’t enough to have a flash video player.  You also need to be able to generate the videos.  I have AVIs from my Canon S5IS.  I just need to convert them into FLV files, and in some cases I need to rotate them.  After a lot of research and playing around, I wasn’t able to find a graphical tool that consistently and reliably worked on both Windows XP and Mac OS X.  What I found, though, was that most of the free programs out there are fundamentally based on the ffmpeg and mplayer (mencoder) tools.

The first challenge was getting a binary to install these programs.  Windows was a bit easier:

• Windows XP ffmpeg binary
• Windows XP mplayer (including mencoder) binaries

FFMPEG

For MacOS X, I actually needed to install the source code and compile it myself.  For ffmpeg, I followed the instructions on this post.  Basically, I followed these steps:

1. Install xcode (an extension to Mac OS X from Apple), this gave me gcc
2. Install MacPorts from www.macports.org
3. Using MacPorts, I imported ffmpeg according to this post.
4. In a terminal window:

sudo port -v selfupdate
sudo port install ffmpeg +gpl +lame +x264 +xvid

I played with the ffmpeg options a bit, and settled on a command line like this, which I believe is similar to YouTube compression:

ffmpeg.exe -i MVI_0445.AVI -y -b 800k -r 25 -f flv -vcodec flv -ab 56k \
  -ar 22050 -s 480x360 out.flv

MENCODER

ffmpeg is only for compressing and converting videos.  For rotating, I needed mencoder (included in mplayer).  In order to install mplayer:

1. Pull the source code from here.
2. Run these commands:

 ./configure --disable-mp3lib

make

make install

Note that I had to “disable mp3lib”, whatever that means.  Without this, the compile failed.

The mencoder tool can rotate movies.  Here is the command line I used to rotate clockwise by 90°:

mencoder -vf rotate=1 -o OUTPUT.AVI -oac copy -ovc lavc INPUT.AVI

Putting It All Together

Now that the fundamental tools were installed, I was able to write a Perl script to do the dirty work for me.  Here is how I use it:

perl movie2blog -rotate 90 MVI_XXXX.AVI

This script will rotate the movie, convert it to an FLV, and dump the result in “My Videos” (WinXP) or “Videos” (MacOS X).  You will need to set up the correct directory structure for your system in the source code.  You will also need to install ActiveState Perl on your windows system if you don’t already have it.

Slideshows

I tried out a few slideshow display tools, and one of them nailed my goals pretty well, so I abandoned any further searches when I found it: DM-albums.

All you have to do is put your images in a public directory of your choosing, and the php script will do all of the leg work of finding the images, ordering them, bulding thumbnails, etc.  It offers a small embedded view as well as a full-screen viewer.  If you look at my list of requirements above, I have many needs, and this album viewer definitely doesn’t meet all of them.  But, hey, it was free, and maybe some day I will write some extensions to the code.  In fact, I did write one extension for a feature that I really wanted: ordering the pictures by date instead of by file name.

See my copy of the plugin’s photoalbum.php with the fixes for ordering images by date.  Soon I’ll be sending the proposed changes to the owner so that hopefully it will get integrated into the plugin.

Once you have done all of this, then you just need to tell dm-albums where to find your slideshow.  I had some troubles using the basic syntax that they suggested, but this one seems to work consistently.  Also, I have noticed that on the first load of the blog page, it doesn’t work.  On the second load, it seems to be fine.

Sample syntax:

[album: http://theshrollys.com/slideshows/path-to-jpgs/]

Results in this:

Embedding Pictures

At first I thought that embedding thumbnails using the default wordpress settings would be sufficient, but there were a few things lacking:

1. I wanted to be able to click on the image and get a full-screen version
2. I wanted to be able to download the full-sized image
3. I wanted to automatically have the image tilted according to the EXIF data.

Sort of by accident, I stumbed on Shutter Reloaded which solved two of the problems (I’m still trying to figure out how to auto-rotate).  After installing the plugin, all of my embedded photos are now click-able for larger viewing and the full-sized image can be downloaded.