Flowplayer Skinning and Branding Configuring your player's look and feel

• Overall look
• Controlbar
• Branding
• Scripting
• Custom skins

Introduction

Here we focus on customizing the overall look of the player. Basically this means all areas other than controlbar skinning and commercial branding. Overall look means tweaking the appearance of the player container, splash state, canvas and video screen. This document tells you what those important elements are and how they can be customized.

Splash state

When you have installed your player with an initial splash image, the Flash video player won't be loaded until the player is clicked. We call this state a "splash state". This splash state is typically just an image that can be clicked, but it can be more. Here is an example of two video players whose splash state has been skinned a bit further:

Eating sushi on a Japanese Restaurant duration: 20 seconds

Happy Feet dancing in the car duration: 21 seconds

When we are dealing with the splash state the following elements are available:

Player container

The player container contains the player in both the splash state and when the Flash component is loaded. This is one HTML element, typically an A or DIV tag. This is a normal HTML element that can be styled with CSS. The following CSS properties are interesting when dealing with the container:

• padding is the amount of space between the container border and the splash image. When the player is being loaded, the padding remains. When this property is coupled with the background-image property you can style the surroundings of the player in both the splash and loaded states. Think of drop shadows, outer glows or reflections - just to name a few possibilities.
• background-image is a strong way of skinning your container. For example, this can be the first frame of the video as in the above example or it can be something that is also visible and surrounds the player when is it loaded.
• border is a CSS property that offers a lot of interesting possibilities. You can also couple borders with the outline property as is done in the above example.

Splash

This element is replaced by the Flowplayer Flash component when the player is loaded and it will be re-enabled when player is unloaded. The splash can consist of multiple nested HTML elements and can be very complex if necessary. In the above example, we had both a play button and an info box as splash images.

The Splash can have almost any kind of HTML elements such as images, DIVs and paragraphs and they can all be styled with CSS. There is no point in using clickable elements such as anchor tags or form elements because when those elements are clicked they are immediately replaced by the Flowplayer Flash component.

Loaded state

When the player is loaded either by clicking or upon page load, the following elements are available for skinning:

Here the canvas is a HTML element and the rest of the elements are Flash-based i.e. they are Flowplayer internal elements.

Canvas

The canvas is the lowermost layer in the player and all other elements such as the video screen and controlbar plugin are placed on top of it. The canvas can be styled in many ways. In this extreme example an SWF file was used as the background "image" of the canvas.

Here we have a large container with a dark-blue background color and a smooth gradient which has been created with a semi-transparent CSS background image. The interesting part of this example is the canvas which has been configured as follows:

canvas:  {
	// configure background properties
	background: '#000000 url(/swf/hello2.swf) no-repeat 30 10',

	// remove default canvas gradient
	backgroundGradient: 'none',

	// setup a light-blue border
	border:'2px solid #778899'
}

A few interesting things to note here:

• The canvas is a Flash object but its configuration mimics CSS syntax. If you understand CSS, then you'll feel at home when skinning the canvas element or other Flowplayer internal elements.
• The canvas can have a background "image", but it is interesting to point out that this image can be a Flash SWF file as in our above example (the "Hello World" text).
• The player container (the blue area) has 20px of padding on the top and bottom and 100px of padding on both the left and right. This padding property is used to control the dimensions of the canvas. Without padding, the canvas would have filled the container completely and the blue color would not have been visible.
• If you want to resize the canvas you must resize your wrapper element. You can also resize your wrapper dynamically using JavaScript, if desired.

The canvas supports all styling properties and thus can be styled in many different ways. Here is one example configuration:

canvas: {

	// use a wicked backgound color
	backgroundColor: '#987290',

	// a gradient
	backgroundGradient: 'medium',

	// and "curved" corners
	borderRadius: 20
}

By default, the canvas uses a transparent background color with a "medium" gradient and there are no borders.

Canvas link

As of version 3.0.7 you can also assign a link to the canvas with the following properties:

Note: You can override the canvas size with the second argument to Flowplayer as follows:

// the second argument in the Flash-embedding configuration (NB: *not* the Flowplayer configuration)
flowplayer("playerWrapper", {src:"flowplayer.swf", width:250, height:150});

After that canvas dimensions are not defined by the canvas. You can read more about these embedding properties here.

Video screen

The video screen is another internal component of the player. You can tweak its size, placement and opacity. The following example uses a large canvas with a background image and the screen is positioned and sized so that it is placed inside the "Hello World!" screen. Click on the image to see it in action.

Here is the canvas and screen configuration of the above example:

// canvas background
	canvas: {
		backgroundImage: 'url(/img/demos/helloworld.jpg)'
	},
	
	// screen positioning inside "Hello world" screen.
	screen: {		
		width:387, height:231, top:55, right:77
	},

By default, the screen takes up all of the available space from the canvas excluding the height of the controlbar - which is 24 pixels by default. So if your video dimensions are 300x240 you should have your canvas height set to 324 pixels so that your video will maintain its aspect ratio.

The Video screen can be configured with a full range of display properties.

You can also alter those properties later programatically, if desired. The only difference compared to other plugins is that you cannot disable or remove the video screen - it is always loaded if a video file has been specified. You can, however, hide it by setting its display property to none, or by calling the hide() method from the API.

Conclusion

Flowplayer makes a lot of effort to provide CSS standards-based skinning. You can see that there is much more here than just skinning as opposed to other players out there - and you haven't even seen the controlbar skinning yet! The best place to learn more about skinning possibilities is to go through our skinning demos.

• Technical Facts
• Version History