Review: Flowplayer
Posted in Boagworld Bites, Reviews on: Thursday, May 6, 2010 by Ryan Taylor
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.
Podcast: Play in new window | Download (Duration: 5:05 — 4.7MB)
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 www.flowplayer.org 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
10 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I’ve been using Flowplayer for years. It’s awesome. Also, you can use h.264 as MP4 and M4V with no problems. You don’t have to convert everything to FLV.
Oh, I’m an idiot. I just saw you mentioned the formats. Whoops.
I’ve been using FP for a couple of months, and unfortunately have had real problems with anything other than simple installs. At first glance it seems to offer the world, but I’ve run in to so many bugs during implementation that I was only today looking around for alternatives – unfortunately after having already paid for a commercial licence.
In my experience many of the features listed are inconsistent in their behaviour (even in the online demos), there are cross browser problems, and the support service wasn’t great when reporting bugs. Sorry to be Buzz Killington, but just my personal experience :-(
Well said McGinty. I have been using Flowplayer for years, and agree, anything other than a basic install, for example adding a dynamic playlist, or any of the other features they claim to provide, it is a major hassle. I too have paid for the commercial license and feel like i have been jipped. There is not enough support, there are major bugs, limited documentation. Most people on the forum are clueless, many questions, few answers.
I put flowplayer on our website (https://you.ubc.ca/ubc/vancouver/). We recruit students from international markets, so we can’t use Youtube or Vimeo to deliver video content. Unlike those popular options, our website isn’t blocked in China and other markets, so we stream the video directly.
Flowplayer is awesome :)
I really like FP’s feature set. I used it for a website which delivers over 100k video views per day and it worked great.
What’s very cool is that you can use HTML5 video for the modern browsers (and iPhone/iPad) that can handle it with a “fallback” to flash using flowplayer for other browsers. And you can share the same H.264 video. For HTML5 in firefox, you would also need to add an ogg format or let them download the H.264. Allowing a download works better for the iPhone anyway.
Flowplayer is great – although it does have some compatibility issues with older versions of Flash. Some of my employers public sector clients had a penchant for IE6/Flash9 – this ruled out using FP. That was about 3 months back though, so it may have been rectified by now. Crying shame though, given the functionality it offers
can’t wait to use this in a project.
Always good to get feedback, both negative and positive – I’ve recently set up a few simple ‘video walls’ in my DropBox account for various clients so when we have to show them video ‘work in progress’ I can name them accordingly (clientA-001.flv, clientA-002.flv for example) and then drag and drop into DropBox to upload and replace the previous file.