External configuration file Configuration - Demo 3 / 8
Introduction
Flowplayer allows you to use external configuration files. They 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 the external configuration for the OBJECT tag.
Example
In this example we have an external configuration file where we have setup common properties for a clip and two different skin configurations. This is a separate file and we have saved it under the name external.config.js.
/**
* Example external configuration file.
* You can freely categorize these nodes
*/
var conf = {
// default clip configuration
defaults: {
autoPlay: false,
autoBuffering: true,
baseUrl: 'http://blip.tv/file/get',
// functions are also supported
onBegin: function() {
// make controlbar visible, fade lasts 4 seconds
this.getControls().fadeIn(4000);
}
},
// my skins
skins: {
gray: {
backgroundColor: '#666666',
buttonColor: '#333333',
opacity: 0,
time: false,
autoHide: false
}
// setup additional skins here ...
}
}The settings shown above are used in this example:
Configuration
Here we use the variables defined in the external file:
<!-- external configuration (this can be minified and gzipped too) -->
<script src="external.config.js"></script>
<!-- setup player container -->
<a id="player" class="player" href="KimAronson-TwentySeconds73213.flv"></a>
<!-- our installation script uses variables defined in external.config.js -->
<script>
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// default configuration for a clip
clip: conf.defaults,
// setup controlbar to use our "gray" skin
plugins: {
controls: conf.skins.gray
}
});
</script>