Here you can tweak controlbar looks. Use the skinning controls below the player to tweak the player colors and styling to your needs. Press the “Show configuration” button to retrieve the current values so you can use them in your own controlbar configuration.
Wait, there's more...
In the previous setup you were able to tweak only a subset of the available skinning possibilities of the controlbar. There are many more configuration variables you can work with such as:
This is a very powerful skinning method. You can specify a JPG, PNG or
GIF image as the controlbar background image. Its position can be
tweaked just like the CSS
background property. The background image
can repeat or not. If it does repeat, then you can use a smaller file
and specify whether the image repeats horizontally, vertically or in
When gradients are used sparingly they can add a professional look to your controlbar. In Flowplayer you can specify gradients for almost every visible widget there is such as the canvas, content plugin and of course the controlbar. As seen above in the live demo you can define the gradient behind the whole controlbar as well as define gradients for:
the progress bar using the
progressGradientconfiguration variable. The progress bar shows the current position on the timeline.
the buffer bar using the
bufferGradientconfiguration variable. The buffer bar shows how much of the video has been loaded into memory.
the volume slider using the
See how gradients are defined and a full list of styling properties in the controlbar documentation.
Positioning and multiple controlbars
The controlbar supports a full range of display properties which means that it can be positioned anywhere on the canvas, its transparency (opacity) can be tweaked and its dimensions are adjustable. You can also have many controlbars on the canvas together with each one doing different things. Here is a demo demonstrating multiple controlbars on the same webpage.
Flowplayer comes with three skins for the control bar out of the box.
You can change your control bars to any of these exquisite handcrafted skins with minimal changes to your configuration parameters. Flowplayer also allows these skins to be customized to precisely match the look and feel of your site.
You can see this skin in the above demo. This is a minimal red and black skin that's simple and beautiful.
To use the Tube skin, only the
plugins.controls.url property needs to be
This minimal black and white skin is unique. It also provides button for slow motion controls that you can use with our slow motion plugin.
The Modern skin is the default skin of the controlbar plugin. If
flowplayer.controls-3.2.16.swf resides in the same directory as
flowplayer-3.2.18.swf you don't even have to specify
Modern light skin
Here is the modern skin that configured to match the appearance of lighter colored websites.
This look is achieved by changing several properties of the controlbar:
Modern transparent skin
Here is the modern skin with completely transparent control bar. Ideal for minimal/dark websites.
You can see the background color being set to transparent.
Here is the air skin in its default look:
It is possible to load the skinning file separately together with a "skinless" version of the control bar. This configuration is useful when developing a custom version of the control bar. You only need to compile the buttons file and preview its looks on the browser.
Skin buttons and the skinless control bar are separate plugins. The buttons plugin
is not a normal Flowplayer plugin and we need to supply it a type
If you're creating your own skin, don't forget to add
default:SkinClasses to the
first frame of the FLA file, as documented here.