This is a message.

Customize the control bar for your website

The controlbar plugin is just like any other Flowplayer plugin. It can be moved, resized, faded and animated. You can also dynamically load it during playback.

Features

  • Every aspect of the controlbar plugin can be configured. Each button and widget can be shown or hidden. The background color and gradient settings can be changed even at runtime.

  • You can have many controlbars on the same page at the same time. One might be positioned in an upper corner showing only a play/pause button while another may show the timeline, volume control and fullscreen button.

  • The controlbar can be completely disabled and there is no need to download it at all.

  • If you really want a unique look for your controlbar plugin, you can make your own. That way you can achieve a truly different look for your controlbar combined with the powerful features of Flowplayer.

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

Table Of Contents

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.15.swf from the same location where the player was loaded from. If you want to use an alternative controlbar such as flowplayer.controls-3.2.15.swf or flowplayer.controls-modern-.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.15.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'
        }
    }
}

JavaScript

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
}

JavaScript

Standard properties and methods

The controlbar plugin is displayable 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.

Propertydefault valueDescription

timeColor

#01DAFF

Value for the font color in the time field. This is the running time.

durationColor

#ffffff

Value for the font color in the time field that specifies the total duration of the clip or total time.

progressColor

#015B7A

Color of the progress bar. This is the bar in the timeline from zero time to the point where playback is at a given time.

progressGradient

medium

Gradient setting for the progress bar. See below for its valid values.

bufferColor

#6c9cbc

Color of the buffer. The buffer is the bar that indicates how much video data has been read into the player's memory.

bufferGradient

 

Gradient setting for the buffer. See below for its valid values.

sliderColor

#000000

Background color for the timeline before the buffer bar fills it. The same background color is also used for the volume slider.

sliderGradient

 

Gradient setting for the sliders. See below for valid values.

buttonColor

#889AA4

Color of the player buttons: stop, play, pause and fullscreen.

buttonOverColor

#92B2BD

Button color when the mouse is positioned over them

volumeSliderColor

#000000

Background color for the volume slider (since 3.1)

volumeColor

volumeSliderColor's value

Color of the volume slider, left part of the dragger (since 3.2)

volumeSliderGradient

 

Volume slider background color gradient (since 3.1). See below for its valid values.

timeBgColor

#555555

Background color for the time/duration display (since 3.1). You can set timeBgColor: null here and the time area background area will not be drawn at all.

timeBorderColor

#ffffff

The color of the border around the time/duration display.

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.

PropertyDefault ValueDescription

sliderBorder

none

Defines the border around the scrubber slider (since 3.2). You can specify the width and the color using the 1px solid rgba(0, 0, 0, 1) syntax.

sliderBorderWidth

0

The border width (since 3.2). If both sliderBorder and sliderBorderWidth are defined, sliderBorderWidth has precedence.

sliderBorderColor

#ffffff

The border color (since 3.2). You can use the regular color syntax #000000 or the rgba syntax rgba(0, 0, 0, 1). If both sliderBorder and sliderBorderColor are defined, sliderBorderColor takes precedence.

timeBorder

none

Defines the border around the time/duration display (since 3.2). You can specify the width and the color using the 1px solid rgba(0, 0, 0, 1) syntax.

timeBorderColor

#ffffff

The color of the border around the time/duration display.

timeBorderWidth

0

The border width (since 3.2). If both timeBorder and timeBorderWidth are defined, timeBorderWidth has precedence.

volumeBorder

none

Defines the border around the volume slider (since 3.2). You can specify the width and the color using the 1px solid rgba(0, 0, 0, 1) syntax.

volumeBorderWidth

0

The border width (since 3.2). If both volumeBorder and volumeBorderWidth are defined, volumeBorderWidth has precedence.

volumeBorderColor

#ffffff

The border color (since 3.2). You can use the regular color syntax #000000 or the rgba syntax rgba(0, 0, 0, 1). If both volumeBorder and volumeBorderColor are defined, volumeBorderColor takes precedence.

Controlling the scrubber and volume bar heights

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

PropertyDefault ValueDescription

scrubberHeightRatio

0.4

How much the scrubber handle should take of the controlbar total height. A value of 1.0 means that the scrubber handle takes the entire available height in the controlbar plugin (since 3.1).

scrubberBarHeightRatio

1

The ratio between the scrubber bar and the scrubber handle. A value of 1.0 means that the scrubber bar's height is the same as the handle's height (since 3.1).

volumeSliderHeightRatio

0.4

How much the volume slider handle should take of the controlbar total height (since 3.1).

volumeBarHeightRatio

1

The ratio between the volume bar and the voume slider handle. A value of 1.0 means that the bar's height is the same as the handle's height (since 3.1).

timeBgHeightRatio

0.7

How much the time/duration display should take of the controlbar total height. A value of 1.0 means that it takes the entire available height of the controlbar plugin (since 3.1).

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.

PropertyDefault ValueDescription

timeSeparator

/

Specifies the separator between the elapsed time and the total time (since 3.2).

timeFontSize

9 or 11 depending of the length

Specifies the font size of the time view. Default is 9 or 11 depending on the total length (since 3.2).

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 the following nested properties:

PropertyDefault ValueDescription

enabled

true

Set this to false if you do not want the plugin to autohide at all. See also the autohide shorthand syntax.

fullscreenOnly

false

Set this to true if you want the plugin to autohide only in fullscreen mode. See also the 'fullscreen' autohide shorthand syntax.

hideDelay

4000

The delay in milliseconds before the plugin is automatically hidden. The timer starts over again when the user stops moving the mouse or moves the mouse out of the player. Specifying 0 here causes the plugin to hide immediately. The default is 4000 (4 seconds).

hideDuration

800

The duration it takes for the plugin to go completely hidden. This controls the speed of the hiding animation.

mouseOutDelay

500

The plugin hides after mouse has been moved out of the player area. This property specifies the delay between the time mouse is moved out of the player area and the time when hiding starts.

Here is an example configuration to change some of these properties. This example is for the Viral Videos plugin, but it also applies to the Controlbar, Sharing and Bitrate Selection plugins.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
    plugins: {
        viral: {
            url: "flowplayer.viralvideos-3.2.13.swf"
        },
        dock: {
            gap: 5,
            autoHide: {
                // enable in fullscreen mode only
                fullscreenOnly: true,
 
                // make it hide faster
                hideDelay: 2000
            }
        }
    }
});

JavaScript

autoHide shorthands

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

// disable autohiding completely
autoHide: false

JavaScript

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

// enable autohiding in fullscreen
autoHide: 'fullscreen'

JavaScript

Visibility properties and Buttons

These properties determine the visibility of controlbar elements and buttons.

PropertyDefault ValueDescription

all

null

A shorthand convenience property that you can use to hide or show all elements of the controlbar. This is convenient if you want to show only some of the controlbar elements so you first hide them all with all: false and then show only a few. This technique is used in the above [Configuration example])(#configuration).

play

true

Should the play/pause button be visible?

volume

true

Should the volume control be visible?

mute

true

Should the mute button be visible?

time

true

Should the time display be visible?

stop

false

Should the stop button be visible?

playlist

false

Should the playlist buttons be visible? The playlist buttons allow navigation through the playlist entries of the current playlist. These buttons are always hidden if there are less than two entries in the playlist.

fastBackward

false

Should the fast backward button be visible? The slow motion buttons allow controlling the playback speed (from 1/8 to 8x the normal speed). These buttons are always hidden if the slowmotion plugin is not loaded, and only available with the "Modern" skin.

fastForward

true

Should the fast forward button be visible?

slowBackward

false

Should the slow backward button be visible?

slowForward

true

Should the slow forward button be visible?

fullscreen

true

Should the fullscreen button be visible?

scrubber

true

Should the scrubber be visible? 'Scrubber' is a well known nickname for the timeline/playhead combination.

Scripting

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

MethodExampleDescription

getConfig()

getConfig()

Gets all controlbar configuration in one object. The returned object contains following nested objects that describe the controls' current state: autoHide (auto hiding properties), enabled (which buttons/widgets are currently enabled), tooltips (current tooltip settings), and visible (which buttons/widgets are currently enabled).

getAutoHide()

getAutoHide()

Returns an object with current auto hide properties.

setAutoHide(object)

setAutoHide({fullscreenOnly: false, hideDelay: 2000})

Configures the auto hide behavior. The parameter to this method is the autoHide configuration object.

getEnabled()

getEnabled()

Returns and object that describes which widgets and buttons are currently enabled.

setEnabled(object)

setEnabled({play: false})

Enables and/or disables the controlbar widgets. Disabled widgets are greyed out. For example, this can be useful when you want to force the user to watch a video in the case of an advertisement. A value of all can be used to enable/disable all widgets at the same time. For example, enable({all: false}) will disable all widgets.

getWidgets()

getWidgets()

Returns an object that describes which widgets and buttons are currently visible in the controlbar.

setWidgets(object)

setWidgets({scrubber: false})

Shows/hides the controlbar widgets. all can be used to hide all widgets at the same time, for example, widgets({all: false}).

getTooltips()

getTooltips()

Returns an object that describes the current tooltips settings.

setTooltips(object)

setTooltips({buttons:true, play: 'Go'})

Enables/disables tooltips. Use buttons:true or buttons:false to enable or disable all buttons at the same time, respectively. Specifying the value null disables the tooltip. Since 3.1: If you want to enable the buttons remember to add the buttons: true property as one parameter.

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})

JavaScript

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)'
});

JavaScript

Notice that the controlbar plugin supports background images which is one of the methods of customizing its appearance.

Events

EventWhen does it fire?

onShowed

Used when the autoHide feature is enabled. This event is fired when the controlbar becomes again visible.

onHidden

Used when the autoHide feature is enabled. This event is fired when the controlbar goes hidden (after the animation that makes it hidden has completed and controlbar is not visible any more).

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

JavaScript

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:

PropertyDefault ValueDescription

buttons

false

Specifying true here causes all buttons to have default English tooltips enabled. You can customize each button separately with the following options. Specifying null for a property value causes the tooltip for that button to be disabled.

play

Play

Tooltip text for play button.

pause

Pause

Tooltip text for pause button.

mute

Mute

Tooltip text for mute button.

unmute

Unmute

Tooltip text for unmute button.

stop

Stop

Tooltip text for stop button.

fullscreen

Fullscreen

Tooltip text for fullscreen button.

fullscreenExit

Exit fullscreen

Tooltip text for fullscreenExit button.

next

Next

Tooltip text for the Next button of the controlbar's playlist.

previous

Previous

Tooltip text for the Previous button of the controlbar's playlist.

slowMotionBwd

Slow backward

Tooltip text for the Slow Backward button.

slowMotionFwd

Slow forward

Tooltip text for the Slow Forward button.

slowMotionFBwd

Fast Backward

Tooltip text for the Fast Backward button.

slowMotionFFwd

Fast Forward

Tooltip text for the Fast Forward button.

scrubber

%- value

The scrubber has no text so you can only disable this by specifying false.

volume

%- value

The volume control has no text so you can only disable this by specifying false.

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.

PropertyColorDescription

tooltipColor

#5f747c

background color for tooltips

tooltipTextColor

#ffffff

tooltip text color

No tooltips

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

controls: {
    ...
    tooltips: null
}

JavaScript

Download

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

flowplayer.controls-3.2.15.swf

just the working flash file to get you going
flowplayer.controls-3.2.15.zip

working flash file (swf) + README.txt and LICENSE.txt
flowplayer.controls-3.2.15-src.zip

source code

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

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

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.