Administrative Options Panel:

Video Player Embedded in a Post with Custom Poster Frame:

Floating Player Controls:

Player with Custom Watermark Logo:

Custom Player Color Examples:

After some deliberation, I decided to look into alternative methods for delivering video over the web. I was pushed into action by the service patch to IE6 that presented visitors to my website with an active-x dialog box. This was disturbing at best and downright annoying at worst. However, even before the IE update, I was getting reports of people not being able to view my videos, or having to download a new version of Quicktime every time they wanted to watch a video (and at a 30+mb download, that was very painful for some). So, I decided to look into alternatives for video delivery. It seemed like Flash video was the best available option, given it’s penetration (97% of computers have Flash installed) and small download size (1.31mb). Also, Google, YouTube and AOL all use a flash based player for video, so it seems that the industry has finally begun to converge on a single technology.

After deciding on the technology, I set out to find a good free player. Hands down, the best free player I found was the Flash Video Player created by Jeroen Wijering.

Here’s are the simple steps to get it working on your website.

1. Download the Flash Video Player from Jeroen’s website. Unpack the files.

unzip jw_flv_player.zip

2. Transfer the following files to your WordPress root directory:

swfobject.js, flvplayer.swf

3. Using the “Theme Editor” under admin tools, edit your WordPress Theme header template file to include the following code between the head tags:

<script src="swfobject.js" type="text/javascript"></script>

4. Download my Flash Video Plugin for Wordpress. Unpack the plugin.

gunzip flashvideo-1.1.php.gz

5. Transfer the plugin to your server’s WordPress plugins (wp-content/plugins/) directory.

6. Enter the admin panel and activate the plugin

7. FTP into your server and create the folder that will contain your videos under your main WordPress install directory. Call it videos or whatever you want.

8. Move the included video file (video.flv) into your newly created videos directory to test.

9. Create a new post and enter the following tag:

[flashvideo width="320" height="240" filename="videos/video.flv" /]

10. That’s it! You’re in business. If you want to further customize the player, you will have to hack the plugin to add other options, but it should be pretty easy.

** Update: I have updated the plugin to version 1.1. I have switched the plugin to write the JavaScript code using the SWFObject library. To update from the previous version, follow these simple steps:

• Download the new Flash Video Player
• Unzip the package and transfer the files flvplayer.swf and swfobject.js into your wordpress root directory.
• Download the new Flash Video Player Plugin for WordPress
• Decompress the plugin and transfer to your plugins directory. Deactivate the old plugin and activate the new one.
• Edit your Header file:
  Change: <script src=”ufo.js” type=”text/javascript”></script>
  To: <script src=”swfobject.js” type=”text/javascript”></script>
• Optionally, you can remove the following files: fullscreen.html, ufo.js, flashvideo-1.0.php