Archived entries for Video

Shifting Daniel Jaber into WordPress

Daniel Jaber is the second choreographer and dancer I’ve done a website for. Coming from Dasniya Sommer, I was intent on messing around with jQuery again, and finding something distinctive to build his site around. The initial site, as with Dasniya, was hand-coded, relying on jQueryTools, which I discovered through Flowplayer for much of the interactivity.

Two big problems emerged. Firstly was the pain of updating static HTML. Even though I write my blog posts in this way, and have no difficulty screening out code from in front of my eyes, this way of managing a site is painful. The second big problem was the conflicts between how the content on the page was loaded and both video and images. The plan had always been to put the site into WordPress, and so I did.

The idea for using Daniel as his own background image was a fairly inevitable one, remembering when I first saw him, all piercings, blue mohawk, tattoos. I first tried supersized for this, but found it slightly heavy for just a single image. Lucky then CSS-Tricks had the perfect, all-css answer, which has become one of my favourite bits of code, being fond as I am of huge background images.

First though, I had an idea for the menu, coming from jQueryTools’ accordion tabs, with much eviscerating of CSS and some slowing down of the slide effect. This though, I could never get to work in WordPress. Much messing around in jQuery, dynamically adding classes and divs and removing them from elsewhere, I could even get it to work using an identical sidebar HTML structure to WordPress, but when I tried to use it in WordPress, weirdness ensued. I really wanted to use this though, because it’s the only accordion I’d seen with different times for the sliding effect.

But WordPress has almost everything, and I fell upon jQuery Accordion Menu for Wordpress, which has very similar code, taking a couple of hours at the most to get the CSS right and working rather nice.

Of course when I added the page crossfade eyecandy, it broke again. My fault for using redirectPage.

supernaut still uses the Flash-based sIFR method for using nice fonts, but the last couple of sites I’ve been rather enjoying the combination of open-source fonts and @font-face. Not one of those beautiful new CSS3 adventure like opacity or rounded corners, even Internet Explorer 5 supported this, and lately with a deluge of options for pretty typography, it has become increasingly popular. And far easier to implement that sIFR also. Oh, the title font is Anonymous Pro, which I think is one of the most elegant monospace fonts around (also important that is has Unicode-based character set, important for things like ü and ß).

Being dance, video was always going to be lurking. I wrote about my fun with Flowplayer and WordPress earlier, and still finishing this, with bandwidth check, pseudostreaming and the inevitable full-screen option shuffling this way. I’d rather be doing this all in HTML5 though, and shall come up with a graceful degradation from that to this in my next project.

A bunch of small plugins helped me along the way also. Add From Server let me add video to the WordPress Media Libary after I’d uploaded via FTP – perfect for large file sizes, and modifying allowable upload file types meant I could get the f4v there also.

pageMash made structuring the site and reordering projects as they move from ‘soon’ to ‘now’ to ‘then’ so much nicer than blah-ing around editing the pages themselves, and PHP Execution made it possible to do the Flowplayer video cludge.

Elsewhere, Lightbox Plus for a not-overpowering image gallery, though I am still working on this. DB Cache Reloaded and Hyper Cache for the necessary site caching, as long as I don’t forget to disable them when I’m busy working. PHPEnkoder, based on my favourite Hivelogic anti-spam email encoder. And WordPress File Monitor, which is about the most useful anti-hacking plugins I’ve found.

Oh, and page crossfade! I know it’s a bit Flash 2001, but I really did want to recreate the page fade-out/-in from the original site. (Not so good if JavaScript is turned off though.)

Daniel Jaber Website small

Customised Flowplayer in Wordpress

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
echo '<div id="video">
<script type="text/javascript">
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 class="player plain" id="player"><img src="/path/to/splash-image.jpg" alt="splash image" /></a><div id="appleControls" class="controls"></div>
</div>'
?>

flowplayer php wordpress admin small

flowplayer php wordpress site small

Copyright © 2004–2009. All rights reserved.

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.