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.
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%'});
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 / type | default | description |
|---|---|---|
| bottom string |
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 |
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 |
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 |
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 |
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 |
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 |
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 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 / type | default | description |
|---|---|---|
| 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 integer |
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
| Method | Returns | Description |
|---|---|---|
|
animate(properties,[speed],[callback]) |
Plugin |
// make screen a little smaller |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
show() |
Plugin |
Makes the plugin immediately visible. This does not affect the plugin's opacity setting. This is the same as setting the |
|
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. |