Playlists

The playlist is a powerful feature of JW Player, used to play multiple video or audio files.

A playlist can be either a string, referring to the URL of an RSS feed or JSON file, or an array of media objects.

jwplayer("myElement").setup({
  "playlist": "http://example.com/myPlaylist.json"
});

playlist[]

Configuring Playlist as an Array

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

In addition to standard media information, (title, description, mediaid) it is also possible to insert additional metadata, using custom properties. This information must be entered inside of a playlist, and cannot be set directly inside of a setup block.

playlist[].adschedule[]

The playlist[].adschedule[] property is used for scheduling ad breaks throughout specific playlist items.

There are two options available to configure ad break schedules:

• Manual ad break array: When using ad breaks you must define at least one ad break configured inside of the adschedule property. Each ad break should include an offset and a tag or vastxml.
• VMAP: You may also load an ad schedule from an external VMAP XML (string). See advertising.schedule and the code sample below for more information.

playlist: [{   
      file: "https://cdn.jwplayer.com/manifests/Q7TuS9Y9.m3u8",
      adschedule: "https://playertest.longtailvideo.com/adtags/vmap2-nonlinear.xml"
 }]

jwplayer("myElement").setup({
  "playlist": [{
      "title": "One Media Item",
      "description": "Only One media item in a playlist!",
      "file": "myFile.mp4",
      "mediaid": "ddrx3v2",
      "image": "myImage.png",
      "adschedule": [{
          "offset": "pre",
          "tag": "myAdTag.xml"
        },
        {
          "offset": 10,
          "tag": "myMidroll.xml"
      }]
  }]
});

playlist[].sources[]

Sources are inserted into playlist objects and are lists of files. Sources serve a dual purpose, depending on the files used:

• Use different file types: Alternate "fallback" media sources
• Use the same file type: Toggle quality with static video files

Alternate Media Sources

If using different file types, sources prioritizes which file to play only in the case when a provider (HTML5, HLS, or DASH) fails to load. If there is an error with a stream, the player will not failover to the next provider. In the example below, the player will attempt to play myVideo.m3u8 as a first choice.

In the event that a browser cannot play an m3u8, the player is intelligent enough to choose myVideo.mp4 instead. In the event that an mp4 cannot be played, the player will attempt the webm format before producing an error.

jwplayer("myElement").setup({
  "playlist": [{
    "title": "One Playlist Item With Multiple Sources",
    "description": "Three Sources - One Playlist Item",
    "image": "myImage.png",
    "mediaid": "ddrx3v2",
    "sources": [{
        "file": "myVideo.m3u8"
      },{
        "file": "myVideo.mp4"
      },{
        "file": "myVideo.webm"
    }]
  }]
});

Sources with DRM

When using DRM, we highly suggest placing the drm block inside of the appropriate media source. This ensures the correct media and DRM pair gets chosen for the appropriate browser. For example:

"sources": [{
      "file": "myFairplayStream.m3u8",
      "drm": {
        "fairplay": {
          "certificateUrl": "http://myfairplay.com/fairplay/cert",
          "processSpcUrl": "http://myfairplay.com/fairplay/ckc"
        }
      }
    },{
      "file": "myWidevineStream.mpd",
      "drm": {
        "widevine": {
          "url": "http://mywidevineurl.com/drm"
          }
      }
    },{
      "file": "myPlayreadyStream.mpd",
      "drm": {
        "playready": {
          "url": "http://myplayreadyurl.com/drm"
          }
      },{
      "file": "myClearkeyStream.mpd",
      "drm": {
        "clearkey": {
          "key": "1234clear5678key",
          "keyId": "fefde00d-efde-adbf-eff1-baadf01dd11d"
          }
      }
    }]

See our drm section for more information.

Manifest and Segment Requests with Custom Headers

You can add custom headers to media XHR requests by using the onXhrOpen callback. This gets executed after XMLHTTPRequest.open() and before XMLHTTPRequest.send() for HLS manifest, key and segment requests made by the player. This is not available in Safari browsers where HLS is played natively.

jwplayer().setup({
  playlist: [{
      sources: [{
          file: 'video.m3u8',
          onXhrOpen: function(xhr, url) {
            xhr.setRequestHeader('customHeader', 'customHeaderValue');
          }
      }]
  }]
})

📘

For HLSjs playback only.

Quality Settings for Video Files

In the event that a streaming technology like HLS or DASH cannot be used, listing video files of different qualities will enable a quality selection settings menu in the player. Compared to other streaming methods, it has the following drawbacks:

• No automatic switching, based on bandwidth or download speed
• Changing qualities may cause playback stuttering

jwplayer("myElement").setup({
  playlist: [{
      title: "One Playlist Item With Multiple Qualities",
      description: "Two Qualities - One Playlist Item",
      sources: [{
          file: "myVideo-720p.mp4",
          label: "HD"
        },{
          file: "myVideo-480p.mp4",
          label: "SD"
      }]
  }]
});

playlist[].tracks[]

Tracks can be attached to media for three possible reasons: captions, thumbnails, or chapters. Thumbnail and chapter files must be in WEBVTT format. Captions accept WEBVTT and SRT format, though JW Player strongly suggests using WEBVTT if possible.

When using the playlist to load an RSS feed, these options are set in the feed. See the Adaptive streaming reference for a mapping of all playlist options to RSS format.