This is a message.

External configuration file

Reuse player configuration across your site

standalone demo

External configuration files are very useful when you have many players distributed across your site and each of them shares a similar configuration. In Flowplayer, external configuration files are normal JavaScript files that are included in the page with the standard script tag.

There are many benefits to using JavaScript-based configuration files:

  • They are dynamic. The configuration can contain JavaScript functions, events and any running code.
  • The configuration can be easily categorized and modularized. You can have sections for common clip properties, different skin configurations, events or plugin settings.
  • You can generate different content for different clients.
  • The configuration can be packed and or minified to reduce download size.
  • The file is usually cached by the browser so it is only loaded the first time user requests it.

If you are embedding the player without JavaScript by using only the OBJECT tag, you should read about external configuration for the OBJECT tag.

Configuration

In the above demo we have an external configuration file with common properties for clips and a skin configuration. This is a separate file and we have it in a file called external.config.js.

/**
 * Example external configuration file.
 * You can create multiple configuration variables to change the
 * appearance and behavior flowplayer in different parts of your site.
 */
var conf = {
 
    // default clip configuration
    clip: {
 
        autoPlay: false,
        autoBuffering: true,
        baseUrl: 'http://stream.flowplayer.org',
 
        // functions are also supported
        onBegin: function() {
 
            // make controlbar visible, fade lasts 4 seconds
            this.getControls().fadeIn(4000);
        }
 
    },
 
    plugins: {
        controls: {
            backgroundColor: '#666666',
            buttonColor: '#333333',
            opacity: 0,
            time: false,
            autoHide: false
        }
    }
}

JavaScript

Usage

The player container in HTML: 

<script src="/demos/standalone/configuration/external.config.js"></script>
<!-- player container-->
<a href="KimAronson-TwentySeconds73213.flv"    class="player"
    style="display:block;width:425px;height:300px;margin:10px auto"
    id="player">
    </a>

HTML

The $f call refers to the conf JavaScript variable that contains the configuration object. 

// The conf variable from the external configuration file is used here.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", conf);

JavaScript

Note that Flowplayer uses the base url property defined in the external configuration file as the file name prefix.