The following video will display where it is shown as 512×288 using mp4 that should be compatible with the iPhone.

Click on the following photo to display the same video in a larger lightbox as 640×360 using mp4.

At the beginning of May I was driving back to Albuquerque from Dallas from the Glazer-Kennedy SuperConference and took a couple videos with my Kodak Zi8 pocket video camera as an experiment. I got ahead of this train and looked for a curve in the road. I didn’t have a tripod with me, so simply hand-held the camera for this video.

Now I could have posted this video to YouTube and then included it here, but I wanted to learn how to display the video directly from this website. If you have ever embedded videos from YouTube, you know how simple it is. Just select the video and then copy some code that YouTube gives you to the location on your website where you want the video to appear.

For this video I wanted to upload it to my website and then learn how to display directly from that location. I also wanted the first frame of the video to be visible without the user having to click on the “play” button, which happens automatically like magic when displaying a video from YouTube. For now, let me skip the steps needed to accomplish this.

Instead, let’s take a look at some video quality issues and how that affects what is possible today. The original video was recorded at a width of 1280 & height of 720 at 15 fps and looks great. But the size of this 85 second video is a whopping 107.6MB. Even with a 1.5Mbit DSL connection, this takes way too long to display.

So I started experimenting with different ways to reduce the size of the original and still maintain a reasonable quality when displayed above. The first step was to reduce the size of the original from 1280×720 to 512×288 (maintaining the same width to height ratio) for the space allocated above. The file was still way too big and too slow to display. I finally reduced the size of the video file all the way down to 10.1MB and the display quality is still respectable for here. The resulting file size has been reduced by more than a factor of 10!

11/17/2010 Update: This video was originally being displayed with the help of the Flowplayer For WordPress plugin by David Brachhold. Recently I upgraded to Easy Video Player 2.0 and discovered a conflict between the two since both use Flowplayer to display video. Therefore I switched the display of this video to use Easy Video Player and all is well again.

There are a lot of other lessons learned in this exercise. If you would like to learn more, just leave a comment.