HTML based controlbar JavaScript Plugins - Demo 1 / 13

Introduction

Here's something new - a JavaScript-based controlbar plugin. You can customize its look and feel using standard web techniques (HTML/CSS) and graphics (JPG/PNG/GIF). Take a look at the JavaScript controlbar documentation for more information about this.

You can trigger the fullscreen mode by doubleclicking the player. The playhead is draggable. Try it.

HTML coding

We have player container and a controlbar container.

<!-- 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>

Flowplayer configuration

Here we install Flowplayer inside player container and controlbar is installed inside controlbar container.

// 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});
};

CSS coding

Controlbar looks (skinning) is definied in this single documented CSS file. You can tweak every aspect of it: dimensions, colors, background images and show/hide certain widgets - such as time display.

DEMO AREA Scripting and JavaScript plugins

Flowplayer Twitter feed