Changing the control bar skin
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.11.swf", {
// change the default controlbar to tube
plugins: {
controls: {
url: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.11.swf"
}
},
clip: {
autoPlay: false
}
});
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.
Configuration
To use the Modern skin, only the plugins.control.url property needs to be
changed.
flowplayer("modern", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
// change the default controlbar to modern
plugins: {
controls: {
url: "http://releases.flowplayer.org/swf/flowplayer.controls-3.2.11.swf"
}
},
clip: {
autoPlay: false
}
});
Modern light skin
Here is the modern skin that configured to match the appearance of lighter colored websites.
Configuration
Along with the plugins.control.url property, several other properties that affect
the color & transparency are changed to achieve this look.
flowplayer("light", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
controls: {
// change the default controlbar to modern
url: "http://releases.flowplayer.org/swf/flowplayer.controls-3.2.11.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
}
});
Modern transparent skin
Here is the modern skin with completely transparent control bar. Ideal for minimal/dark websites.
Configuration
You can see the background color being set to transparent.
flowplayer("transparent",
"http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
controls: {
// change the default controlbar to modern
url: "http://releases.flowplayer.org/swf/flowplayer.controls-3.2.11.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
}
});
Air skin
Here is the air skin in its default look
Configuration
flowplayer("air", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
controls: {
// change the default controlbar to air
url: "http://releases.flowplayer.org/swf/flowplayer.controls-air-3.2.11.swf"
}
},
clip: {
autoPlay: false
}
});
Skinless
It is possible to load the skinning file separately together with a "skinnless" 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.
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("skinless", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.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: "http://releases.flowplayer.org/swf/flowplayer.controls-skinless-3.2.11.swf",
skin: 'tube'
}
},
clip: {
autoPlay: false
}
});