Skip to main content

Building a custom chapters navigation

The main function used here is player.api.getMetaData(). This function allows you to read the metadata associated with the video. The metadata includes the chapters information which is used to render the menu below the player.

const iframe = document.querySelector('iframe');
const chapterBox = document.querySelector('#chapter-box');

const player = VdoPlayer.getInstance(iframe);

(async function () {
  const meta = await player.api.getMetaData();
  meta.chapters.forEach(({title, startTime}) => {
    const chapterLine = document.createElement('li');
    chapterLine.innerText = title;
    chapterLine.addEventListener('click', () => {
      player.video.currentTime = startTime;
      player.video.play();
    });
    chapterBox.appendChild(chapterLine);
  });
})();

Result