This is a message.

Branding

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 above player has all of the commercial features enabled. Remember to click the player with your right mouse button.

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:

// logo can a JPG, PNG or SWF file.
// NOTE: the logo can only be changed in commercial versions
// the url must be absolute or relative to the flowplayer SWF
logo: {
// default logo and its position
url: 'logo.swf',
top: 20,
right: 20,
opacity: 0.4,
 
// 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'
}

JavaScript

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", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.18.swf", {
// commercial version license key
key: '#$7162d2d730cf607ac6d',
 
// now we can tweak the logo settings
logo: {
url: 'http://flash.flowplayer.org/media/img/player/acme.png',
fullscreenOnly: false,
displayTime: 2000
}
});

JavaScript

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.2.18'
]

JavaScript

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.

1 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.

2 Menu separators. These are marked with a simple string: "-".

3 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", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.18.swf", {
// commercial version license key
key: '#$7162d2d730cf607ac6d',
 
// 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.html");
}
},
 
// 2. display custom player information
"acme.org video player 1.1"
]
});

JavaScript

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
}

JavaScript

You can hide the play/buffering indicator completely by setting its opacity to 0 as follows:

// hide play/buffer indicator
play: { opacity: 0 }

JavaScript

Example

Here we have a customized play button.

$f("example3", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.18.swf", {
// commercial version license key
key: '#$7162d2d730cf607ac6d',
 
// don't start automatically so we can see the button
clip: { autoPlay: false },
 
// a red play button
play: {
url: '/media/img/player/btn/play_large_red.png',
width: 84,
height: 84
}
});

JavaScript