In this tutorial we will explore Flowplayer's skinning possibilities. First we'll take a look at the coloring options that make it possible to change the player's colors to suit the color themes of different Web sites. Then we are going to explore the options to hide different elements of the player's user interface. We will configure the player to show all it's user interface elements and after that we will go to the other extreme and strip it to minimum. Next we'll look at how we can control the "easing" behavior of the control bar. Finally we will look at how to control which menu items are shown in the player's menu.

This tutorial will give you a good understanding of the (powerful) skinning possibilities Flowplayer has.

Coloring

The whole color range used in the new "Air" skin can be controlled using one configuration variable, controlBarBackgroundColor. We can make the control bar red using following configuration:

{ controlBarBackgroundColor: 0xff0000 }
	

This will change the color but to make the player something useful, like playing a video clip, we need to supply it the URL to the video. The configuration object that specified both the background color and the video clip looks like this:

{ 
	controlBarBackgroundColor: 0xff0000, 
	videoFile: 'http://myserver.com/myviveo.flv'
}

Look at the demo to see how background color affects the looks of the player.

Glossyness

Controlbar can have a slight gloss effect making it a bit more "metallic". This setting is controlled by the controlBarGloss parameter.

{
// possible values: high, low or none. Default is 'low'.
controlBarGloss: 'high'
}
	

Controlling the visibility of widgets

By default Flowplayer shows following widgets in the control bar: play/pause button, progress bar (also called 'scrubber'), volume slider, full-screen button, and the menu button. There are some additional buttons that you can make visible using configuration: the stop button, and the playlist buttons.

The stop button is used (as you might guess) to stop the playback. It stops the current clip and rewinds the the player to the beginning of the first clip in the playlist. To show the stop button add following to the configuration object:

showStopButton: true

If you have several clips in the playlist it's useful to show the playlist buttons. The playlist buttons are used to move forward and backward in the playlist. To enable them add following to the configuration object:

showPlayListButtons: true

If you enable both the stop button and the playlist buttons your player will show all available buttons and widgets. Let's see how to strip the player to just show the play/pause button. To do this you must add configuration variables that hide widgets that are by default shown. To hide all but the play/pause button add following to the player's configuration object:

showScrubber: false, showVolumeSlider: false,
showMuteVolumeButton: false, showFullScreenButton: false, 
showMenu: false

To make this a bit cooler we can have the play button shown over the video in the bottom-left corner. To see how that's done read on to the next section that describes control bar easing!

Control bar easing

By default Flowplayer shows the control bar below the video area. When the user hits the full-screen button the player goes to full-screen and the control bar moves down and out of the screen and disappears. Now we have full-screen video with nothing but video content - the control bar is out of the way so that the video can get all the attention.

We can change this default behavior. In the previous section we configured the player to a minimalist configuration with only the play/pause button showing. A nice effect would be to have this lonely small button shown over the video area. To make this happen add following variables to the configuration:

controlsOverVideo: 'locked', controlBarBackgroundColor: -1, controlBarGloss: 'none'

This will lock the control bar over the video area making the play/pause button appear over the video both in the full-screen and in the normal mode. The second variable makes the control bar background completely transparent so that only the button and not the background is shown.

We can also make the button ease in and out of the video area both in normal and in full-screen. To achieve this use value 'ease' for the controlsOverVideo variable. And finally we can also have the button be always showing below the video by specifying a value for controlsOverVideo.

The control bar easing options that we have used here affect the whole control bar regardless how many buttons and other widgets we have configured it to show.

Menu

The rightmost button in the control bar is the menu button. It shows a menu with different media sizing options and provides access to the embed and email features. We can disable the menu completely by adding following to the configuration object:

showMenu: false

This will hide the menu button and after that there is no way to show the menu. What if we want to provide access to the email feature but don't care about the other menu items? To show only the "Email to a friend" menu item add following to the configuration:

menuItems: [ 0, 0, 0, 0, 0, 0, 1 ]

Nonzero values in this array enable menu items. The email menu item is item number seven and the seventh digit in that array has a nonzero value. To enable all but the first menu item we can use following:

menuItems: [ 0, 1, 1, 1, 1, 1, 1 ]

This concludes the Flowplayer skinning tutorial. There is one tool that we have not covered here: The skinning kit is a tool that can be used to replace the images that are used in the buttons and widgets of the control bar. Please look at the skinning kit's documentation for information on how to use it.