This is a message.

Two different skin examples

Contrast the variations that can be achieved using simple configurations

standalone demo

This example shows how you can use our control bars in many different ways

Here we have two control bars where one displays time and the other shows the timeline and the mute icon.

Two control bars

Here is the configuration of those two control bars. They are both placed under the plugins section in configuration.

$f("twoControls", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",  {
 
clip: {
url: 'http://edge.flowplayer.org/N8inpasadena-Flowers457.flv',
autoPlay: false,
autoBuffering: true
},
 
plugins: {
 
// default controls with the same background color as the page background
controls: {
backgroundColor: '#254558',
backgroundGradient: 'none',
all:false,
scrubber:true,
mute:true,
height:30,
progressColor: '#6d9e6b',
bufferColor: '#333333',
autoHide: false
},
 
// time display positioned into upper right corner
time: {
url: "flowplayer.controls-3.2.16.swf",
top:0,
backgroundGradient: 'none',
backgroundColor: 'transparent',
buttonColor: '#254558',
all: false,
time: true,
height:40,
right:30,
width:100,
autoHide: false
}
},
 
// canvas coloring and custom gradient setting
canvas: {
backgroundColor:'#254558',
backgroundGradient: [0.1, 0]
}
 
});

JavaScript

Rounded Corners

This configuration shows a little rounding in the player canvas and the video screen is a little nested inside the canvas so that curving stays while the playback plays. This kind of configuration looks smooth especially in configurations where there is a solid background color in the video.

standalone demo

Configuration

This setup uses the basic display properties and styling properties for canvas, screen and control bar.

$f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",  {
 
// clip does not start automatically
clip: {
url: 'http://edge.flowplayer.org/N8inpasadena-Flowers457.flv',
autoPlay: false
},
 
// default controls with the same background color as the page background
plugins: {
controls: {
backgroundColor: '#000',
backgroundGradient: 'none',
all: false,
scrubber: true,
height: 40,
sliderColor: '#333333',
progressColor: '#ca000a',
bufferColor: '#666666',
autoHide: false
}
},
 
// fiercy red background color with a little gradient and curving
canvas: {
backgroundColor: '#ca000a',
backgroundGradient: [0.3, 0],
borderRadius: 10
},
 
// set screen dimensions so that it goes near the canvas borders
screen: {
width: 494,
height: 303,
top: 3
}
 

});

JavaScript