Flowplayer Configuration Tailor every aspect of the player to your needs

• Introduction
• Player
• Clips
• Playlists
• Plugins
• Streaming

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 JPG, PNG or SWF file.
	NOTE: logo can only be changed in commercial versions
*/
logo: {

	url:'logo.swf',
	top: 20',
	right: 20,
	opacity: 1.0,

	// 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 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 user is redirected when 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.

$f("example4", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.7.swf", {

	// commercial version requires product key
	key: '$54d2dd0d05c105c9ea5',

	// now we can tweak 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. In technical speak, 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 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.7'
]

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, where the property name is the menu item's label, and where the value is a JavaScript function that is invoked when a user selects the menu item. This function can do anything that it 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 display information - nothing happens if a user selects 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.7.swf", {

	// commercial version requires product key
	key: '$54d2dd0d05c105c9ea5',

	// now we can tweak menu
	contextMenu: [

		// 1. load related videos with jQuery and AJAX into 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, and when 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 is also moved. 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 resized also. You can see this behaviour by switching the player to fullscreen mode - observer 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 JPG, PNG or SWF file.
		NOTE: button can only be changed in commercial versions
	*/
	url: 'play.swf',

	// all display properties, exept 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", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {

	// don't start automatically so we can see the button
	clip: { autoPlay: false },

	play: {
		label: 'Peace!',
		fadeSpeed: 3000
	}
});

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. By default its width and height are defined by the wrapper HTML element. In this example we have set the canvas' dimensions to 300 x 200 using CSS:

<!-- styling of the wrapper -->
<style>
#playerWrapper {
	width:300px;
	height:200px;
	border:1px solid #666;
	background:#ddd;
	padding:20px;
}
</style>

<!-- player wrapper that is styled with CSS -->
<div id="playerWrapper"
	href="http://blip.tv/file/get/KimAronson-TwentySeconds1318.flv">
	 click here to start video playback
</div>

<!-- place player into wrapper -->
<script>
flowplayer("playerWrapper", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
</script>

As you noticed the player dimensions are restricted to the wrapper dimensions. If you are using padding CSS property then the player is also respecting those properties and will not fill out the whole wrapper area. You can override the canvas size with the second argument to Flowplayer as follows:

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

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',

	// some gradient
	backgroundGradient: 'medium',

	// and "curved" corners
	borderRadius: 20
}

Canvas link

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

Video screen

The video screen is an internal component of the player. You can set it's initial size, placement and opacity. Here are the video screen's default settings.

screen: {

	/*
		make room for controlbar. this is calculated dynamically
		based on the controlbar height and is 0 if controlbar is not loaded
	*/
	bottom:24,

	// screen is initially the lowermost element
	z-index:0
}

The full range of display properties can be specified for the video screen.

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 samp>display property to none, or by calling the hide() method from the API.

Flowplayer Twitter feed