Flash plugin: Controlbar The most important Flowplayer plugin

Set me on fire!

Download (Version 3.1.5)

Features

You can alternatively use our HTML-based controlbar that can be customized with normal web skills and graphics.

In this section:

• Controlbar configuration
• Standard properties and methods
• Coloring
• Controlling the scrubber and volume bar heights
• Visibility and Buttons
• Scripting
• Tooltips

Controlbar configuration

The controlbar plugin is the only plugin that is automatically loaded without an explicit configuration. By default it is loaded from the same directory where the flowplayer.swf file is located.

The url property is a path to the controlbar file. If you do not supply this property, the player attempts to load a file named flowplayer.controls-3.1.5.swf from the same location where the player was loaded from. If you want to use an alternative controlbar such as flowplayer.controls-tube-3.1.5.swf, then this property must be specified. Here is a demo about changing the skin of the controlbar.

Flowplayer internally uses the default plugin name 'controls' for the controlbar if you do not specify another name for it in the configuration. If you do not supply the url for the plugin, or if you disable the controlbar althogether in the configuration with controls:null, then you must use this name.

Here is an example configuration which will place the controlbar at the top of the player, showing only the play/pause button and scrubber (the timeline):

// The controlbar plugin is loaded by specifying it in the plugins section of the configuration.
plugins: {

	// The controlbar is called "controls". By tweaking this, you can modify its look and feel
	controls: {

		// location of the controlbar plugin
		url: 'flowplayer.controls-3.1.5.swf',

		// display properties such as size, location and opacity
		top: 20,
		left: 20,
		bottom: 0,
		opacity: 0.95,

		// styling properties (will be applied to all plugins)
		background: '#114455 url(/my/custom/controls.png) no-repeat 3px 6px',
		backgroundGradient: 'low',

		// controlbar specific settings
		timeColor: '#980118',
		all: false,
		play: true,
		scrubber: true,

		// tooltips (since 3.1)
		tooltips: {
			buttons: true,
			fullscreen: 'Enter fullscreen mode'
		}
	}
}

No controlbar

You can set the controlbar to null and it will not be downloaded at all. This is how you do it:

plugins {
	controls: null
}

Standard properties and methods

The controlbar plugin is diplayable and stylable and consequently has the standard display properties and styling properties that can be used to tweak the look and feel of the controlbar to your needs.

As with all visible plugins, you can use the standard animate and css methods. See the example under Scripting at the end of this page.

You can find more information about these and other standard Plugin properties and methods under the JavaScript API documentation.

The remainder of this page describes the custom properties of the controlbar plugin.

Coloring properties

Colors are specified as a string starting with a '#' sign and followed by six hexadecimal digits (0-9, A-F or a-f). Each two hexadecimal digits specify one color, in the order of Red, Blue, Green (RGB). The higher the value, the more of the color will be mixed in. So '#01DAFF' means "a little red, some blue and all of green".

Specifying gradients

Many of the elements have a gradient setting. It specifies how the background is faded in and out vertically. You can specify the gradient with the predefined values "none", "low", "medium" or "high".

You can also supply an array of values, with each value representing how much transparency is supplied at any given vertical position. For example, array [0.2, 1.0] means that the background will be 80% visible at the top edge and 0% visible at the bottom edge and there will be a linear gradient of transparency between these two edges. You can supply any number of gradient points in your array and they will all be placed so that there is equal distance between each point. For example, array [0.4, 0.6, 1.0] will place points at the top, center and bottom of the gradient, respectively.

Controlling the scrubber and volume bar heights

Ratios are values between 0.0 (none) and 1.0 (full).

Visibility properties and Buttons

These properties determine the visibility of controlbar elements and buttons.

Scripting

The controlbar plugin has the following custom methods that can be used at runtime:

These methods return the controlbar plugin instance so these methods can be "chained". For example:

// disable all but the play button and hide the fullscreen button
$f().getControls().enable({all: false, play: true}).widgets({fullscreen: false})

As with all visible plugins, you can use the standard animate and css methods. Here are some examples:

// first get access to the plugin using the getPlugin call
var plugin = $f().getPlugin("controls");

// or you can use the getControlbar shortcut
plugin = $f().getControls();

// after that you can use the animate() method that is common to all plugins
plugin.animate({top:30, width:'40%'});

// by using the css() method you can also dynamically tweak the styling properties
plugin.css("backgroundColor", "#123456");
plugin.css("backgroundGradient", [0.9, 0.3]);

// or you can set multiple properties at once
plugin.css({
	sliderColor:'#ff1207',
	sliderGradient:'high',
	borderRadius:10,
	backgroundImage:'url(/img/pattern.jpg)'
});

Notice that the controlbar plugin truly supports background images which is a very powerful method of customizing its appearance.

Events

Tooltips

Tooltips were introduced in controlbar version 3.1. By default a tooltip is shown over the scrubber and volume control, but this behaviour can be changed with the tooltips configuration. Here is an example:

controls: {
	height: 30,

	// background color for tooltips
	tooltipColor: '#456',

	// which tooltips are shown and which are not?
	tooltips:  {
		// a shortcut for enabling tooltips for buttons (English)
		buttons: true,

		// customize the pause button text
		pause: 'Continue playing',

		// disable tooltips for the volume control
		volume: null
	}
}

tooltips is an object of the controlbar plugin object. Except for color properties, which apply to all tooltips, the tooltip configuration properties come under the tooltips object. This object defines which elements have their tooltip enabled and what the tooltip says. Here is a full list of configuration options for the tooltips object:

Tooltip styling

The following properties affect the style of the tooltip. These are defined for all tooltips of the controlbar under the configuration root and can not be overridden for individual tooltips under the tooltips object.

No tooltips

You can disable tooltips altogether by setting tooltips to null as follows:

controls: {
	...
	tooltips: null
}

Download

Get the latest version of the Flowplayer controlbar plugin. It is compatible with all 3.0+ releases.

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.