• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)

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

January 29, 2010 by Lorensius Londa 15 Comments

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
Flowplayer

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

Download Example Source Code
Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. How to Overlay Video Using JQuery Tools and Flowplayer
  2. How to Create Scrollable Image Slider Using JavaScript
  3. Samsung I5700 Galaxy Spica Android 2.1 Flashing Guide
  4. Prototype: Using Ajax.Updater to Update Browser’s DOM Element

Filed Under: Featured Articles, Information Technology, Java Script, Programming Tagged With: flash video player, flowplayer, flowplayer guides, flowplayer howto, flowplayer tutorial, javascript, swf, web video player

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. Plotkiwa says

    May 16, 2010 at 4:23 am

    Is there a way to build flowplayer from scratch?

    Reply
  2. Christelle Sneider says

    August 29, 2010 at 10:14 am

    Thank you for the infortmative lines and interesting subject.Good work.
    regards,
    Christelle

    Reply
  3. Pragam Srivastava says

    November 3, 2011 at 2:18 pm

    This site is really good, and their scripts is great………….

    Reply
  4. Dawn says

    November 4, 2011 at 2:43 am

    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.

    Reply
    • Dawn says

      November 4, 2011 at 6:35 pm

      Sorted it – wrong type of mp4 file ie mpeg 4 only does flv and H.264.

      Reply
  5. christine mendoza nude says

    November 27, 2011 at 10:16 pm

    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.

    Reply
  6. Ron says

    April 6, 2012 at 9:39 pm

    would you tell me how to set this up in wordpress?

    Reply
  7. Imml says

    April 22, 2012 at 1:49 am

    @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/

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in