Flowplayer Skinning and Branding Configuring your player's look and feel
Example
Here is a branded version of Flowplayer. Almost all of the following features are available only in commercial versions of Flowplayer such as a custom logo, a custom play button and a configurable "right-click" context menu. The following player has all of the commercial features enabled. Remember to click the player with your right mouse button.
Logo
Customization of the logo plugin is the main reason for buying the commercial versions of Flowplayer (which gives us the ability to work on this project full-time). In the free version only the fullscreenOnly setting can be changed. Here are all of the logo's available properties along with their default values:
/*
relative path to the logo. this can a JPG, PNG or SWF file.
NOTE: the logo can only be changed in commercial versions
*/
logo: {
// default logo and its position
url: 'logo.swf',
top: 20',
right: 20,
opacity: 0.4,
// for SWF-based logos you can supply a relative size (to make the logo larger in fullscreen)
width: '6.5%',
height: '6.5%',
// if set to false, then the logo is also shown in non-fullscreen mode
fullscreenOnly: true,
// time to display logo (in seconds). 0 = show forever
displayTime: 0,
/*
if displayTime > 0 then this specifies the time it will take for
the logo to fade out. this happens internally by changing the opacity
property from its initial value to full transparency.
value is given in milliseconds.
*/
fadeSpeed: 0,
// for commercial versions you can specify where the user is redirected when the logo is clicked
linkUrl: 'http://flowplayer.org'
}You can also specify all display properties for the logo as with any other plugin.
Logo example
Here we have a customized logo. Notice that there is no Flowplayer branding displayed anywhere. The right-click menu is empty i.e. only unremovable Flash entries are shown.
$f("example4", "/swf/flowplayer.commercial-3.1.5.swf", {
// commercial version requires product key
key: '$c6e9311935842bee951',
// now we can tweak the logo settings
logo: {
url: '/img/player/acme.png',
fullscreenOnly: false,
displayTime: 2000
}
});"Right-click" menu
The right-click menu is the menu that is shown when a user right-clicks the player with the mouse. In technical terms, such a menu is known as a "context menu" or "contextual menu". In commercial versions this menu is fully customizable. You can link the call of a JavaScript function to the user's selection of a particular menu item. However, it cannot be customized in the free version of Flowplayer.
Here is the default configuration in the free version. There are three entries in the menu as follows:
/// single entry that points to the Flowplayer home page
contextMenu: [
// 1. "About Flowplayer..."; selecting this item goes to our homepage
{'About Flowplayer ...' : function() {
location.href = "http://www.flowplayer.org";
}},
// 2. menu separator.
'-',
// 3. version information.
'Flowplayer 3.1.5'
]As you can see from the example above, the contents of the menu are defined by means of a JavaScript array. This array can contain three different kinds of items.
- Objects with a single property. The property name is the menu item's label, and the value is a JavaScript function that is invoked when a user selects the menu item. This function can do anything that is possible to do in JavaScript, and of course it can also interact with the Flowplayer API.
- Menu separators. These are marked with a simple string: "-".
- Labels. These just to display information and nothing happens if a user clicks on one.
Context menu example
Here we have a customized context menu with two entries:
$f("example5", "/swf/flowplayer.commercial-3.1.5.swf", {
// commercial version requires product key
key: '$c6e9311935842bee951',
// now we can tweak the menu
contextMenu: [
// 1. load related videos with jQuery and AJAX into the HTML DIV
{'Show related videos' : function() {
$("#related").load("/demos/configuration/related.jsp?url=" + this.getClip().url);
}},
// 2. display custom player information
"acme.org video player 1.1"
]
});Play button
The play button is shown on top of other elements when the player is in a paused or stopped state; while the video is being downloaded this button becomes a rotating "progress indicator". The play button is always shown in the centre of the video screen, so if the video screen is moved the play button moves with it. This behaviour cannot be altered. The size of the play button is relative to the size of the video screen, so if the video screen is resized the play button is resized also. You can see this behaviour by switching the player to fullscreen mode - observe that the play button becomes much bigger. You can alter this behaviour by specifying a fixed size for the button.
You can customize the size and behaviour of the play button in the following way:
// default settings for the play button
play: {
/*
relative path to the play button, this can be a JPG, PNG or SWF file.
NOTE: the button can only be changed in the commercial versions
*/
url: 'play.swf',
// all display properties, except the z-index, can be modified in all versions
opacity: 0.8,
// label text; by default there is no text
label: null,
// label text at end of video clip
replayLabel: 'Play again',
/*
progress indicator - this is shown while video is being loaded.
it is always in the same place as the play button.
*/
// how fast progress indicator fades out after video is loaded
fadeSpeed: 500,
// how fast buffering animation rotates
rotateSpeed: 50
}You can hide the play/buffering indicator completely by setting its opacity to 0 as follows:
// hide play/buffer indicator
play: { opacity: 0 }Example
Here we have a customized play button with custom positioning, label and fadeSpeed.
$f("example3", "/swf/flowplayer.commercial-3.1.5.swf", {
// changing the play button URL requires a product key
key: '$c6e9311935842bee951',
// don't start automatically so we can see the button
clip: { autoPlay: false },
// a red play button
play: {
url: '/img/player/btn/play_large_red.png',
width: 84,
height: 84
}
});