Flash plugin: Controlbar The most important Flowplayer plugin

Set me on fire!

Download (Version 3.2.2)

Features

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

Table Of Contents:

• Controlbar configuration
• Standard properties and methods
• Coloring
• Controlling the scrubber and volume borders
• Controlling the scrubber and volume bar heights
• Controlling the time view
• Controlling the hiding behavior
• 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.2.2.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.2.2.swf or flowplayer.controls-modern-3.2.2.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.2.2.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".

Since 3.2, you can also use the CSS-style rgb(RValue, GValue, BValue) and rgba(RValue, GValue, BValue, alphaValue) : rgba(220,220,220,0.7) for a light gray with a 0.7 transparency.

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, volume and time display borders

Since 3.2, you can specify a border for the scrubber and volume sliders and also for the time/duration display. This is done using a CSS-style format where you can set the width and the color of the borders : 1px solid #000000 for a black border, 2px solid rgba(255, 255, 255, 0.5) for a white border with transparency, none for no borders.

Controlling the scrubber and volume bar heights

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

Controlling the time view

You can specify the color and background color of the time view using the timeBgColor, timeColor, timeBgHeightRatio properties. Since 3.2, you can also specify the elapsed time/total time separator or force the font size and use the new rgba(255, 255, 255, 1) color syntax

AutoHiding

The controlbar can be made to automatically hide if the user is not actively using the player. This behavior is configured using the autoHide configuration object. This object accepts following nested properties:

Here is an example configuration to change some of these properties:

autoHide: {
    // always enable
    fullsccreenOnly: false,
    
    // make it hide faster
    hideDelay: 2000
}

There is some convenience syntax also. For example you can supply a boolean value:

// disable autohiding completely
autoHide: false

You can also supply a string value, one of 'always', 'fullscreen', 'never':

// enable autohiding in fullscreen
autoHide: 'fullscreen'

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().setEnabled({all: false, play: true}).setWidgets({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 supports background images which is one of the methods 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.

Since 3.2, you can also use the CSS-style rgb(RValue, GValue, BValue) and rgba(RValue, GValue, BValue, alphaValue) : rgba(220,220,220,0.7) for a light gray with a 0.7 transparency.

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.

Flowplayer Twitter feed