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.
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:
When we are dealing with the splash state the following elements are available:
The player container contains the player in both the splash state and
when the Flash component is loaded. This is one HTML element,
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-imageproperty 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.
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.
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.
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:
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 supports all styling properties and thus can be styled in many different ways. Here is one example configuration:
By default, the canvas uses a transparent background color with a "medium" gradient and there are no borders.
As of version 3.0.7 you can also assign a link to the canvas with the following properties:
Associates a link with the background image (if present) or with the whole object if a background image is not specified. The associated page is opened in the web browser when the image is clicked.
Defines where the page defined by the
Note: You can override the canvas size with the second argument to Flowplayer as follows:
After that canvas dimensions are not defined by the canvas. You can read more about these embedding properties here.
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:
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
display property to
none, or by calling the
from the API.
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.