Creating a Playlist

Websites often need to play multiple videos in succession. In order to do so, publishers use what’s known as a playlist. The JW Player comes built with a Flash playlist, which you can configure to suit your needs.

In this tutorial you will learn how to:

Choose a Playlist Format
Populate a Playlist With Videos
Configure the JW Player to Load Your Playlist the Way You Want

Step 1: Choose a Playlist Format

Select the type of playlist format you plan to use. The following playlist formats are supported by the JW Player for Flash:

ASX feeds (example)
ATOM feeds with Media extensions (example)
RSS feeds with iTunes and with Media extensions (irss example and mrss example)
Basic SMIL feeds (example)
XSPF feeds (example)

In this tutorial, we are going to work with a XSPF feed.

Step 2: Populate Your Playlist with Videos

After you have selected what type of playlist you want to use, you need to populate it with videos.

Below, you will find a properly formatted example of a playlist.

	<playlist version="1" xmlns="http://xspf.org/ns/0/">
   <title>Example XSPF playlist for the JW Player</title>
   <info>http://developer.longtailvideo.com/trac</info>
   <tracklist>
      <track>
         <title>The First Video</title>
         <creator>LongTail Video</creator>
         <info>http://www.longtailvideo.com/</info>
         <annotation>The first video that will appear in the playlist.</annotation>
         <location>http://developer.longtailvideo.com/files/firstvideo.flv</location>
      </track>
      <track>
         <title>The Second Video</title>
         <creator>LongTail Video</creator>
         <info>http://www.longtailvideo.com/</info>
         <annotation>The second video that will appear in the playlist.</annotation>
         <location>http://developer.longtailvideo.com/files/secondvideo.flv</location>
      </track>
      <track>
         <title>The Third Video</title>
         <creator>LongTail Video</creator>
         <info>http://www.longtailvideo.com/</info>
         <annotation>The third video that will appear in the playlist.</annotation>
         <location>http://developer.longtailvideo.com/files/thirdvideo.flv</location>
      </track>
   </tracklist>
</playlist>

You will notice that each piece of content in your playlist is represented by the track element, expressed as <track>. Each track element contains additional elements that define the metadata for each piece of content. They are:

title: The title of the track.
creator: The creator of this piece of content.
info: A URL that links to the original source of the content.
annotation: A short description of the track.
location: The actual location of the piece of content.

Step 3: JW Player Namespace

In order to enable all JW Player file properties for all feed formats, the 4.4 player introduced a jwplayer namespace. By inserting this into your feed, file properties that are not supported by the feed format itself (such as the provider or duration in an RSS feed) can be amended without breaking validation. Any FlashVar can be inserted into the playlist letting you customize the player on a per-playlist-item basis. However, some configuration options are loaded by the player only once.

Using our example from before:

	<playlist version="1" xmlns="http://xspf.org/ns/0/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
   <title>Example XSPF playlist for the JW Player</title> 
   <info>http://developer.longtailvideo.com/trac</info>
   <tracklist>
      <track>
         <title>The First Video</title> 
         <creator>LongTail Video</creator>
         <info>http://www.longtailvideo.com/</info>
         <annotation>The first video that will appear in the playlist.</annotation>
         <location>http://developer.longtailvideo.com/files/firstvideo.flv</location>
         <jwplayer:author>the Peach Open Movie Project</jwplayer:author>
         <jwplayer:provider>http</jwplayer:provider>
         <jwplayer:duration>34</jwplayer:duration>
      </track> 
      ...
   </tracklist>
</playlist>

Pay attention to the top-level tag, which describes the JW Player namespace with the xmlns attribute. This must be available in order to ensure that the feed remains valid.

You can mix jwplayer elements with both the regular elements of a feed and elements from other extensions (mrss/itunes).

Step 4: Configure the JW Player to Load Your Playlist the Way You Want

The JW Player's playlist support is highly configurable: you can edit the appearance of your playlist, how it is attached to the player, and how the player behaves when reading the playlist. To help you do this the JW Player makes several FlashVars available to you. They are as follows:

file (JW4) / playlistfile (JW5) (undefined): Location of an XML playlist that will be loaded as the player starts.
- Note: Adobe Flash Player security restrictions require that all files in your playlist come from the same domain unless you put a cross-domain policy file on the root of the server that is serving the data files. For more information about cross-domain security restrictions see our Flash Security tutorial.
playlist (bottom): Position of the playlist. Can be set to bottom, over, right or none.
playlistsize (180): When set to below this refers to the height; when set to right this refers to the width of the playlist.
repeat (none): Set to list to play the entire playlist once; set to always to continously play the song/video/playlist; set to single to continue repeating the selected file in a playlist.
item (0): Playlist item that should start to play. Use this to set a specific start item.

Example Player Configurations using Playlists

For more information about how to embed Flash, see our Embedding Flash tutorial.

Object / Embed

	<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='file=playlist.xml'>
   <embed id='player1'
          name='player1'
          src='player.swf'
          width='300'
          height='300'
          allowscriptaccess='always'
          allowfullscreen='true'
          flashvars="file=playlist.xml&playlist=bottom&playlistsize=180"
   />
</object>

SWF Object 1.5

	<script type="text/javascript">
   var so = new SWFObject('player.swf','flashContent','300','250','9');
   so.addParam('allowfullscreen','true');
   so.addParam('allowscriptaccess','always');
   so.addParam('bgcolor','#FFFFFF');
   so.addParam('flashvars','file=playlist.xml&playlist=bottom&playlistsize=180');
   so.write('flashbanner');
</script>

SWFObject 2.X

	<script type="text/javascript">
   var flashvars = {
      'file':                'playlist.xml',
      'playlist':            'bottom',
      'playlistsize':        '180'
   };
   var params = {
      'allowfullscreen':     'true',
      'allowscriptaccess':   'always',
      'bgcolor':             '#ffffff'
   };
   var attributes = {
      'id':                  'player1',
      'name':                'player1'
   };
   swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>

JW Player

Product Documentation

Developer Links

Creating a Playlist

Step 1: Choose a Playlist Format

Step 2: Populate Your Playlist with Videos

Step 3: JW Player Namespace

Step 4: Configure the JW Player to Load Your Playlist the Way You Want

Example Player Configurations using Playlists

Object / Embed

SWF Object 1.5

SWFObject 2.X

Related Documents: Create a JavaScript Playlist

JW Player

AddOns

AdSolution

Bits on the Run

Company