Playlist with JavaScript controlbar plugin JavaScript Plugins - Demo 7 / 11
Introduction
Here you can see our playlist plugin and JavaScript controlbar plugin working together. The whole thing can be constructed with single javascript call of the form: $f().controls().playlist();. This is a true demonstartion of the "pluggable" nature of Flowplayer configuration.
HTML Coding
We start by laying out our elements: player, controlbar the playlist. Here is what we have on this 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="http://static.flowplayer.org/img/player/btn/play_text_large.png" alt="Show me" />
</a>
</div>
<!-- HTML-based controlbar is auto- generated inside this element -->
<div id="controlbar" class="controls"></div>
<!-- playlist. a simple list of links to videos -->
<div id="clips">
<a href="KimAronson-TwentySeconds70930.flv"></a>
<a href="KimAronson-TwentySeconds72119.flv"></a>
<a href="KimAronson-TwentySeconds71844.flv"></a>
<a href="KimAronson-TwentySeconds73213.flv"></a>
<a href="KimAronson-TwentySeconds75235.flv"></a>
<a href="KimAronson-TwentySeconds67463.flv"></a>
<a href="KimAronson-TwentySeconds58192.flv"></a>
</div>These are all styled with CSS. You will obviously have some text or images inside your playlist entries. This example uses just simple "slots" to indicate playlist entries.
JavaScript coding
Now we get into interesting part. We glue our HTML together with JavaScript to make it a nice workable piece of software.
$(window).load(function() {
// install flowplayer inside a#player
$f("player", "/swf/flowplayer-3.1.5.swf", {
// all clips can be found from blip.tv
clip: {baseUrl: 'http://blip.tv/file/get'},
// 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");
});Could this be made any more logical and simpler?
CSS coding
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 it's wrapper element.
/* player styling */
#player {
background-image:url(http://static.flowplayer.org/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(/img/global/gradient/h600.png) 0 0 repeat-x;
width:745px;
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;
}Controlbar styling comes from external controls-apple.css stylesheet and playlist styling comes from external apple-playlist.css stylesheet.