Making a playlist with player APIs

The main function used here is loadVideo(otp: string, playbackInfo: string). This function allows you to load a new video without rebuilding a new player. Since it uses the existing video element, there is no need for a user gesture.

The loadVideo method also works with fullscreen. If the player is in fullscreen mode when one video ends, the new video will also be in fullscreen mode.

caution

To make use of this function, it is recommended to have Fairplay DRM enabled on your account. This is because the alternative playback for iOS browsers does not work with loadVideo() without user gesture. Without fairplay, it will be required to click the play button when a new video loads.

index.html
script.js

<html lang="en">
  <head>
    <title>Playlist</title>
    <style>
      main {
        font-family: 'Helvetica Neue', Ubuntu, Arial, sans-serif;
      }
      #playlist-container li {
        cursor: pointer;
        background-color: #f9f9f9;
        padding: 5px 15px;
      }
      #playlist-container li.active {
        list-style-type: disclosure-closed;
      }
      #playlist-container li:hover {
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <main>
      <iframe
        src=""
        id="vdo-ifr"
        allow="encrypted-media"
        allowfullscreen
        style="
          border: 1px solid #ccc;
          aspect-ratio: 16 / 9;
          width: 100%;
          max-width: 640px;
        "
      ></iframe>
      <h4>Playlist</h4>
      <ul id="playlist-container"></ul>
    </main>
    <script src="https://player.vdocipher.com/v2/api.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

const list = [
  {
    title: 'Agent 327 Operation Barbershop',
    otp: '20160313versUSE313N1G88kQEcVMW4x7TdPWWQsweYMamUddmwpBVOPR75bT8ug',
    playbackInfo:
      'eyJ2aWRlb0lkIjoiNjMzMWI2NGJiZTNkNDQ4YmI0ZDUyYzMyOTM5NmMzNDYifQ==',
  },
  {
    title: 'The Daily Dweebs',
    otp: '20160313versUSE313UY85UDRut9VS2GaxDgtH6iBLsBL26rpRNyeBdfdMvV7kLQ',
    playbackInfo:
      'eyJ2aWRlb0lkIjoiZmZlNzNkOTI3NDQ3NDFjMDg0YjU3YWQ0YzEwMmQyNTcifQ==',
  },
  {
    title: 'Tears Of Steel',
    otp: '20160313versUSE313aVgxVD6cHW79iQKP03H38947qaaCLNmU46Pse5dOsUJMj1',
    playbackInfo:
      'eyJ2aWRlb0lkIjoiMTE3MGZjNDFlNTVlNDM2N2FmMGI4ZTE3NzRhNjA3Y2QifQ==',
  },
  {
    title: 'Big Buck Bunny',
    otp: '20160313versUSE313SdDs5XSxnEUGDqJyPnJUwsiDdjsaqzDUVt6JRgZvcSr3rr',
    playbackInfo:
      'eyJ2aWRlb0lkIjoiYmYzOGVhYTUxODMzNGRlZWFhM2MxYzVlYzJiOTRlYmYifQ==',
  },
];

let currentIndex = 0;
const ifr = document.querySelector('#vdo-ifr');

// adding the first video
const {otp, playbackInfo} = list[0];
ifr.src = `https://player.vdocipher.com/v2/?otp=${otp}&playbackInfo=${playbackInfo}`;

const player = VdoPlayer.getInstance(ifr);

function loadVideoAtIndex(index) {
  const {otp, playbackInfo} = list[index];
  player.api.loadVideo({otp, playbackInfo});
  document.querySelectorAll('li').forEach((l) => l.classList.remove('active'));
  document.querySelector('li#id' + index).classList.add('active');
}

player.video.addEventListener('ended', () => {
  currentIndex = currentIndex + 1;
  if (currentIndex >= list.length) currentIndex = 0;
  loadVideoAtIndex(currentIndex);
});

const listContainer = document.querySelector('#playlist-container');

list.forEach(({title}, index) => {
  const li = document.createElement('li');
  li.innerText = title;
  li.setAttribute('id', 'id' + index);
  li.addEventListener('click', () => loadVideoAtIndex(index));
  if (index === 0) li.classList.add('active');
  listContainer.appendChild(li);
});

Result