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.
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:
- 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
- Customization is limited: You have eight colors to choose from, and no say over the appearance of the border or controls
- Somewhat rigid: In order to make any changes, you need to go back to YouTube, and re-copy and paste the code
- 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
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.
