Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

Embed Videos With Flowplayer

For anyone developing or maintaining a website, embedding videos used to always be an issue. That was until YouTube became the undisputed leader for sharing videos, and embedding them in websites. Normally, using a free service with a recognizable appearance and a visible watermark, like YouTube, is unprofessional. However, YouTube has become so popular, that even the large corporations and professional entities display their clips using it.

Embedding with YouTube is easy, but limited

YouTube is easy but limited

The reasons to YouTube’s success as a “video distributer” are due to the simplicity of the process, the familiarity with it by the regular users, and the relative flexibility in terms of size and appearance. Anyone can simply create a free YouTube account, upload a video, customize the interface by choosing the border color and display size, and then embed it into any website using the generated code. Seems like the ideal solution.

However, there are a number of disadvantages to the YouTube way of life:

  1. The video is on Google’s server, and not yours: Even if their servers are rarely down, it’s always comforting to be in possession of your own content
  2. Customization is limited: You have eight colors to choose from, and no say over the appearance of the border or controls
  3. Somewhat rigid: In order to make any changes, you need to go back to YouTube, and re-copy and paste the code
  4. Watermark and standard look: Nothing’s worse than having everything look the same. With YouTube, the watermark is very visible, and all of the players are virtually identical
Flowplayer: Open Source Flash Video Player

Flowplayer: Open Source Flash Video Player

This is where Flowplayer comes to the rescue. Flowplayer is an open-source JavaScript library that allows you to embed videos in your website via a full customizable player. It is as easy as calling on the JavaScript file, inserting an <a> tag, and then indicating the properties that you want to define. This basically means that instead of uploading a video to YouTube and embedding the player, you can upload the .flv to your web server and the markup will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<!-- flowplayer scripts should be loaded from your servers NOT from static.flowplayer.org  -->
<script type="text/javascript" src="/js/flowplayer-3.1.2.min.js"></script>
</head>

<!-- some styling for the standalone page. this line can (or must) be removed -->
<link rel="stylesheet" type="text/css" href="/demos/standalone.css"/>

<!-- player container-->
<a href="http://flowplayer.org/video/flowplayer-700.flv" style="display:block;width:425px;height:300px;" id="player"></a>

<!-- this script block will install Flowplayer inside previous A tag -->
<script language="JavaScript">
flowplayer("player", "/swf/flowplayer-3.1.2.swf");
</script>

You can see the result here.

Notice that you call on the JS file in the <head>, and then you use the <a> to embed the player (you can also use <div>), and finally, some JavaScript to specify any attributes that you want to use.

Some of the features include:

  • Embedding several videos in the same page without effecting performance
  • Choosing the splash image that, when clicked on, starts the video
  • Placing an image in the background, with a layer on top (ideal for a single “play” sign to be placed on any image)
  • Embedding a playlist of videos
  • A growing list of plugins to be used with the player
  • Control such details as the fade in/fade out speed, cue points, and much more

Just by open-sourcing it (there’s also a commercial version), and allowing for the community to contribute with plugins on different levels means that the sky is the limit as far as embedding videos in websites is concerned. It might take a bit of time before it catches on with the regular users (who are very rarely willing to dig into the code), but for designers and developers, it should definitely be a tool to replace old-school video incorporation.

The website is very well designed and laid out, and the documentation is quite extensive, but it does seem to lack some usability. That is why when you first visit the Flowplayer website, you become confused as to what it is exactly, and how to works. After looking deeper, however, it has become clear that it is a very powerful tool with endless possibilities.

Related posts

2 comments

Rudi Shumpert

August 25, 2009

Great Post!

I recently did some testing with Flowplayer, and you’re right, it is easy to implement. I took it another step and added some tracking capabilities using Omniture Web Analytics.

Details here: http://www.rudishumpert.com/2009/08/17/track-your-flv-video-files-with-omniture-flowplayer/

Tarek Shalaby

August 25, 2009

Thank you very much! We need more people on board with Flowplayer because I truly believe that great things can come out of it, and it might even change the way we view websites. Because if a picture is worth a thousand words, then videos are priceless.

Thanks for sharing!

Leave a reply