This is a message.

Background image on the control bar

Making it blend even more with your web page

standalone demo

Here we have set up a background image for the control bar. Its a JPG image with a simple repeating leather pattern. This is a very powerful way of skinning your player and making it match your website. Also the control bar's colors and positioning have been changed a bit.

Changing the image at runtime

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

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

JavaScript

Configuration

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// use the first frame of the video as a "splash image"
clip: {
autoPlay: false,
autoBuffering: true
},
 
// controlbar settings
plugins: {
controls: {
 
// set up a background image
background: 'url(/media/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,
 
// set up auto hide
autoHide: 'always',
 
// a little more styling
width: '80%',
bottom: 5,
left: '50%',
borderRadius: 15
}
}
 
});

JavaScript