Embed Videos in your Web Pages with Flowplayer!

Normally when you want to add videos into your web pages – automatically you think of Youtube. All you need is a Youtube account, upload your video, embed the code and your ready to go! But what if you want to do something more? Something like changing how the player looks, maybe add a different splash image, take out that annoying “Youtube” logo, and more importantly – take out that link toYoutube.com. Now there is a better alternative. Enter Flowplayer.

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:

Cons:

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:

<script src="path/to/the/flowplayer-3.1.4.min.js"></script>

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.

1
2
3
4
5

<a  
    href="http://www.mywebsite.com/myVideo.flv"  
    style="display:block;width:425px;height:300px;"  
    id="player"> 
</a>

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

<script language="JavaScript"> 
flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); 
</script>

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:

1
2
3
4
5
6

<?php if (get_post_meta($post->ID, 'movie', true)){?>
<a href="<?php echo get_post_meta($post->ID, 'movie', $single = true); ?>"  
			 style="display:block;width:590px;height:278px"  
			 id="player"> 
</a>
<?php }?>

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:

1
2
3

<script>
flowplayer("player", "<?php bloginfo('template_directory'); ?>/flow-player-files/flowplayer-3.1.5.swf");
</script>

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.