This is a message.

HTML control bar

Learn how to make use of the javascript controls plugin

standalone demo

You can customize its look and feel using standard web techniques (HTML/CSS) and graphics (JPG/PNG/GIF). Take a look at the JavaScript control bar plugin documentation for more information about this.

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

HTML

We have player container and a control bar container. 

<!-- player container-->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"    class="player"
    style="display:block;width:425px;height:300px;margin:10px auto"
    id="huluPlayer">
    </a>
 
<!-- controlbar container -->
<div id="hulu" class="hulu"></div>

HTML

Configuration

// install everything after page is ready
    $f("huluPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.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});

JavaScript

The looks for the control bar (skinning) are defined in this single documented CSS file. You can tweak every aspect of it: dimensions, color, background image and also show/hide certain widgets like the time display.