You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Using a background image on the controlbar Skinning - Demo 9 / 10

Introduction

Here we have setup a background image for the controlbar. It's a simple repeating leather pattern as JPG. This is a very powerfull way of skinning your player and making it look like your own player. Also controlbar colors and positioning have been changed a bit.

Here is the JavaScript code for configuring this setup 

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf",  {
		
	// use the first frame of the video as a "splash image"
	clip: {
		autoPlay: false,
		autoBuffering: true
	},
	
	// controlbar settings
	plugins:  {
		controls: {			
			
			// setup a background image
			background: 'url(/img/player/skin_leather.png) no-repeat',
			
			/* you may want to remove the gradient */
			// backgroundGradient: 'none',
			
			// these buttons are visible
			all:false,
			scrubber:true,
			play:true,
			mute:true,
			
			// custom colors
			bufferColor: '#333333',
			progressColor: '#cc0000',			
			buttonColor: '#cc0000',
			buttonOverColor: '#ff0000',
			
			// tooltip background color (since 3.1.0)
			tooltipColor: '#cc0000',
			
			// custom dimension
			height: 25,
			width: 400,
			
			// setup auto hide
			autoHide: 'always',			
			
			// a little more styling 			
			width: '80%', 
			bottom: 5,
			left: '50%',
			borderRadius: 15			
		}
	}
});
Show this second example as a standalone page

Changing the image at runtime

You can use the scripting API to change the background image at runtime using following code. 

$f().getControls().css({backgroundImage: 'url(/img/demos/3m.jpg)'});