Developer Guide Javascript API Reference Developer Tools Release Notes

Loading New Playlists

Click on a button to choose a playlist and load it into the player!

github
let playlists = [
  'iLwfYW2S',
  'pVI22mfa',
  '8TbJTFy5',
  [
    'RDn7eg0o',
    'tkM1zvBq',
    'i3q4gcBi'
  ]
];

const apiUrl = mediaid => `https://cdn.jwplayer.com/v2/media/${mediaid}`;

playlists = playlists.map(playlist => {
  if (typeof playlist === 'string') {
    return apiUrl(playlist);
  }

  // To build a complete playlist, this demo fetches the full JW Delivery API
  // responses for each media id.
  const fetches = playlist.map(item => fetch(apiUrl(item)).then(r => r.json()));
  return Promise.all(fetches).then(media => media.flatMap(m => m.playlist));
});

Promise.all(playlists).then(playlists => {
  const select = document.getElementById('playlist-picker');

  const playerInstance = jwplayer('player').setup({
    playlist: playlists[0]
  });

  select.addEventListener('change', () => {
    playerInstance.load(playlists[select.selectedIndex]);
  });
});

/*
  A simpler approach would only need to be an array
  of objects containing a `file` property, like this:

    [
      { file: https://cdn.jwplayer.com/manifests/RDn7eg0o.m3u8 },
      { file: https://cdn.jwplayer.com/manifests/tkM1zvBq.m3u8 },
      { file: https://cdn.jwplayer.com/manifests/i3q4gcBi.m3u8 }
    ]

  The main benefit to fetching the sources is that we get all of the other
  information provided by JW Platform like poster images, thumbnails, captions,
  and sources.
*/
This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.