Youtube like Javascript playlist

Use the playlist Javascript plugin to render playlists similar to youtube

Here is an item in the playlist

And a subtitle. 0.22

standalone demo

The goal of this demo is simply to show the power of CSS and how it can be used to construct wildly different layouts for a playlist. Even the scrolling functionality here is done using the overflow css property. While sophisticated scrolling can be accomplished using the scrollable tool, it is not absolutely necessary. The playlist look mimics the YouTube playlists. However, it provides improved behavior over youtube as a selection simply switches the video instead of going to a whole new page.

It's easy to toggle visibility of this playlist by calling jQuery's $("#playlist").slideToggle().

See also how our Flash based menu plugin can be used for playlists.

HTML

<!-- root element of the playlist -->
<div id="playlist">
 
    <!-- single entry -->
    <a href="KimAronson-TwentySeconds59483.flv">
        <img src="/img/demos/thumb1.jpg" />
        <strong>Here is an item in the playlist</strong><br /><br />And a subtitle.
        <em>0.22</em>
    </a>
 
    <!-- ... add more entries here ... -->
 
</div>

HTML

Configuration

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
   clip: {baseUrl: 'http://stream.flowplayer.org'}
    // playlist plugin
    }).playlist("#playlist");

JavaScript

Styles

The visual similarity with youtube is accomplished with following CSS:

#player {
    float:left;
    height:278px;
    width:385px;
    text-align: center;
}
 
a.player.plain img {
    margin-top: 113px;
}
 
/ playlist style /
#playlist {
    width:312px;
    height:260px;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid #ccc;
    padding:4px 10px 12px 10px;
    background-color:#efefef;
    margin-top:20px;
    float:left;
}
 
/ playlist entry /
#playlist a {
    display:block;
    width:280px;
    height:90px;
    padding:7px;
    background-color:#fff;
    border:1px solid #ccc;
    font:11px "bitstream vera sans", "lucida grande",verdana;
    text-decoration:none;
    margin-top:7px;
    color:#666;
}
 
/ different states of a playlist entry /
#playlist a:hover {
    background-color:#ffc;
}
 
#playlist a.progress {
    background-color:#efefef;
}
 
#playlist a.playing {
    border:1px solid #666;
    background-color:#ffc;
}
 
#playlist a.paused {
    border:1px solid #666;
    background-color:#ffc;
}
 
/ elements inside playlist entry /
#playlist a img {
    border:0;
    float:left;
    margin-right:10px;
}
 
#playlist a strong {
    color:blue;
    padding-bottom:5px;
}
 
#playlist a em {
    border:0;
    float:left;
    margin-right:10px;
    background:url(/media/img/demos/clock.gif) no-repeat 0 50%;
    padding-left:20px;
    color:#333;
    font-style:normal;
    margin-top:10px;
}

CSS