What is FlowPlayer?

FlowPlayer is an open source video player for the web. It is a way for you to stream videos in your pages, from your own server. Thus, eliminating the need for external video serving services such as YouTube. FlowPlayer is highly extensible and customizable. Though it may take a little more than a few clicks – the benefits far outweigh the work needed to get it running. Consider these pros and cons:

Pros:

No Links to External Sites – As I’ve mentioned, this alone is enough reason to use FlowPlayer. Your visitors cannot escape your website when video is live. They stay in your site during playback and when clicked. In addition, you can configure your player to use custom events (see below)
CSS Skinning and Branding – You can totally change the appearance of Flowplayer. This includes player controls, backgrounds and logo (custom logo is supported in the “Commercial” version). Best of all – skinning FlowPlayer follows strict web standards using simple HTML and CSS. Check out this demo using a billboard sign as the background of the player: http://flowplayer.org/demos/skinning/container-background.html.

Set your own Splash Image – one of the annoying things about Youtube is it automatically selects the splash image for you. With Flowplayer you can select a high quality image as the splash state – before the actual player loads.
You can add your own Events – configure your player to do more than just playback videos. Examples can be adding captions during playback, extracting clip information as well as chaining video clips to play one after the other. See some examples of events here.
Extend with Plugins – Plugins are already made functionalities that other developers have created and made available for you to download. Examples of kick ass plugins are Flash Content, Javascript Embed and Streaming Slow Motion.

Cons:

Need some HTML experience – you will need to touch the source code of your pages to use. For advanced functionality – scripting technologies such as javascript and flash is also required
You need to convert the videos locally first before uploading – at the time of writing, FlowPlayer supports FLV, H.264 and MP4. You will need to convert your video to the said formats before uploading. Check this article for good information on Flash Video Conversion: http://worldtv.com/blog/guides_tutorials/flv_converter.php
Bandwidth – Since videos are served locally you may see an increase in bandwidth usage.

How to use FlowPlayer

What I really liked about FlowPlayer is their extensive documentation. It includes walkthroughs for beginners, as well as in depth instructions for the expert programmers. To start using FlowPlayer – all you need is to do the following:
1) Download the FlowPlayer Files – This download includes the actual FlowPlayer .swf files as well as the .js file to get you started. It also includes an HTML page that demonstrate the basic installation of FlowPlayer.
2) Include the flowplayer.js in your HTML:

3) Setup the player container – Simply add an anchor tag with 3 important attributes: a) href – the pointer to the video file, b) style: determines the size and basic display properties of the player and c) id: very important – this acts as a selector for the javascript to target to load the player.

4) Install Flowplayer – The final code tells FlowPlayer to install in our anchor tag:

FlowPlayer and WordPress:

Oh yes – you can actually embed Flowplayer inside your posts. The beauty of it is – there are actually several Flowplayer plugins already available for WordPress. Though I’m just going to cover the two most popular:
FV WordPress Flowplayer – developed by Foliovision, is a straight forward FlowPlayer plugin made exceptionally easy. All you need is to install, upload your video and add the plugin shortcode to your posts. Note that this is the plugin I’m using for my video demo above. The screenshot below shows the plugin options page:

Flowplayer for WordPress – created by David Busby of Saiweb, this plugin also includes player customization features as well as commercial license key input for advanced settings:

Embed FlowPlayer in your Theme:

If you’re like me, you may come across a website project that requires videos hosted in their own server. Of course WordPress and FlowPlayer is a good combination. What about if the requirements for the player are so extensive that may not be achieved with any sort of plugin? This is when you’d want to embed FlowPlayer in your theme.
The process is pretty much the same as the basic FlowPlayer installation. The only difference is we’re using custom fields for the href attribute of our player. In your theme folder, edit single.php and include this code inside the loop:

This sets up a default player for each post, wrapped in an “if” block. This way you customize the page to your client’s extensive requirements. A screenshot of my page mockup is shown below:

Don’t forget the call to install FlowPlayer:

Now all you need to do is upload the movie using the default WordPress media uploader, and plug in the url in a custom field set to “movie”

Conclusion

If you haven’t already noticed – almost every aspect of FlowPlayer can be customized. Having this much control over video content is invaluable and cannot compare to services like YouTube. Best of all, the basic version is free under the GPL license which you can use for personal or commercial purposes. Note that there are also paid versions that determine the amount of branding you can as well as legal domain usage. Head on over to FlowPlayer’s website for more information.

The post Embed Videos in your Web Pages with Flowplayer! appeared first on Michael Soriano.