So what the heck is Flowplayer? Well if you ask Wikipedia it sounds like just another dang Flash player:
“Flowplayer is a video player for the World Wide Web. It allows users to embed video streams on their personal web pages. It is an open source project with a GPL 3+ license. Commercial versions are also available. Commercial versions allow users to add their own logos. It can play flash video.”
But let me tell you, it is so much more:
I don’t think I’ve ever been giddy over a video player until I meant my new crush, Flow. On top of being awesome (which I’ll get into in just a sec) it is an open source project with a GPL 3 license. They also offer a few flavors of a commercial license that let you fully brand the player, and of course, support them with some cash.
Flowplayer’s real power comes in it’s advanced scripting options, their API is object-oriented and not just a flat list of functions. They have what is known as an event model, allowing you to link custom functionality to every player event (such as play, pause, rewind, stop). And if you are a jQuery user you will be delighted by the seamless way in which Flowplayer and jQuery work together.
On top of the incredible power that JavaScript and jQuery give you, they also have built in plugin support to Flowplayer. Some already-existing plugins allow you to, for example, place HTML content over the video when the playback ends, or implement custom playlists using only basic HTML skills, detect the viewers available bandwidth and dynamically select the best bit-rate for them. If you really want to go crazy, you can build (or use their free examples) all of the player’s controls out of HTML.
How am I using Flowplayer:
LIKE A PRO, that’s how! My day job wants to start creating tech help videos for our clients, and the general Internet audience. We kicked around the idea of hosting the flash version of our videos on YouTube, but we are worried that people leaving comments might scare our audience away (these are not computer savvy types), I am a big fan of blip.tv and started going that route with our videos. But in the end I realized that for a commercial company we need to have more control and flexibility… I realized I was going to have to roll my own solution.
My solution (note: files are hosted on Amazon S3):
1. On initial page load, instead of loading the resource heavy flash player and flash, it loads a place holder image with a play button. This means our pages load FAST, and peeps with slower PC’s don’t take a performance hit on our page (a very common problem on Jupiter Broadcasting with all the flash videos).
2. Using my mad skills, I got the Flowplayer plugin working that detects your bandwidth, and sends you one of three versions of the video, most appropriate for your connection speed. So we won’t be slamming client’s networks with our videos if they can’t handle them.
3. Using Flowplayer’s ability to accept JavaScript commands, I have setup a central config file that all the players on our site will read from. So we can change all the players color themes, size, streaming properties, you name it, in one single config, and all the players will update. Even years down the road, with a huge video archive, they will all update. That? That’s called EPIC. HUGE. EPIC.
4. That central config also means we can change out the pre and post roll ads, or even just turn them all on at any point.. So again, all flash videos on our site will always be able to feature our latest promos. Or if we want, we can override and setup a on-off video that has it’s own config outside the global config.. So a promo ad just for a certain video, or certain color scheme, etc.
5. Google Analytics integrated into the player. YUP. Those handy action aware contexts in Flowplayer really pay off here. It knows when someone hits play, pause, fast forward, volume up/down, etc (still kinda basic, just getting going with this)… Leveraging Google Analytics, I’m be able to track at what point someone tunes out of the video, or fast forwards, or heck, even rewinds so we know when we needed to make something more clear.
Want to know more?
I’m still new to all of this, so I am probably not the best resource, but here are a few good ones:
- Flowplayer’s fantastic documentation with real work examples.
- Flowplayer also has a active user forum.
- They are also rockin a Flowplayer twitter account which they are very active on.
If you’d like to ask me a question about the stuff I’ve done, send me a tweet and I’d be happy to try my best to answer!