Playlist

The playlist plugin plays multiple media items back-to-back, switching automatically when each item ends. Items don’t need to share a format — a single playlist can mix HLS and MPEG-DASH sources.

Install the plugin

import "@castlabs/prestoplay/cl.playlist";

Create a playlist

Create a player, then attach a Playlist instance to it:

const player = new clpp.Player("video", {
  license: "<your_license_key>",
  viewerId: "<user_id>",
});
const playlist = new clpp.Playlist(player);

Add items

Add items with Playlist.append. Each item needs a configuration object with at least a source:

playlist.append({
  title: "Foo 1",
  configuration: {
    source: "https://demo.cf.castlabs.com/media/prestodash/Manifest.mpd",
    autoplay: true,
  },
});
playlist.append({
  title: "Foo 2",
  configuration: {
    source: "https://demo.cf.castlabs.com/media/prestodash/Manifest.mpd",
    autoplay: true,
  },
});

Start the playlist

Call playlist.start() to load the first item and register the playlist’s automatic item-switching behavior, then player.play() to start playback. start() is synchronous and doesn’t return a value — it triggers loading without waiting for it to finish, so it isn’t awaited. The playlist switches to the next item automatically when the current item ends.

playlist.start();
player.play();

Listen for changes

Listen to clpp.events.PLAYLIST_ITEM_CHANGED and clpp.events.PLAYLIST_MODIFIED to react to playlist state changes. See Playlist for the full API.

playlist.on(clpp.events.PLAYLIST_ITEM_CHANGED, () => {
  // the active item changed
});
playlist.on(clpp.events.PLAYLIST_MODIFIED, () => {
  // an item was added, removed, or reordered
});

Code sample

See the playlist sample for a complete page that mixes DASH and HLS items, adds previous and next buttons with Playlist.previous and Playlist.next, and jumps to an item with Playlist.goTo.

• MC playlist
• SC playlist

Next topic: MC playlist

Previous topic: Low latency and fast zapping