Playlist Examples

These examples demonstrate different playlist layout modes. The playlist can automatically adjust based on available space, be positioned on the right side, or displayed at the bottom of the player.

Auto-Play Behavior

By default, playlists automatically advance to the next video when the previous one finishes. You can disable this behavior by setting playlistAutoGoNext: false in the player options.

Auto Mode (Default)

The default playlist layout automatically detects the best position based on available space - typically displays on the right for desktop and at the bottom for mobile devices.

Setup Code

const playlist = [
  {
    id: 'video-1',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
  },
  {
    id: 'video-2',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Elephants Dream',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Elephants_Dream_s5_both.jpg/1200px-Elephants_Dream_s5_both.jpg'
  }
];

const options = {};

// Note: Auto mode is the default, it detects the best layout based on available space
player.setup(playlist, options);

Right Sidebar Mode

Forces the playlist to display on the right side of the player.

Setup Code

const playlist = [
  {
    id: 'video-1',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
  },
  {
    id: 'video-2',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Elephants Dream',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Elephants_Dream_s5_both.jpg/1200px-Elephants_Dream_s5_both.jpg'
  }
];

const options = {
  playlistmode: 'right', // Force playlist to right side
};

player.setup(playlist, options);

Bottom Mode

Forces the playlist to display below the player.

Setup Code

const playlist = [
  {
    id: 'video-1',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
  },
  {
    id: 'video-2',
    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'application/x-mpegURL',
    title: 'Elephants Dream',
    poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Elephants_Dream_s5_both.jpg/1200px-Elephants_Dream_s5_both.jpg'
  }
];

const options = {
  playlistmode: 'bottom', // Force playlist to bottom
};

player.setup(playlist, options);