customised flowplayer in wordpress

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

Last year while working on 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, (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: \'\'
playlist: [
url: \'/path/to/video.f4v\',
title: \'a title\',
subTitle: \'a sub-title, ...\',
time: \'3:07\'
plugins: {
controls: null,
canvas: {
backgroundGradient: \'none\',
backgroundColor: \'#000000\',
// ]]></script>
<a id="player" class="player plain"><img src="/path/to/splash-image.jpg" alt="splash image" /> <div id="appleControls" class="controls"></div></a>


Because it’s…

I’m watching WordPress install under the tessellated layers of windows open. I can see command lines march upwards, not quite enough visible to make sense, but familiar. In the meantime, some words.

I’ve been working on two quite big projects so far this year, both of which I’ve had rather vertiginous experiences of learning, occasional strings of days of coding and between moments of joy and sternum-pressing uhhh’s of small failures or slight blind terror at not knowing the outcome of my next irreversible click, between this all a slow plodding towards an arrangement of things.

Dasniya asked me to help with… mmm maybe to say an idea for a website, like sliding around a page, like for example in Google Maps. A while ago now, she asked me. We talked about ideas for how it might look and I said something like, “To me, your notebooks are far more interesting than any layout, so…”

I could have done it in Flash, but my long affinity with CSS and other delights, and also a practical simplicity born largely of the amount of research I do in the internet where text and accessibility are for me a prime concern, and along with this a discovery of how far JavaScript has come since I laughed it out of my sight when first learning web design in favour of Flash, where beautiful simple things were possible with elegant and simple code…

I discovered jQuery. Well, I discovered Ariel Flesler’s plugins, jQuery.ScrollTo and jQuery.Preload. And jQuery, and the possibilities of which I dimly comprehend. I considered the CSS grid system, opted for a shakey… honestly I do have a sense of how it works, but am surprised every time I add another row or column, surprised it stays together on different browsers, surprised it wasn’t more trouble, surprised it seems to happily take amendments and alterations without collapsing, sometimes to smile when I can consistently cause it to implode and in making mistakes understand how it survives.

The idea was simple, to have everything on one sheet, like an architectural drawing with multiple views, and for the sheet to slide between each page or view, and in doing so pass over other pages, the background being gridpaper from a notebook. I think now there are six rows and nine columns, but maybe more. (On a Mac with two-finger scrolling it’s more fun, though jQuery is possible to give this in a click-drag fashion, something for me to work on yet).

jQuery also led to Flowplayer. There is an abundance of horrible Flash video players around, and when version 3.1 arrived with bandwidth detection and other amazing stuff, I was rather happy at my time already playing with it. I would love to have say, two weeks to learn it better, or even a week…

(something else to work on…)

So my current love for CSS, HTML, jQuery comes from these weeks of learning and playing.

Yes, I could have done it in Flash, likely more elegantly also, but for me I like the feeling of this precarious assembly of things, that I can feel, when I think over it, the threads and seams, where one piece is sewn to the next.

I’ve said little about the content, which has been equally entrancing… caused many smiles and happinesses… perhaps better to read and see and play than for me to include other words.

So, while still becoming itself, I think I shall go and enjoy it once more.