Yeah, really don’t do this. Seriously out of date.

Last year while working on dasniyasommer.de and dealing with presenting video in an attractive way with much backend flexibility, I found Flowplayer. It’s remained my favourite video player, though with doing all my projects at the moment in WordPress, I went through a struggle the last days with it.

On another project I did recently, bedrohtevoelker.de (a simple transfer into WordPress using a template to make updating content easier), I used FV WordPress Flowplayer, but like all the plugins, and all the other players I’ve seen, there was little or no possibility to customise the controller or other background aspect.

I’ve been working on bringing Daniel Jaber’s website into WordPress in the last week. The original site, hand-coded falls apart in three quite important areas. Firstly, being html it’s a pain to update. Secondly, the combination of site structure and function make it a pain to get video and images to work properly, and thirdly, it breaks in the standard browser that things break in.

I thought I’d begin by first uploading all the text content, using Blueprint CSS again, which I’m customising more and more with each project, formatting this, and the general site structure and layout, deal with the image overlays, and then move onto the accordion menu and perhaps AJAX-ing the page loading after I’d done the video. The last couple of days have been video.

Much searching and trialling of plugins led me to think it was not going to be easy to recreate the video player as I’d coded it using this approach, so I started to look for both another workable option, and a fallback (ugh) in case there wasn’t.

My first serious approach was Manually Adding Flowplayer to a WordPress Theme, a step in the right direction, but not so manageable also. So then I started thinking, well it’s just a clump of Javascript with some specific HTML on the end, why can’t I just paste that into the HTML editor in WordPress? Because when you do things like that, WordPress breaks them. My next idea was, well, is there anyway to not-break them? Somehow my feeble brain stumbled back towards inserting PHP into a post.

Hallo WordPress PHP Execution Plugin. Though I did try the highly downloaded Exec-PHP first, it only allows pages to be written in HTML mode, not so good for people who just want to upload content. PHP Execution semi-allows this. in Visual mode, the PHP sits behind an image, so doesn’t get converted into junk. The semi-part is that if you edit a page in Visual mode, it breaks, but there is a cludge-ish workaround.

I started first by following the original article, adding the Flowplayer code to my page template, to make sure it worked and where it broke, then transferring it into a test-page and seeing the same. In the end, very little went askew. The plugin handles indented code formatting without letting WordPress stick a p or br tag between every new line, and respecting for the most part spaces as spaces, and the occasional addition of \ escapes was all the extra I added.

The only place it really gets affected is a matter of styling, where any line breaks between divs and other html markup, i.e. the last lines which create the player and controller have a br added between. Running all these lines into one fixed that, and the css I used in the original layout largely carried across to the new site – though I cleaned it up a little and took advantage of some CSS3 rounded corners.

Once this was all done, I decided to add a little pleasure for Daniel while editing a project page. The standard PHP Execution plugin covers the code in a small purple-ish ‘PHP’ graphic. I thought it’d be nicer, as the idea is for him to do everything besides the video in visual mode, to replace that graphic with a corresponding one representing the splash image for the player. A couple of minutes in Photoshop and then changing a couple of lines in the plugin’s css and happiness ensued.

What’s left to do then is get this working with multiple players on the same page and add in some of the other good features such as bandwidth streaming. With all of Flowplayer contained in the JavaScript or in a couple of lines of html and only making calls to either the player’s JavaScript or .swf files, this method seems to be the best I’ve come across that allows for both the abilities of the player and the simplicity of WordPress to work together. The only place it seems to break is if you edit the page in visual mode, but at least visual mode isn’t ruled out entirely, and copy-pasting the player code with edits for the correct file paths in html mode as a last step is an acceptable-ish compromise.

Oh and the code below, using the CodeColorer Plugin, which works fine from ecto also.

echo'<div id="video"><script type="text/javascript">// <![CDATA[
window.onload = function () {
$(function() {
$f("player", "/path/to/flowplayer-3.1.5.swf", {
play: null,
clip: {
baseUrl: \'http://danieljaber.com\'
},
playlist: [
{
url: \'/path/to/video.f4v\',
title: \'a title\',
subTitle: \'a sub-title, ...\',
time: \'3:07\'
}
],
plugins: {
controls: null,
},
canvas: {
backgroundGradient: \'none\',
backgroundColor: \'#000000\',
},
}).controls("appleControls");
});
};
// ]]></script>
<a id="player" class="player plain"><img src="/path/to/splash-image.jpg" alt="splash image" /> <div id="appleControls" class="controls"></div></a>
</div>'