Two different skin examples Skinning - Demo 7 / 10
Two controlbars in action
This example shows that you can use our controlbars in many different ways. Here we have two controlbars where the other displays only time and the other shows only the timeline and the mute icon.
Configuration
Here is the configuration of those two controlbars. They are both placed under the plugins section in configuration.
// 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'
},
// time display positioned into upper right corner
time: {
url: '/swf/flowplayer.controls-3.1.5.swf',
top:0,
backgroundGradient: 'none',
backgroundColor: 'transparent',
buttonColor: '#254558',
all: false,
time: true,
height:40,
right:30,
width:100
}
Show this demo as a standalone page.
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.
Configuration
This setup uses the basic display properties and styling properties for canvas, screen and controlbar.
$f("player", "/swf/flowplayer-3.1.5.swf", {
// clip does not start automatically
clip: {
url: 'http://blip.tv/file/get/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'
}
},
// 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
}
});
Show this demo as a standalone page.