This is a message.

Changing the control bar skin

Pick the look that best fits your site

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