This is a message.

Playlist with Javascript control bar

Learn how to use the playlist and the control bar plugin in tandem


standalone demo

Here you can see our playlist plugin and JavaScript control bar plugin working together. The whole thing can be constructed with single javascript call of the form: $f().controls().playlist();.

HTML

We start by laying out our elements: player, control bar the playlist. Here is the code from the example:

<!-- a gray colored wrapper for the player -->
<div id="player_wrap">
 
<!-- player container and a nested play button as PNG image -->
<a id="player" href="">
<img src="/media/img/player/btn/play_text_large.png" alt="Show me" />
</a>
 
</div>

HTML

Configuration

Now we get into interesting part. We glue our HTML together with simple and intuitive JavaScript to make it work.

// install flowplayer inside a#player
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// all clips can be found from blip.tv
clip: {baseUrl: 'http://stream.flowplayer.org'},
 
// don't use default controls
plugins: { controls: null}
 
// controlbar plugin. auto-gnerated inside div#controls
}).controls("controlbar")
 

// playlist plugin. found inside div#clips
.playlist("#clips");

JavaScript

CSS

As in the majority of Flowplayer configurations the biggest work is on CSS coding to make things look good. The good part in here is that every single bit of the above demo is visually configurable: colors, images, borders, dimensions - just use your imagination. CSS is truly a powerful language. This is what we have for the player and its wrapper element.

/ player styling /
#player {
background-image:url(/media/img/home/flow_eye.jpg);
width:400px;
height:300px;
display:block;
text-align:center;
margin:15px auto;
}
 
/ play button /
#player img {
margin-top:110px;
border:0px;
}
 
/ style for the player's wrapper element /
#player_wrap {
background:#ccc url(/media/img/global/gradient/h600.png) 0 0 repeat-x;
width:702px;
border:2px solid #fff;
outline:1px solid #789;
-moz-outline-radius:4px;
margin-bottom:15px;
}
 
/ override buffer color from controls-apple.css /
div.controls div.buffer {
background-color:#789;
}
/ container has a background image /
 
a.player {
display:block;
width:500px;
height:340px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
background:#000 url(/media/img/global/gradient/h500.png) repeat-x 0 0;
background:-moz-linear-gradient(top,
rgba(55, 102, 152, 0.9),
rgba(6, 6, 6, 0.9));
-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}
 
a.player:hover {
background:-moz-linear-gradient(center top,
rgba(73, 122, 173, 0.898),
rgba(6, 6, 6, 0.898));
}
 
/ splash image /
a.player img {
margin-top:125px;
border:0;
}

CSS

The control bar styling comes from an external stylesheet.