Changing the skin of the controlbar Skinning - Demo 1 / 10
Tube skin
Here you can see an alternative controlbar skin called "tube". It is another official controlbar skin that is contained in the controlbar's distribution zip file.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("tube", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to tube
plugins: {
controls: {
url: 'flowplayer.controls-tube-3.2.5.swf'
}
}
});Modern skin
Here you can see another alternative controlbar skin called "modern". It is another official controlbar skin that is contained in the controlbar's distribution zip file. It's the only controlbar that have support for the slowmotion plugin.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf'
}
},
clip: {
autoPlay: false
}
});Modern light skin
Here's an example of the modern skin with a light background.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern-light", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf',
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's an example of the modern skin with a transparent background.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern-transparent", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
screen: {
bottom: 0 // make the video take all the height
},
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf',
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
}
});Skinless version
If is possible to load the skinning file separately together with a "skinnless" version of the controlbar. This configuration is useful when developing a custom version of the controlbar. You only need to compile the buttons file and preview its looks on the browser.
Flowplayer configuration
Skin buttons and the skinless controlbar 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.7.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: '/swf/flowplayer.controls-skinless-3.2.5.swf',
skin: 'tube'
}
}
});