Google Developers Academy

Generating a List of Chapter Markers

Learning objectives
  • Define an Object that maps time codes in a video to chapter titles.
  • Sort the entries in the map chronologically.
  • Use the map to create a list of clickable chapter markers.

The chapter marker list is a clickable navigation guide that lets viewers jump to any of the predefined sections of a video.

Define a mapping of timestamps to chapter titles

The chapters property of the parameter passed in to the ChapterMarkerPlayer.insert() method defines a map of time codes in the video to chapter titles. The time code is expressed as the elapsed time, in seconds, from the start of the video. The chapter title can be any string.

ChapterMarkerPlayer.insert({
  ...
  chapters: {
    0: 'Start',
    5: 'Introductions',
    26: 'Agenda',
    252: '<iframe> Tech Details',
    1040: 'Comparing the Two APIs',
    1670: 'Example Application',
    2662: 'Questions & Answers'
  }
});

Sort the time codes chronologically

The chapter markers would not be very useful if they were displayed in a seemingly random order, so it is important to sort them chronologically.

var times = [];
for (var time in params.chapters) {
  if (params.chapters.hasOwnProperty(time)) {
    times.push(time);
  }
}
// Sort the times numerically for display purposes.
// See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort#Examples
times.sort(function(a,b) {
  return a - b;
});

Create a list of chapter markers

The code iterates through the sorted time codes to create a chapter list as an ordered list (<ol>) where each chapter is a list item (<li>).

It then attaches an onclick handler to each <li> element. The handler calls the YT.Player.seekTo() method with the appropriate value.

Finally, the code inserts the list into the appropriate container HTML element beneath the corresponding player.

// Adds a sorted list of chapters below the player. Each chapter has an onclick handler that
// calls the iframe player API to seek to a specific time in the video.
// This is a private method that isn't exposed via the ChapterMarkerPlayer namespace.
function addChapterMarkers(containerElement, player) {
  var ol = document.createElement('ol');
  ol.setAttribute('class', 'chapter-list');
  ol.setAttribute('style', 'width: ' + width + 'px');
  containerElement.appendChild(ol);

  for (var i = 0; i < times.length; i++) {
    var time = times[i];
    var chapterTitle = params.chapters[time];

    var li = document.createElement('li');
    li.setAttribute('data-time', time);
    li.textContent = formatTimestamp(time) + ': ' + chapterTitle;
    li.onclick = function() {
      // 'this' will refer to the element that was clicked.
      player.seekTo(this.getAttribute('data-time'));
    };
    ol.appendChild(li);
  }
}

The following code transforms the time code into a string in #h##m##s format (e.g. 1h04m15s).

// Takes a number of seconds and returns a #h##m##s string.
function formatTimestamp(timestamp) {
  var hours = Math.floor(timestamp / 3600);
  var minutes = Math.floor((timestamp - (hours * 3600)) / 60);
  var seconds = timestamp % 60;

  var formattedTimestamp = (seconds < 10 ? '0' : '') + seconds + 's';
  if (minutes > 0) {
    formattedTimestamp = (minutes < 10 ? '0' : '') + minutes + 'm' + formattedTimestamp;
  }
  if (hours > 0) {
    formattedTimestamp = hours + 'h' + formattedTimestamp;
  }

  return formattedTimestamp;
}

Try it out

View Full Source Code

Live Demo

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.