How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)

Home » Featured Articles » How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)

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>

View live demo

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;
}

View live demo

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>

View live demo

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.

View live demo

Related post:

• How to Overlay Video Using JQuery Tools and Flowplayer (8)
• How to Create Scrollable Image Slider Using JavaScript (17)
• Free JavaScript Calendar Using Dynarch Calendar (2)
• How to Crop Image Using JavaScript and PHP (22)
• How to Create Image Overlay Using Javascript (8)