Plugin Configuration

The above plugin is configured inside the plugins node as follows:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
  plugins: {
      content: {
          
          // the only required property
         url: 'flowplayer.content-3.2.8.swf',
            
          // some display properties
            height: 220,
            padding:30,
         backgroundColor: '#112233',
         opacity: 0.7,
           
          // one styling property 
          backgroundGradient: [0.1, 0.1, 1.0],
           
          // content plugin specific properties
         html: '<p>This big overlay is a content plugin</p>',
            style: {p: {fontSize: 40}}            
      }
  } 
});

This important example shows you three different types of plugin configuration properties:

1 The url is the path to the SWF plugin file and is the only required property. If you only supply a filename and not a complete path to the SWF file, Flowplayer tries to load the plugin from the same location as where the main flowplayer.swf file is located.

2 display properties define the plugin's placement, size and visibility on the player canvas. If you are interested in Flowplayer scripting you may be delighted that these properties can be animated.

3 styling properties define the styling and looks of the plugin.

It is important to note that every Flash plugin is configured in a similar manner - including the controlbar. You can load ANY SWF component inside the player this way and play with the display properties. Styling properties are not supported for random SWF files, only "official" Flowplayer plugins support those.

Display properties

Display properties define a plugin's placement, size and visibility on the player canvas. If you are familiar with CSS you will feel at home with them.

Each display property can be specified as an an absolute value or as a percentage (relative to the total player canvas size). Percentages are applied to the centre of an element, for example, top:50% applied to an element means that the element is vertically centered no matter how high the canvas is. It is good to bear in mind when specifying dimensions that Flowplayer has a fullscreen mode and, when this is activated, the overall dimensions of a particular plugin will be larger.

Note that the above properties can be animated with the aid of animate method in the scripting API. This is one of the beauties of Flowplayer. Display properties can be changed at runtime in an animated manner, thus giving your users a richer movie experience. You can, for example, animate the video screen into the top left-hand corner, while at the same time revealing other plugins on the right-hand side of the screen - just like YouTube does when you click their menu button. Flowplayer goes much further though. It gives you the flexibility to perform arbitrary animations to any or all plugins inside the player. You can also load plugins on-the-fly during playback.

The following display properties can be set in the configuration but cannot be animated. In addition, they can be both set and changed at runtime by means of the Plugin's css() method.

Styling properties

Styling properties are shared amongst those elements and plugins that are styleable. Currently the controlbar and content plugins, along with the player canvas, are styleable.

All plugins have zero or more plugin-specific configuration variables. These can be set to strings, numbers, objects or even functions. They are defined in the same manner as other plugin properties. In our example above, the content plugin was configured with three plugin-specific configuration variables: style, html and onMouseOver. All of these custom variables are documented in the content plugin documentation.

Controlbar

The controlbar is the only plugin that is loaded automatically without the need to explicitly define it. The following configuration is set by default:

plugins: {
    controls: {
        url: 'flowplayer.controls-3.2.15.swf'
    }
}

Here is a full list of controlbar parameters along with their default values. You can customize these properties as little or as much as required:

plugins: {
    controls: {
        url: 'flowplayer.controls-3.2.15.swf',
 
        // display properties
        bottom:0,
        height:24,
        zIndex:1,
        backgroundColor: '#2d3e46',
        backgroundGradient: 'low',
 
        // controlbar-specific configuration
        fontColor: '#ffffff'
        timeFontColor: '#333333',
        autoHide: 'never',
 
        // which buttons are visible and which are not?
        play:true,
        volume:true,
        mute:true,
        time:true,
        stop:false,
        playlist:false,
        fullscreen:true,
 
        // scrubber is a well-known nickname for the timeline/playhead
        // combination
        scrubber: true
 
        // you can also use the "all" flag to disable/enable all controls
    }
}

You can find more information about the controlbar in the controlbar documentation. If you want to disable the controlbar to avoid repeated downloads you can include the following in your configuration specification:

plugins: {
    controls: null
}

Since the controlbar is implemented as a plugin, it would be possible to implement a radically different controlbar of your own and then use that instead of the default implementation.

You could also experiment with using two controlbars at the same time. The first might appear as a play/pause button in one of the top corners, whilst the second could be positioned along the bottom, showing the scrubber and fullscreen button. Both of these controlbars could be individually sized and styled.