Flowplayer Skinning and Branding Configuring your player's look and feel
Controlbar skinning
Here you can tweak controlbar looks. Use the skinning controls below the player to tweak the player colors and styling to your needs. Press the "Show configuration" button to retrieve the current values so you can use them in your own controlbar configuration.
Skin:
Wait, there's more...
In the previous setup you were able to tweak only a subset of the available skinning possibilities of the controlbar. There are many more configuration variables you can work with such as:
Background image
This is a very powerful skinning method. You can specify a JPG, PNG or GIF image as the controlbar background image. Its position can be tweaked just like the CSS background property. The background image can repeat or not. If it does repeat, then you can use a smaller file and specify whether the image repeats horizontally, vertically or in both directions.
Background animation
This is a very experimental skinning method and should be used with care; at the very least the animation should be very subtle. The background animation is defined just like you would define a background image with the exception that the image is a Flash SWF file. Press the following button to see the animation in the player above.
This animation was achieved at runtime with the following JavaScript call:
$f(0).getControls().css({backgroundImage: 'url(/swf/hello2.swf)'});More about skinning and scripting can be found in the Scripting section.
Gradients
When gradients are used sparingly they can add a professional look to your controlbar. In Flowplayer you can specify gradients for almost every visible widget there is such as the canvas, content plugin and of course the controlbar. As seen above in the live demo you can define the gradient behind the whole controlbar as well as define gradients for:
- the progress bar using the progressGradient configuration variable. The progress bar shows the current position on the timeline.
- the buffer bar using the bufferGradient configuration variable. The buffer bar shows how much of the video has been loaded into memory.
- the volume slider using the sliderGradient configuration variable.
See how gradients are defined and a full list of styling properties in the controlbar documentation.
Positioning and multiple controlbars
The controlbar supports a full range of display properties which means that it can be positioned anywhere on the canvas, its transparency (opacity) can be tweaked and its dimensions are adjustable. You can also have many controlbars on the canvas together with each one doing different things. Here is a demo demonstrating multiple controlbars on the same webpage.
JavaScript controlbar
Now we are demonstrating a full standards-based controlbar implementation. Everything is done with HTML/CSS and JavaScript and by using those skils and any graphics program such as Adobe Photoshop you will have full control over the controlbar's final look. Here we have a controlbar whose skin is "borrowed" from Apple's website.
Check out the JavaScript controlbar documentation for more information.
Tube skin
Here you can see an alternative controlbar skin called "tube". It is another official controlbar skin that is contained in the controlbar's distribution zip file.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("tube", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to tube
plugins: {
controls: {
url: 'flowplayer.controls-tube-3.2.5.swf'
}
}
});Modern skin
Here you can see another alternative controlbar skin called "modern". It is another official controlbar skin that is contained in the controlbar's distribution zip file. It's the only controlbar that have support for the slowmotion plugin.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf'
}
},
clip: {
autoPlay: false
}
});Modern light skin
Here's an example of the modern skin with a light background.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern-light", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf',
buttonColor: 'rgba(0, 0, 0, 0.9)',
buttonOverColor: '#000000',
backgroundColor: '#D7D7D7',
backgroundGradient: 'medium',
sliderColor: '#FFFFFF',
sliderBorder: '1px solid #808080',
volumeSliderColor: '#FFFFFF',
volumeBorder: '1px solid #808080',
timeColor: '#000000',
durationColor: '#535353'
}
},
clip: {
autoPlay: false
}
});Modern transparent skin
Here's an example of the modern skin with a transparent background.
Flowplayer configuration
You change the controlbar by supplying a different url under the controls object. :
flowplayer("modern-transparent", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
screen: {
bottom: 0 // make the video take all the height
},
// change the default controlbar to modern
plugins: {
controls: {
url: 'flowplayer.controls-3.2.5.swf',
backgroundColor: "transparent",
backgroundGradient: "none",
sliderColor: '#FFFFFF',
sliderBorder: '1.5px solid rgba(160,160,160,0.7)',
volumeSliderColor: '#FFFFFF',
volumeBorder: '1.5px solid rgba(160,160,160,0.7)',
timeColor: '#ffffff',
durationColor: '#535353',
tooltipColor: 'rgba(255, 255, 255, 0.7)',
tooltipTextColor: '#000000'
}
},
clip: {
autoPlay: false
}
});Skinless version
If is possible to load the skinning file separately together with a "skinnless" version of the controlbar. This configuration is useful when developing a custom version of the controlbar. You only need to compile the buttons file and preview its looks on the browser.
Flowplayer configuration
Skin buttons and the skinless controlbar are separate plugins. The buttons plugin is not a normal Flowplayer plugin and we need to supply it a type classLibrary.
If you're creating your own skin, don't forget to add default:SkinClasses to the first frame of the FLA file, as documented here
flowplayer("skinless", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
plugins: {
// tube buttons (appr. 4kb)
tube: {
url: "http://releases.flowplayer.org/swf/buttons_tube.swf",
type: "classLibrary"
},
// skinless controlbar using tube buttons
controls: {
url: '/swf/flowplayer.controls-skinless-3.2.5.swf',
skin: 'tube'
}
}
});