This is a message.

Controlbar

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.

Player not loaded

Skin:

Controlbar colors












 

Controlbar styling



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:

Background image

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 both directions.

Gradients

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 progressGradient configuration variable. The progress bar shows the current position on the timeline.

  • the buffer bar using the bufferGradient configuration variable. The buffer bar shows how much of the video has been loaded into memory.

  • the volume slider using the sliderGradient configuration variable.

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.

JavaScript controlbar

Now we are demonstrating a full standards-based controlbar implementation. Everything is done with HTML/CSS and JavaScript and by using those skills and any graphics program such as Adobe Photoshop you will have full control over the controlbar's final look. Here we have a controlbar whose skin is "borrowed" from Apple's website.

Check out the JavaScript controlbar documentation for more information.

Demos

standalone demo

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.

Tube skin

You can see this skin in the above demo. This is a minimal red and black skin that's simple and beautiful.

Configuration

To use the Tube skin, only the plugins.controls.url property needs to be changed.

flowplayer("tube", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// change the default controlbar to tube
plugins: {
controls: {
url: "flowplayer.controls-tube-3.2.16.swf"
}
},
clip: {
autoPlay: false
}
});

JavaScript

Modern skin

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.

standalone demo

Configuration

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 the plugins.controls.url property.

flowplayer("modern", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// the modern default controlbar
plugins: {
controls: {
// could be omitted
url: "flowplayer.controls-3.2.16.swf"
}
},
clip: {
autoPlay: false
}
 
});

JavaScript

Modern light skin

Here is the modern skin that configured to match the appearance of lighter colored websites.

standalone demo

Configuration

This look is achieved by changing several properties of the controlbar:

flowplayer("light", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
plugins: {
controls: {
url: "flowplayer.controls-3.2.16.swf",
 
// customize the appearance make it have a lighter look
buttonColor: 'rgba(0, 0, 0, 0.9)',
buttonOverColor: '#000000',
backgroundColor: '#D7D7D7',
backgroundGradient: 'medium',
sliderColor: '#FFFFFF',
 
sliderBorder: '1px solid #808080',
volumeSliderColor: '#FFFFFF',
volumeBorder: '1px solid #808080',
 
timeColor: '#000000',
durationColor: '#535353'
}
},
clip: {
autoPlay: false
}
 
});

JavaScript

Modern transparent skin

Here is the modern skin with completely transparent control bar. Ideal for minimal/dark websites.

standalone demo

Configuration

You can see the background color being set to transparent.

flowplayer("transparent",
"http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
plugins: {
controls: {
url: "flowplayer.controls-3.2.16.swf",
 
// customize the appearance to make the control bar transparent
backgroundColor: "transparent",
backgroundGradient: "none",
sliderColor: '#FFFFFF',
sliderBorder: '1.5px solid rgba(160,160,160,0.7)',
volumeSliderColor: '#FFFFFF',
volumeBorder: '1.5px solid rgba(160,160,160,0.7)',
 
timeColor: '#ffffff',
durationColor: '#535353',
 
tooltipColor: 'rgba(255, 255, 255, 0.7)',
tooltipTextColor: '#000000'
 
}
},
clip: {
autoPlay: false
}
 
});

JavaScript

Air skin

Here is the air skin in its default look:

standalone demo

Configuration

flowplayer("air", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
plugins: {
controls: {
// change the default controlbar to air
url: "flowplayer.controls-air-3.2.16.swf"
}
},
clip: {
autoPlay: false
}
 
});

JavaScript

Skinless

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.

standalone demo

Configuration

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 classLibrary.

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.

flowplayer("pskinless", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
// tube buttons (appr. 4kb)
tube: {
url: "http://releases.flowplayer.org/swf/buttons_tube.swf",
type: "classLibrary"
},
 
// skinless controlbar using tube buttons
controls: {
url: "flowplayer.controls-skinless-3.2.16.swf",
skin: 'tube'
}
},
clip: {
autoPlay: false
}
 
});

JavaScript