JavaScript plugin: Controlbar Skin your player with standard web techniques

Example

This here is new technology - a JavaScript-based controlbar plugin. You can customize it's look and feel using standard web techniques (HTML/CSS) and graphics (JPG/PNG/GIF). How skinnable is that?

Features

Please note that this plugin does not support streaming protocols, but only progressive download.

Usage

Next we will show you the code that produces the example at the beginning of this page. If you want to view an example as a standalone page, you can find one here.

HTML Coding

<!-- player container-->
<a 
	href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" 
	style="display:block;width:500px;height:300px;" 
	id="huluPlayer">
</a>

<!-- controlbar container -->
<div id="hulu" class="hulu"></div>

JavaScript coding

This one line of JavaScript does all the magic: It installs Flowplayer without the default Flash-based controlbar and uses a JavaScript-based controlbar instead

// install everything after page is ready
window.onload = function() {
	$f("huluPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {

		// don't start automatically
		clip: {
			autoPlay: false,
			autoBuffering: true
		},
			
		// disable default controls
		plugins: {controls: null}

	// install HTML controls inside element whose id is "hulu"
	}).controls("hulu", {duration: 25});
};

Unfortunately, the current implementation requires that HTML controls must be initialized upon window.onload. You cannot use jQuery's document.ready which has a bug in Safari. I reported this bug in here and hopefully it will be resolved. Safari doesn't know its element's dimensions beforehand when using external stylesheets.

Alternatively, you can use jQuery's $(window).load() so that you don't mess with existing onLoad events if they exist. The Safari loading "feature" will be studied to determine if a workaround exists.

CSS coding

The look and feel of the controlbar is controlled with an external CSS file. Our example uses this documentet stylesheet file. You can tweak every aspect of the controls: dimensions, colors, background images and show/hide certain widgets - such as time display.

We have another demo with "Apple skin". You can view it here.

Configuration

When the controlbar is installed inside an empty wrapper element it is automatically filled with the following HTML structure:

<!-- play/pause button -->
<div class="play">Play</div>

<!-- track or "scrubber" -->
<div class="track">

	<!-- buffer bar that grows -->
	<div class="buffer"/>

	<!-- progress bar that grows -->
	<div class="progress"/>

	<!-- draggable playhead -->
	<div class="playhead"/>

</div>

<!-- time display (since 3.0.2) -->
<div class="time"></div>

<!-- mute button (since 3.0.2) -->
<div class="mute">mute</div>

When you design the look and feel of your controlbar this is the actual HTML code you need to style with CSS. You should setup the background images and background colors for these elements. It's recommended that you start with the commented CSS file that was given in the above example.

Sometimes you may want to use your own HTML structure for the controlbar so you can apply your own functionaly and styling to it. In that case you should place your structure inside the container and use the same CSS class names as previously mentioned. However, you can also use your own class names if you want to, and it will be necessary to tell the plugin which elements will work as the progress bar, play button, playhead, and so on.

Controlbar configuration

The controlbar takes two arguments. The first is the id of the container that will contain the controlbar. This can also be specified as a DOM element. The second argument is an optional array of configuration parameters. Most of the configuration options relate to the CSS class names you want your controlbar elements to have. Here are all the parameters that can be specified with their default values:

// the container can also be specified as a DOM element
.controls("containerElement",  {

	// CSS class name for the playhead
	playHeadClass: 'playhead',

	// CSS class name for the track
	trackClass: 'track',

	// CSS class name for the playhead when in a playing state
	playClass: 'play',

	// CSS class name for the playhead when in a paused state
	pauseClass: 'pause',

	// CSS class name for the buffer bar
	bufferClass: 'buffer',

	// CSS class name for the progress bar
	progressClass: 'progress',

	// CSS class name for the time display
	timeClass: 'time',

	// CSS class name for mute button
	muteClass: 'mute',

	// CSS class name for the unmute button
	unmuteClass: 'unmute',

	// a default duration for the time display in seconds
	duration: 0
});

Download

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.

Flowplayer Twitter feed