This is a message.

Skin your player with standard web techniques

This here is new technology - a JavaScript-based controlbar plugin. You can customize its look and feel using standard web techniques (HTML/CSS) and graphics (JPG/PNG/GIF).


  • The controlbar can be skinned using standard HTML and CSS techniques, and graphics are supplied in a normal web format (JPG/PNG/GIF). Flash programming skills are not required at all.

  • The controlbar can be placed outside of the video player as well as positioned and sized in any way you like without any dependency on the video player's size and position on the page.

  • You can have many players on a page and each one can have their own controlbar. Various players can share the same design or each player can de given a different design.

  • Requires one JavaScript file that weighs only 3 Kb when minified. A quick look at the Apple website reveals that their solution weighs 28 Kb! Remember that Flowplayer can be configured so that the Flash-based controlbar plugin is not loaded from the server.


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="" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
<!-- 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
$f("huluPlayer", "", {
// 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 documented stylesheet file. You can tweak every aspect of the controls: dimensions, colors, background images and show/hide certain widgets - such as time display.

Take a look at a standalone version of this demo. View its source code to get things going on your page.

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


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"/>
<!-- 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 set up 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




source code


minified with Douglas Crockford's minifier

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

See the version history for this tool.

NOTE We are no longer providing packed scripts. Although they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.