// Initialise player
    var brightcovePlayer;
    var prevIndex = -1;

    function handleCue() {
      if(prevIndex != -1) {
        document.getElementById("chapter_item"+prevIndex).className = "";
      }
      var currentCueIndex = getCurrentCue();
      document.getElementById("chapter_item"+currentCueIndex).className = "hilightcue";
      prevIndex = currentCueIndex;
    }

    function getCurrentCue() {
      var allCuepoints = brightcovePlayer.mediainfo.cue_points;

      // Loop through the cuepoints
      for (var i = 0; i < allCuepoints.length; i++){
        if (allCuepoints[i].type === "CODE"){
          var current = brightcovePlayer.currentTime();

          var cueCurrent = allCuepoints[i].time;
          var cueNext = (i == allCuepoints.length-1) ? brightcovePlayer.duration() : allCuepoints[i+1].time;

          if(current >= cueCurrent &&  current < cueNext) {
            return i;
          }
        }
      }
      return -1;
    }


    // When the player's ready, let's get started
    videojs("player").ready(function(){
      brightcovePlayer = this;

      // Wait until the video metadata has loaded
      brightcovePlayer.one("loadedmetadata", function(){
        // Setting up chapters
        // Get all of the cuepoints from the video
        var allCuepoints = brightcovePlayer.mediainfo.cue_points;
        // Loop through the cuepoints
        for (var i = 0; i < allCuepoints.length; i++){
            // Only use the type 1 cuepoints, which will skip the pre and post roll ones (if present)
            if (allCuepoints[i].type === "CODE"){
              // create a name li element for each cuepoint
              var name = document.createElement('name');
              name.innerText = allCuepoints[i].name;
              // assign the time of the cuepoint to the li element
              name.setAttribute('data-time', allCuepoints[i].time);
              // assign the cuepoint description as the link "title" text
              name.setAttribute('title', allCuepoints[i].metadata);
              name.onclick = function(){
                // when clicking the li element, the player will seek to that time
                brightcovePlayer.currentTime(this.getAttribute('data-time'));
              }

              // set id to each of the chapter items
              name.setAttribute("id", "chapter_item"+i);

              // add the li elements to the page
              var li = document.createElement('li');
              li.appendChild(name);
              document.getElementById('chapters').appendChild(li);
            }
        }

        var tt = brightcovePlayer.textTracks()[0];
        tt.oncuechange = function() {
          if (tt.activeCues[0] != undefined && tt.activeCues[0].text === "CODE") {
            handleCue();
          }
        }
        brightcovePlayer.on("seeked", function() {
          handleCue();
        });

      });
    });