Fun with Flowplayer & jQuery

Recently at Amoebasys we worked with Media Machine to create a jQuery slider that integrated a Flash movie. Where the movie had to control the slider. This means that when the movie was playing it had to stop the auto sliding and start the slider again as soon as the video stopped.

Basically this is not as simple as it sounds. First we started by hunting around for an HTML5 solution that might be able to work, but we found that to be a wishy-washy solution that did not really work at best. The next route that we took was to manipulate Flowplayer that has an awesome javascript API and plays nicely with jQuery.

The final solution is Flowplayer together with a really simple jQuery slider developed by CSS-Tricks called AnythingSlider. But getting to that took some interesting gymnastics and a couple of sliders later.

The problem with most of the really simple sliders is that it is very complicated to stop their auto sliding from outside and they also have really crappy functions, mostly everything is piled into one or two functions with a couple of useless options.

What I like about AnythingSlider is that is has all sorts of functions for playing/stopping, jumping between slides etc with functions that you can call with simple click functions. This makes some real sense in terms of building extensions onto it.

Even though AnythingSlider has this awesome API we still had to add some clever bits and pieces to it in order to allow Flowplayer to control the way it worked.

So as I said the final solution is a simple integration of Flowplayer and AnythingSlider with a couple of modifications to the AnythingSlider code. This allows us to play movies inline in the slider while still keeping full control of what the slider can do or not with Flowplayer.

I will write some more about it later when the client goes live.