Using the Visual Playlist

This page has moved.  Please visit the updated location here.

Thanks for your patience while we update our documentation.

You will be automatically redirected in 10 seconds.

This article covers the way that JW Player's interface behaves when playing playlist content. For more about playlist content, read "Building & Managing Playlists".

When playing back a playlist, JW Player 7 automatically includes a visual playlist button on the player's control bar. Mousing over (or touching) this button will display the playlist items in a scrollable overlay (the "Visual Playlist"). This allows a user to quickly jump between various playlist items. Visual Playlists are rendered entirely on top of the player, without the need for additional space next to (or below) the player.

 

Visual Playlist Example

The below is an example of what a visual playlist looks like by default in a JW Player (in this example, an RSS playlist is the content referenced in the player setup code). The player populates the visual playlist automatically with the title of each item (as specified in the dashboard, or in the embed block itself).

 

 

Example Embed Code

<div id="myElement"></div>

<script>
var playerInstance = jwplayer("myElement");
    playerInstance.setup({
      playlist: "/uploads/myPlaylist.rss"
    });
</script>

 

Show or Hide the Visual Playlist

While the Visual Playlist is enabled by default, it can also be hidden. When you're setting up your player in the Player Builder page of the dashboard, you'll want to make sure the "Show visual playlist tools" button is un-checked. Click "Save", and you'll see your changes reflected if the player is already embedded.

Hide or Show Visual Playlist in the Player Builder

The visual playlist can be turned off on the embed level by setting visualplaylist to false within the configuration setup. (This setting is true by default).

 

Customizing the Visual Playlist

For more information about customizing the Visual Playlist, check out our CSS Skinning Reference.

Did you find this article helpful?

Please log in to rate this article.