LongTail Video is now JW Player - New Name, Same Passion For Video

Close

JW Player Support Documentation

Working with Playlists

The playlist is a powerful feature of JW Player 6 that can be used to load multiple pieces of content into a single player. It can also be used to load multiple quality levels for each piece of content. The playlist can be displayed as a listbar next to the video window.

The playlist is defined as part of the jwplayer().setup() call. See Embedding JW Player for more info on embedding the player. Instead of inline, the playlist can also be defined in an external RSS feed. See Loading RSS Feeds for more info.

Playlist Structure

The structure of playlists in JW Player contains several layers:

  • The playlist itself contains one or more playlist items.
  • An item contains all properties for a single piece of content (e.g. its title or image).
  • Two of these properties, sources and tracks, in turn contain additional info, respectively on the media sources to load and the text tracks (closed captions, tooltip thumbnails) to load.

Here is a quick example setup with a playlist containing one item with one media source and one text track:.

jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/sintel.jpg",
        sources: [{ 
          file: "/assets/sintel.mp4"
        }],
        title: "Sintel Movie Trailer",
        tracks: [{
          file: "/assets/captions.vtt"
        }]
    }]
});

Item

The following item properties are recognized and used by JW Player:

title
Title of the item. It is displayed inside the play icon before playback starts, plus in the listbar.
description
Short description of the item. It is displayed in the listbar.
mediaid
Unique identifier of this item. Used by advertising, analytics and discovery services.
image
Poster image representing the item. Displayed before and after playback, plus in the listbar.
sources
Array with one or more media sources for this playlist item. See below.
tracks
Array with one or more text tracks for this playlist item. Text tracks can contain Closed Captions, Tooltip Thumbnails, or Chapter Markers.

One more item property is available: file. This property acts as a shortcut to the file of the first entry in the sources array.

Sources

The following source properties are recognized and used by JW Player:

file
URL of the media source. Is required.
label
Label of the media source, displayed in the manual HD selection menu. Set this if you have multiple qualities of your video. See below for more info.
"default"
Set this to true for the media source you want to play on startup. If this isn't set for any source, the first one is used. Note the option should be placed in quotes because "default" is a reserved JavaScript keyword in IE8.
type
Media type of the source. Can be mp4, flv, webm, aac, mp3, vorbis, hls, rtmp or youtube. Is only needed when the file property does not contain a recognized file extensions(like .mp4 for mp4). See Supported Media Formats for more info.

Tracks

The following text track properties are recognized and used by JW Player:

file
URL of the text track VTT file. Is required.
kind
The kind of text track. Possible values are captions (the default) and thumbnails. See the Closed Captions and Tooltip Thumbnails guides for more info.
label
Label of the text track.Is only used for captions, where the label is displayed in the CC selection menu. Very useful if you have multiple captions tracks.
"default"
Only for captions. Set this to true if you want the track to display by default. If no default is set, captions are not shown on startup. Note the option should be placed in quotes because "default" is a reserved JavaScript keyword in IE8.

Playlist Examples

Take a look at a few examples of playlists below. These only show the contents of the setup() code block. See Embedding JW Player on how to set the script library and container element.

Setting Multiple Items

This setup contains two playlist items, each with a title, image and single media source. This source is loaded through the file shortcut:

jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/sintel.jpg",
        file: "/assets/sintel.mp4",
        title: "Sintel Movie Trailer"
    },{
        image: "/assets/bunny.jpg",
        file: "/assets/bunny.mp4",
        title: "Big Buck Bunny Movie Trailer"
    }]
});

JW Player will play these videos sequentially, displaying prev/next buttons in the controlbar to quickly jump from one item to the other. Alternatively, the listbar can be shown next to the video display for easy playlist browsing.

Setting Multiple Sources

This setup has one item in the playlist with two sources. Both are MP4, but one is 640x360 pixels (SD) and the other is 1280x720 pixels (HD):

jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/sintel.jpg",
        sources: [
            { file: "/assets/sintel.mp4", label: "360p" },
            { file: "/assets/sintel-hd.mp4", label: "720p HD" }
        ],
        title: "Sintel Movie Trailer"
    }]
});

On desktop browsers, JW Player 6 will now display a quality selection menu in the controlbar, allowing viewers to toggle between "360p" and "720p" quality. On mobile devices, JW Player 6 will load the first source.

Two notes on multiple sources:

  • Multiple sources can also be used to load multiple file formats (e.g. RTMP+MP4 or WebM+MP4). JW Player will detect the formats and automatically load the correct player (Flash or HTML5). Even multiple formats + multiple qualities are possible (e.g. MP4 SD/HD + WebM SD/HD).
  • Multiple HLS streams and multiple RTMP streams are not supported. Adaptive HLS and dynamic RTMP streams always require an additional manifest file, loaded as a single source.

Displaying the Listbar

The playlist sidebar of JW Player

The playlist can be displayed in a bar on the side of the video window, using the listbar configuration block. This allows users to scroll through it and play specific items. The configuration block has the following properties:

position
Position of the listbar relative to the video display. Can be bottom (below the display), none (no bar; the default) or right (to the right of the display).
size
Width (if position is right) or height (if position is bottom) of the listbar. This is basically the amount of pixels the bar "steals" from the video window. Is 180 by default.
layout
Use basic to remove thumbnails and descriptions and only display the titles of the media in the playlist.

Here is an example setup with a listbar that's positioned to the right of the video:

jwplayer("myElement").setup({
    playlist: "http://example.com/playlist.rss",
    height: 360,
    listbar: {
        position: 'right',
        size: 320
    },
    width: 960
});

Still don't have the new JW Player? Get It Here