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", "/swf/flowplayer-3.1.5.swf", {

	// change the default controlbar to tube
	plugins: {
		controls: {
			url: '/swf/flowplayer.controls-tube-3.1.5.swf'
		} 
	}
	
});

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:

flowplayer("skinless", "/swf/flowplayer-3.1.5.swf", {

	plugins: {
		
		// tube buttons (appr. 4kb)
		tube: { 
			url: "/swf/buttons_tube.swf", 
			type: "classLibrary" 
		},
		
		// skinless controlbar using tube buttons
		controls: { 
			url: '/swf/flowplayer.controls-skinless-3.1.5.swf', 
			skin: 'tube'  
		}
	} 
});