This is a message.

Plugin

A Plugin object represents a Flash plugin inside the Player. Plugins extend the functionality of Flowplayer. This is an important feature of Flowplayer. We have several standard plugins available, or you can write your own one. Each plugin can have own properties and own methods. Those are documented with the plugin. See the plugin section for details of each plugin. This section describes the methods and properties available to load and manage plugins.

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.

You can obtain a handle to a plugin via the getPlugin() method of the Player object. You can use that handle to call any of the general Flowplayer methods for plugins, and you can use that handle to call any of the plugin’s specific methods or access its properties, for example:

// call a method of a plugin
$f().getPlugin("controls").enable(true);
 
// let flowplayer animate the screen plugin
$f().getScreen().animate({width:'80%'});

JavaScript

In this section:

Plugin properties

There are two kinds of properties for plugins: display properties and styling properties. Display properties are shared by all plugins inside Flowplayer. Styling properties are valid only for plugins that are "styleable". Styling properties can only be set in the initial configuration.

Display properties

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.

Plugin Methods

MethodReturnsDescription

animate(properties,[speed],[callback])

Plugin

animate() lets you change a plugin's position, size and opacity in an animated way. This can give very cool effects on your web page. properties are the plugin's placement, size and opacity properties that you want to animate, specified for example as a json object. A full list of these properties is given here. You can also do relative animations by prepending a "+=" or "-=" to the property value to animate relative to the property's current value. Plugin implementations may override this method so that they can include their own properties that can be animated together with standard style properties. speed (optional) specifies the total duration of the animation, in milliseconds. The default is 500 ms. callback (optional) is a function that will be called when the animation has finished. The function's this variable references the current Plugin instance. The properties of the returned Plugin generally do not yet reflect the modified style properties because animation can take time. However, the callback function will see the modified properties.

// make screen a little smaller
$f().getScreen().animate({width:'80%'})

JavaScript

css(properties)

Plugin

Changes the plugin's style and other properties immediately without animation. Changes occur immediately and the returned Plugin has the modified properties. properties specify the plugin's placement, size and opacity, specified for example as a json object. A full list of these properties is given here. Plugin implementations may override this method so that they can include their own properties that can be animated together with standard style properties.

// change controlbar background color
$f().getControls().css({backgroundColor:'#cccccc'});

JavaScript

fadeIn([speed], [callback])

Plugin

Makes the plugin visible in an animated way by adjusting its opacity from the initial opacity to 100%. In typical scenarios the initial opacity is 0. This call will also set the plugin's display property to "block", making it visible if it was hidden. speed (optional) specifies the duration of the animation, in milliseconds. The default is 500 milliseconds. callback (optional) is a function that will be called when the animation has finished. The function's this variable references the current Plugin instance.

fadeOut([speed], [callback])

Plugin

Hides the plugin in an animated manner by adjusting its opacity from the initial opacity to 0%. This call will also set the plugin's display property to "none", removing it completely from the canvas. speed (optional) specifies the duration of the animation, in milliseconds. The default is 500 milliseconds. callback (optional) is a function that will be called when the animation has finished. The function's this variable references the current Plugin instance.

fadeTo(opacity, [speed], [callback])

Plugin

Makes the plugin hidden in an animated manner by adjusting its opacity from the initial opacity to the given opacity. opacity specifies the end opacity of the animation (0 - 100). speed (optional) specifies the duration of the animation, in milliseconds. The default is 500 milliseconds. callback (optional) is a function that will be called when the animation has finished. The function's this variable references the current Plugin instance.

getName()

string

Returns the name of this plugin.

getPlayer()

Player

Returns the enclosing player instance that this plugin is contained in.

hide()

Plugin

Immediately hides the plugin and removes it from the canvas. This is the same as setting the display property to "none". This does not affect the plugin's opacity setting.

show()

Plugin

Makes the plugin immediately visible. This does not affect the plugin's opacity setting. This is the same as setting the display property to "block".

toggle()

Plugin

Toggles between the hidden and visible state.

[plugin methods]

*

Zero or more plugin specific methods that are registered during plugin registration. You may supply function arguments as well which are invoked upon method completion.