A customizable HTML playlist for your videos
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.
- 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.
This plugin requires the jQuery library to be loaded.
The player at the top of the page is an example for the so-called internal configuration.
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:
are automatically placed inside the playlist. See how the clip properties
time are inserted into our HTML template. All the properties of the
common clip are also inserted.
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".
This time the playlist is defined inside the HTML-based playlist:
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
attribute for it that corresponds to the first entry in the playlist. In our
previous example the container should look like this:
Take a look at the manual playlist with autoplay as a standalone page.
You can configure your playlist with different configuration variables. Here are all the parameters you can supply to the playlist with their default values:
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
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.
minified with Douglas Crockford's minifier
Please right-click and choose "Save link as..." (or similar)
See the version history for this tool.
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.