Skip to main content

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.


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.

const list = [
title: 'Agent 327 Operation Barbershop',
otp: '20160313versUSE313N1G88kQEcVMW4x7TdPWWQsweYMamUddmwpBVOPR75bT8ug',
title: 'The Daily Dweebs',
otp: '20160313versUSE313UY85UDRut9VS2GaxDgtH6iBLsBL26rpRNyeBdfdMvV7kLQ',
title: 'Tears Of Steel',
otp: '20160313versUSE313aVgxVD6cHW79iQKP03H38947qaaCLNmU46Pse5dOsUJMj1',
title: 'Big Buck Bunny',
otp: '20160313versUSE313SdDs5XSxnEUGDqJyPnJUwsiDdjsaqzDUVt6JRgZvcSr3rr',

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

// adding the first video
const {otp, playbackInfo} = list[0];
ifr.src = `${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');
}'ended', () => {
currentIndex = currentIndex + 1;
if (currentIndex >= list.length) currentIndex = 0;

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');