This is a message.

Plugins

Here we have a real plugin called “content” which is used to show HTML content inside the player area.

There are three kind of plugins in Flowplayer:

1 Flash plugins are placed inside the player such as the controlbar. This configuration section focuses on these plugins.

2 JavaScript plugins are placed outside the player. Take a look at our playlist plugin for an example of how these work.

3 Streaming plugins are not visible and they are used to stream video data from different sources. Take a look at the next section for more information.

Plugins play a crucial role in Flowplayer - more or less everything is a plugin. The controlbar is implemented as a plugin and even the main video screen is internally implemented as a plugin.

In our plugins section you will find various useful plugins which you can download and add to a basic Flowplayer installation. You can also implement your own plugins as well.

Plugin Configuration

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

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
content: {

// the only required property
url: 'flowplayer.content-3.2.9.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}}
}
}
});

JavaScript

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. Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

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.

Property / DatatypeDefaultDescription

bottom
string/number

Specifies the position at which the plugin should be placed as the distance from the bottom edge of the layer. Overridden by the top property.

height
string/number

100%

The height of the plugin. If this value is not supplied, the height is scalable, and the plugin will use all available vertical space in both normal and fullscreen mode.

left
string/number

0

Specifies the position at which the plugin should be placed as the distance from the left-hand edge of the layer. Overrides the right property.

opacity
decimal/string

1.0

Specifies the initial transparency of the plugin. Accepts a decimal value between 0.0 (invisible) and 1.0 (no transparency), or a percentage from 0% to 100%.

right
string/number

Specifies the position at which the plugin should be placed as the distance from the right-hand edge of the layer. Overridden by the left property.

top
string/number

0

Specifies the position at which the plugin should be placed as the distance from the top edge of the layer. Overrides the bottom property if it is supplied simultaneously.

width
string/number

100%

The width of the plugin. If this value is not supplied, the width is scalable, and the plugin will use all available horizontal space in both normal and fullscreen mode.

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.

Property / DatatypeDefaultDescription

display
string

block

This property should have the value block if the plugin is to be shown or none if it is not. The default is block.

zIndex
number

Where there are many, potentially overlapping elements on the canvas, this property specifies the order in which they are rendered. Elements with higher numbers appear above those with lower numbers.

By default this property is 0 for the video screen, while plugins are assigned an index according to the order in which they are configured. (The first plugin has an index of 1, the second an index of 2, and so on.) This means that all plugins are placed over the video screen by default. If you want to alter their order you can manually specify indexes using this parameter. It is therefore possible to add plugins to the canvas below the video screen, and for them to be shown only when the video screen is resized or moved out of the way.

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.

backgroundColor

Background color is specified as a hexadecimal value, for example, backgroundColor: #ffcccc. The length of the value is 6 alpha-numerical characters (0-9 and A-F) and the prefix # is optional. Since 3.2, you can use the rgba syntax : "1px solid rgba(220, 220, 220, 0.8)".

backgroundImage

The absolute or relative path to the image that should be used as the background for this plugin. Supported formats are GIF, JPEG, PNG and even SWF (Flash components). The syntax is similar to CSS in that you must enclose your path inside a url() wrapper such as: backgroundImage: url(my/path/to/image.jpg).

backgroundRepeat

Possible values are "no-repeat" or "repeat". The default is "repeat", which causes the background image to repeat both horizontally and vertically over the available canvas. Using "no-repeat" displays the background image only once from the top left-hand corner.

background

A shorthand way of setting all background properties at once, similar to the CSS property of the same name. The format is as follows: backgroundImage backgroundRepeat left top. For example: url(/my/image.jpg) no-repeat 100 30. The last two numbers specify the background image positioning.

backgroundGradient

Defines a plugin's background gradient, i.e. the way the background is faded in and out vertically. The value can be one of the predefined values "low", "medium" or "high", or you can supply an array of values, each one representing how much transparency is applied at a particular point. For example, the array [0.2, 1.0] means that the background will be 80% visible at the top edge and 0% visible at the bottom, and there will be a linear gradient of transparency between the two edges. You can supply any number of point definitions in your array and they will be placed so that there is equal distance between them. For example, passing the array [0.4, 0.6, 1.0] will result in a gradient with three distinct amounts of transparency at the top, middle and bottom of the background.

border

Draws a border around a plugin's edges. The syntax follows the CSS standard: width style color. For example: "1px solid #cccccc". The only supported style currently is "solid", but the width and colour can be set to any valid value.

Since 3.2, you can specify an alpha using the syntax "1px solid rgba(220, 220, 220, 0.8)"

borderRadius

Specifies the amount of rounding for each corner. Larger values mean more rounding.

display

If you want your plugin to hidden at load, set this property to "none".

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.16.swf'
}
}

JavaScript

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.16.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
}
}

JavaScript

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
}

JavaScript

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.