I have written a lot lately on the use of the JW Player for video playback on the WordPress platform. I decided to try and find a solution that might make it a little more user friendly. This article is aimed at offering a quick and easy way to incorporate the player into your site should you choose. It could just as easily be used in any theme that allows you to use the custom fields component when authoring.
The player is really quite simple and as demonstrated in this example only requires three files to work;
- The player.swf file
- The swfObject.js file
- An mp3 for audio - .flv or mp4 for video
This is the code that is written into the default (kubrick) themes index.php, single.php, page.php and the jw_player.php-template files which are availiable in this download. There is also documentation there which explains how it works and how to put it together. It is fairly straight forward and simple.
<script type="text/javascript" src="<? if (get_post_meta($post->ID, ‘url’, true)) { ?><? echo get_post_meta($post->ID, ‘url’, true) ?><? } ?>/wp-content/plugins/media/swfobject.js"></script>
<div id="player" style="margin-top:4px; font-size:.000001em; line-height:0; color:#fff; overflow:hidden;"></div>
<script type="text/javascript">
var so = new SWFObject(’<? if (get_post_meta($post->ID, ‘url’, true)) { ?><? echo get_post_meta($post->ID, ‘url’, true) ?><? } ?>/wp-content/plugins/media/player.swf’,'mpl’,'<? if (get_post_meta($post->ID, ‘width’, true)) { ?><? echo get_post_meta($post->ID, ‘width’, true) ?><? } ?>’,'<? if (get_post_meta($post->ID, ‘height’, true)) { ?><? echo get_post_meta($post->ID, ‘height’, true) ?><? } ?>’,'8′,’000000′);
so.addParam(’allowscriptaccess’,'always’);
so.addParam(’allowfullscreen’,'true’);
so.addParam(’flashvars’,'&file=<? if (get_post_meta($post->ID, ‘video’, true)) { ?><? echo get_post_meta($post->ID, ‘video’, true) ?><? } ?>&image=<? if (get_post_meta($post->ID, ‘image’, true)) { ?><? echo get_post_meta($post->ID, ‘image’, true) ?><? } ?>&controlbar=<? if (get_post_meta($post->ID, ‘controlbar’, true)) { ?><? echo get_post_meta($post->ID, ‘controlbar’, true) ?><? } ?>&autostart=<? if (get_post_meta($post->ID, ‘autostart’, true)) { ?><? echo get_post_meta($post->ID, ‘autostart’, true) ?><? } ?>’);
so.write(’player’);
</script>
The video that plays when clicking the image in my sidebar is the trailer from the new Star Trek Movie which I downloaded from the Apple Movie Trailers page, and then converted it to an MP4 using Quicktime Pro. While I still find the .flv file usefull it seems that future use and current portability suggests a better choice in the MP4 format. With a little fussing around with the Quicktime settings a nice crisp video can be obtained offering a filesize (11.3 MB in this case) that will work for most modern connections. Enjoy!
