Flowplayer is a free video player for the web that is used to embed video streamson a web page. Flowplayer is highly skinnable and extendable. You can customize it’s look and feel and also extend it’s functionality using available plugins. If you are an expert in JavaScript or ActionScript programming, you can even create your own plugins according to your needs. There are two types of Flowplayer’s plugin, the JavaScript plugin that works outside the player and Flash plugin that works inside the player.

Flowplayer is released in two versions:
- Open source (free) version (released under the GPL license). In this version, the Flowplayer branding (logo) is always visible on the player, you can’t remove the logo.
- Commercial version. In this version you can remove the Flowplayer logo and place your own logo on the video.
Current version of the time of this writting is version 3.1.5 which can be downloaded here.
Browser Compatibility
Flowplayer API and JavaScript plugins are dependent on JavaScript 1.5 which is supported by following browsers:
- Internet Explorer 6.0+
- Firefox FF 2+
- Safari 2.0+
- Opera 2.0+
Supported Flash Player: 9.0+
Supported video formats
Currently Flowplayer support three video formats:
- Flv
- H.264
- Mp4
Using Flowplayer
Download and install Flowplayer
- Download the free version of Flowplayer (flowplayer-3.5.1.zip (161.2 kB))
- Extract and copy flowplayer-3.1.5.swf and flowplayer-3.1.4.min.js into your web application directory
- Include the flowplayer-3.1.4.min.js in the HEAD section of your HTML file
<script src="scripts/flowplayer-3.1.4-min.js" type="text/javascript"></script>
Setup Video Container
To use Flowplayer, you have to setup a HTML element as a video container on your page. The element can be any HTML tag, but the most commonly used tags are anchor (A) and DIV.
<a href="videos/video01.flv" style="display:block;width="400px"; height="300px" id="player">
Install Flowplayer
<script language="javascript> flowplayer("player", "swf/flowplayer-3.1.5.swf"); </script>
To install Flowplayer, we call the JavaSript function ‘flowplayer‘ that has two arguments. The first argument ‘player‘ is the id of HTML element that used as video container and the second argument is the path to Flowplayer (swf file).
Syntax:
flowplayer(‘elemntId’, ‘pathtoswf”, config)
where:
elementId is the id of video container
pathtoswf is the path to Flowplayer
config is player configuration
more information about ‘flowplayer’ function can be read here
Examples
1. Single Player
<a href="video/video01.flv" style="display:block; width:400px; height:300px;" id="player"> <script language='javascript'> flowplayer("player", "swf/flowplayer-3.1.5.swf"); </script>
2. Multiple Player
<a class="player" href="video/video01.flv" style="display:block; width:400px; height:300px"> <a class="player" href="video/video02.flv" style="display:block; width:400px; height:300px"> <script language="javascript"> flowplayer("a.player", "swf/flowplayer-3.1.5.swf"); <script>
On the example above, we use two video player on the same page, each A tag is assigned ‘player’ CSS class name, which is defined in CSS section below. The first argument of ‘flowplayer’ function is ‘a.player’ that takes format tagName.className which means that all A tagsthat have ‘player‘ class name will be used as video container.
.player { display:block; width: 400px; height: 300px; float: left; margin-left: 10px; }
3. Using Splash Image
Splash image can be used as a preview of video content and also allow us to setup the Flowplayer instance so it is not activated until the user clicks on the image.
<a href="video/video01.flv" style="display:block;width:400px;height:300px" id="player"> <img src="images/splash_01.jpg" alt="PMDG MD11 Cockpit"> </a> <script language="javascript"> flowplayer("player", "swf/flowplayer-3.1.5.swf"); </script>
4. Using Clips
Clips represent movies to play in Flowplayer. Clips can also be provided as a Playlist with a series of clips that will be played in sequence. Clip and Playlist are objects of Player.
<div style="display:block; width:400px; height:300px" id="player"></div> <script language="javascript"> flowplayer("player", "swf/flowplayer-3.1.5.swf", { clip: { url: 'video/video01.flv', autoPlay: false } }); </script>
On the example above, we use DIV tag as video container. By using DIV, we can’t define the video url using href like in our previous examples that using A tag. The video url is defined within Clip object and we also set the autoPlay to false that indicating the player should not start playback immediately upon loading.







Is there a way to build flowplayer from scratch?
Thank you for the infortmative lines and interesting subject.Good work.
regards,
Christelle
This site is really good, and their scripts is great………….
I’m trying to use flowplayer and it is working but I’m only getting the sound and not the picture. Any suggestions on what might be the problem?
The video is a mp4 file.
Sorted it – wrong type of mp4 file ie mpeg 4 only does flv and H.264.
I have been trying to use flowplayer to add videos to my site however i am not having much luck. I went my all the tutotials but it is still not working. I added all necessary code and javascript to my server and to my webpage but still all I get is a frame where it just spins but the videos do not show.
would you tell me how to set this up in wordpress?
@ron there is a wp plugin for flowplayer, on your plugins page just search for flowplayer, its called FV WordPress Flowplayer. or just go here http://wordpress.org/extend/plugins/fv-wordpress-flowplayer/