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.11.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