MC playlist

Note

The multi-controller (MC) playlist API is experimental.

The multi-controller (MC) playlist reduces zap time when switching between live TV channels. It creates a dedicated player instance per playlist item behind the scenes, so neighboring channels are preloaded and ready before you switch to them.

Configure for fast switching

To get the best zap time, configure buffering to match your segment length: set rebufferingGoal and bufferingGoal below the segment duration.

player.open({
  source: {
    url: "https://.../index.mpd",
  },
  streaming: {
    // For 2-second segments, set both goals below 2 seconds
    rebufferingGoal: 1,
    bufferingGoal: 1,
    startAtSegmentBoundary: true,
    ignoreDrift: true,
  },
});

For DRM-protected streams, install the PersistentLicenseComponent and assign an offlineId to each protected stream — see Persistent DRM licenses. Browser support for persistent licenses is limited, so this helps only on some platforms.

import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.hls";
import "@castlabs/prestoplay/cl.dash";
import "@castlabs/prestoplay/cl.persistent";

player.open({
  source: {
    url: "https://.../index.mpd",
  },
  drm: {
    env: "...",
    customData: { /* ... */ },
    offlineId: "drm-session-4fb0b23a50101171ec90656", // unique ID for local storage
  },
});

Create the playlist

Pass the Castlabs license and viewer ID through config:

const playlist = new clpp.playlist.McPlaylist({
  anchorId: "video-anchor",
  config: {
    license: "<your_license_key>",
    viewerId: "<user_id>",
  },
  // preloadMedia: true,
  // autoplayNext: true,
});

• autoplayNext starts the next item automatically when playback ends. It’s intended for VOD content.

• preloadMedia prebuffers upcoming items to reduce transition time. It’s intended for VOD content.

Set items and navigate

Set the playlist items and starting index, then navigate between them with playFirst(), playNext(), and playPrev(). Listen for update to react to state changes, such as an item finishing preload.

const playlist = new clpp.playlist.McPlaylist({ anchorId: "video-anchor" });

playlist.setItems([
  {
    source: { url: "https://.../Manifest.mpd" },
    autoplay: true,
  },
  {
    source: { url: "https://.../index.mpd" },
    autoplay: true,
  },
]);
playlist.setIndex(0);

playlist.on("update", () => {
  const canPlayNext = playlist.hasNext();
  const canPlayPrev = playlist.hasPrev();
});
playlist.on("error", (error) => {
  console.error("Playlist error", error);
});

await playlist.playNext();

Each item exposes its player and preload state through playlist.getCurrent(), getNext(), and getPrev(), and the currently active player through playlist.getCurrentPlayer(). Call playlist.destroy() to release all players when you’re done with the playlist.

Next topic: SC playlist

Previous topic: Playlist