A customizable HTML playlist for your videos

The playlist is constructed with standard HTML tags and attributes. Playlist entries can contain any HTML, including text and images, and you can style them with CSS.

${title} ${subTitle} ${time}

Click on the player or the playlist entries to see this plugin in action. You can also see this example as a a page. View its source code to see how things are done. You can freely copy/paste this code to your site.

Benefits

• The look and feel is 100% under your control.
• You can have multiple players and playlists on the same page and things will still work!

• You can set up the playlist information in the player configuration or you can define the playlist information using HTML. This document includes examples of both of these configurations. We call the first method Internal configuration and the second Manual configuration.

• Entries are "in sync" with the player. Try hitting the pause button from any of entries and from the player as well.

• You can make the playlist vertical, horizontal, scrollable or even animated. It's up to you and your coding skills. Here is an example of a scrollable implementation

• With the Internal configuration you can even add and remove entries from the playlist dynamically. Here is an example of dynamic playlist manipulation.

• The playlist implementation weights only 2 Kb! We recommend that you study its documented source code if you want to learn how to make your own JavaScript plugins.

Dependency

This plugin requires the jQuery library to be loaded.

Internal configuration

The player at the top of the page is an example for the so-called internal configuration.

HTML coding

Here is the HTML code from the example above. We use a "template" for each clip in the playlist. The playlist itself is defined in the Flowplayer configuration:

<div class="clips" style="float:left">
 
    <!-- single playlist entry as an "template" -->
    <a href="${url}">
        ${title} <span>${subTitle}</span>
        <em>${time}</em>
    </a>
 
</div>
 
<!-- the player using splash image -->
<a class="player plain" id="player1" style="float:left">
    <img class="button" src="/media/img/player/btn/play_text_large.png" />
</a>
 
<!-- let rest of the page float normally -->
<br clear="all"/>

JavaScript coding

Here is the JavaScript configuration for the player. All entries in the playlist are automatically placed inside the playlist. See how the clip properties title, subTitle and time are inserted into our HTML template. All the properties of the common clip are also inserted.

// set up player normally
    $f("player1", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
 
        // clip properties common to all playlist entries
        clip: {
            baseUrl: 'http://stream.flowplayer.org',
            subTitle: 'from blib.tv video sharing site',
            time: '20 sec'
        },
 
        // our playlist
        playlist: [
            {
                url: 'KimAronson-TwentySeconds59483.flv',
                title: 'Palm trees and the sun'
            },
            {
                url: 'KimAronson-TwentySeconds58192.flv',
                title: 'Happy feet in a car'
            },
            {
                url: 'KimAronson-TwentySeconds63617.flv',
                title: 'People jogging'
            }
        ],
 
        // show playlist buttons in controlbar
        plugins: {
            controls: {
                playlist: true
            }
        }
    });
 

    // here comes the magic plugin. It uses first div.clips element as the
    // root for as playlist entries. loop parameter makes clips play
    // from the beginning to the end.
 
    $f("player1").playlist("div.clips:first", {loop:true});

CSS coding

Here is our external CSS file. The entire layout is done using CSS common practices. This allows you to create radically different "skins" and functionality. The CSS coding is actually the biggest challenge and it helps if you understand this powerful "language".

Manual configuration

Here is another playlist implementation. This time the playlist is configured manually which means that the playlist entries are defined with HTML and are not specified in our JavaScript-based configuration. Below is a working example. You can also view this example as a standalone version.

Palm trees and the Sun HTTP streaming 0:20 min Happy feet inside a car HTTP streaming 0:20 min Park side life HTTP streaming 0:20 min

HTML Coding

This time the playlist is defined inside the HTML-based playlist:

<!-- configure entries inside playlist using standard HTML -->
<div class="clips petrol" style="float:left">
 
    <!-- single playlist entry -->
    <a href="KimAronson-TwentySeconds59483.flv" class="first">
        Palm trees and the Sun
        <span>HTTP streaming</span>
        <em>0:20 min</em>
    </a>
 
    <a href="KimAronson-TwentySeconds58192.flv">
        Happy feet inside a car
        <span>HTTP streaming</span>
        <em>0:20 min</em>
    </a>
 
    <a href="KimAronson-TwentySeconds63617.flv">
        Park side life
        <span>HTTP streaming</span>
        <em>0:20 min</em>
    </a>
 
</div>
 
<!-- player container and a splash image (play button) -->
<a class="player plain" id="player2"  style="float:left">
    <img class="button" src="/media/img/player/btn/play_text_large.png" />
</a>
 
<!-- let rest of the page float normally -->
<br clear="all"/>

JavaScript coding

Now the playlist entries are not configured in the player making our JavaScript much shorter:

// set up player without "internal" playlists
    $f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
        clip: {baseUrl: 'http://stream.flowplayer.org'}
 

    // use playlist plugin. again loop is true
    }).playlist("div.petrol", {loop:true});

We use the same CSS stylesheet as in our first example. We used the div class name "petrol" as our root element. This gave us the possibility of visualizing our playlist a little differently. You may want to play around with both of the playlists on this page. Please notice that within a playlist only one clip is playing at a time.

Manual configuration and autoplay

If you want your player to automatically start playing when your page loads, then you'll have to remove all content inside the player container and add a href attribute for it that corresponds to the first entry in the playlist. In our previous example the container should look like this:

<!-- player container without nested content and with an href attribute -->
<a class="player" id="player" style="float:left"
    href="KimAronson-TwentySeconds59483.flv"></a>

Take a look at the manual playlist with autoplay as a standalone page.

Playlist configuration

You can configure your playlist with different configuration variables. Here are all the parameters you can supply to the playlist with their default values:

.playlist("playlistContainer",  {
 
    // CSS class name of a playing entry
    playingClass: 'playing',
 
    // CSS class name of a paused entry
    pausedClass: 'paused',
 
    // CSS class name for an entry that is loading
    progressClass: 'progress',
 
    // if true, playlist plays through like a standard playlist
    continuousPlay: false,
 
    // if true, all clips are played in an endless loop
    // (takes precedence over continuousPlay)
    loop: false,
 
    /
        when set to true and the splash image is clicked, then the first clip is
        played. This has an effect on the manual configuration only.
    /
    playOnClick: true
});

The default behavior of a playlist deployed with this plugin differs from a standard playlist inasmuch as the playback stops at the end of each clip and clicking the Replay button repeats the current clip. This is to emphasize the close interaction between the html playlist elements with each single clip. If you prefer the standard playlist behavior, set the continuousPlay option to true.

As you can see, most of the configuration parameters are related to CSS class names which are changed according to the player's current state. This allows you to make each playlist entry look and behave differently upon each stage. Of course, you can have your own event handlers as well, as is documented here.

Download

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 in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.