Flowplayer installation

This page helps you to put Flowplayer up and running. You may want to download Flowplayer before reading these instructions because the downloaded zip file contains a working example (html/example.html) that follows these instructions.

Quick Start

Every time you insert Flash objects into your pages you'll need some help from JavaScript to make it happen smoothly on different browsers.

Flashembed is a general purpose Flash embedding script developed by folks here at Flowplayer. It is the easiest tool to insert Flash on your pages in cases where you have to supply complex JSON configurations to your Flash object. All examples in this site use this tool.

If you really have to use SWFObject go here.

Example setup

<!-- include flashembed -->
<script type="text/javascript" src="flashembed.js"></script>

<script>
/*
 * window.onload event occurs after all HTML elements have been loaded
 * this is a good place to setup your Flash elements
 */
window.onload = function() {  
   
    /*
     * flashembed places Flowplayer into HTML element 
     * whose id="example" (see below this script tag)
     */
    flashembed("example", 
   
      /*
       * second argument supplies standard Flash parameters.
       * basically these are all you want to modify
       * but you can see full list here
       */
      {
         src:'FlowPlayerLight.swf',
         width:400,  
         height:300,
         bgcolor:'#ffffff'
      },
		
      /*
       * third argument is Flowplayer specific configuration
       * full list of options is given here
       */
      {config: {   
         videoFile: 'example.flv',
         initialScale: 'scale', 
         useNativeFullScreen: true
			
         // supply more options here by separating them with commas
      }} 
   );
}
</script>

<!-- this DIV is where your Flowplayer will be placed. it can be anywhere -->
<div id="example"></div>

That's it. Just make sure that your file paths are correct. This will play example.flv video file using FlowPlayerLight.swf as the player.

For experienced JavaScript users we recommend you to study various possibilities that flashembed.js script offers such as handling browsers that do not support Flash.

Setup with swfobject.js

SWFObject is very common library for inserting Flash on web pages. It is used very much an you may even have it already. Consider reading this document for more detailed information about using this library. Here are the steps.

1. Include swfobject.js JavaScript into your page

You can download latest version of the js file here.

  <script type="text/javascript" src="swfobject.js"></script>

2. Insert a placeholder for your video.

An unique ID must be supplied for the element.

  <div id="playerContainer"></div>

3. Write JavaScript that places your video into that placeholder

  var fo = new SWFObject(
    "FlowPlayerLight.swf", "FlowPlayer", "400", "250", "9", "#fff", true
  );
  fo.addVariable("config", "{videoFile: 'honda.flv'}");
  fo.write("playerContainer");

This script must be placed after the placeholder or it must be evaluated after the page loads.