Review: Flowplayer

Paul Boag

Andy Wickes reviews Flowplayer the Open Source (GPL 3) video player for the web which can be use it to embed video streams into your web pages.

Recently I discovered a fantastically simple new player for those wishing to host and present video on their sites. As you can see, I was so impressed that I thought I’d share the good news. There’s been mention of Flowplayer in the forums, but even I was impressed at how simple it is to integrate so I thought I’d highlight some benefits and show how simple the mark-up needs to be to get your started with a simple integration.
First up, it is important to say that this is aimed at those who host the video files themselves. If you choose to use a video streaming service such as Vimeo or YouTube then both of these provide code for embedding the player themselves. Flowplayer provide a simple customisable player that will have your files up and on your pages in no time.

It is possible that you currently use Flash Video (FLV) as a file format. I certainly did, and if so you might have followed the following steps to get video live on your page:

Import the file into Flash.

  • Choose a player skin
  • Export as SWF
  • Collect up the Javascript file
  • Collect the SWF
  • Collect the FLV
  • Collect the HTML

Flash typically writes lines of unnecessary code into your javascript and HTML, and so you either need to remove lots, or you might simply ignore it and use your own markup.

Then you must upload these in the corresponding file structure on your website, acutely aware that if the video needs to change then you need to re-export the .SWF file again to replace it.

On the whole this is and has always been overly complex for achieving what is in essence a very simple process. Imagine if it was like this for images?

To get you started look at the free Flowplayer download. All you need do here is:

  • Upload the FLV, MP4, or H.264 video to your site
  • Upload their Javascript
  • Upload their SWF player

Reference the Javascript and player in your code:

<script type="text/javascript"> flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); </script>

E.g Then add an tag around the reference to the video: Lastly, reference the player itself, being sure to give it the same id as we have our video file, in this instance ‘player’ And that’s it. Full documentation (and it’s good) is on the Flowplayer website, along with demos and downloadable source code as you’d expect. It really is so much simpler and far more extensible than anything I have used up until now. The fact that I can track the plays via Google Analytics is always going to be useful. Also, the ability to replace files is so much more straightforward and with an open source product the developer community is continually improving things. I could add closed captions to my videos, create playlists, add and even animate captions that overlay the video and add background images to the video player. The free player has a watermark for the first second or so, but as you’d expect, paid for version remove this. All the javascript files available to customise the player can be styled, and on the paid for versions the Flash components be accessed with an API using either Javascript or Actionscript 3.0. Visit the site at If anyone knows of other good options or has experiences of FlowPlayer then please add them to the comments below. I hope this has been helpful.

By Andy Wickes