Как переключить ролик на следующий по клику на кнопку?

Question

moskwin68 @moskwin68

Как переключить ролик на следующий по клику на кнопку?

Нашел на просторах интернета пример скрипта, делающего то, что мне необходимо, а именно содание плейлиста из роликов с указанием времени начала и конца каждого видео.
Пытаюсь расширить функционал и добавить кнопку для переключения ролика. Так же нагуглил пример где реализуется переключение на следующий и предыдущие ролики, но там плейлист создается при инициализации плеера параметром таким:
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
Мастера, подскажите как реализовать такой функционал с моим примером создания плейлиста.
Я полагаю, что при клике на блоке с id="next" должен меняться счетчик итераций и как-то обновляться статус проигрывания, но скудные знания не позволяют даже адаптировать почти готовый код под свои нужды...

<div id="ytplayer"></div>
<div class="buttons">
  <div class="button" id="play-button">
    Play
  </div>
  <div class="button" id="pause-button">
    Pause
  </div>
  <div id="next" onclick="">След.</div>
</div>

<div id="console-log"></div>

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var i = 0;
var videoId_arr = ['-cgaY0okV8g', '-cgaY0okV8g', 'kMMXB7pmH44'];
var startSeconds_arr = [63,224,129];
var endSeconds_arr = [108,267,147];

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;

var playerConfig = {
  height: '360',
  width: '640',
  videoId: videoId_arr[i],
  playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 1, // Show pause/play buttons in player
    showinfo: 1, // Hide the video title
    modestbranding: 0, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds_arr[i],
    end: endSeconds_arr[i],
    autohide: 0, // Hide video controls when playing
  },
  events: {
    'onStateChange': onStateChange,
    'onReady': onPlayerReady
  }
};
function onYouTubePlayerAPIReady() {
	player = new YT.Player('ytplayer', playerConfig);
}
/**/
function onPlayerReady(event) {
  
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });
  
  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  }); 
}
 /**/ 

function onStateChange(state) {

	var _video_url = state.target.getVideoUrl();
	var _video_id = _video_url.split('v=')[1];
	var _current_index = videoId_arr.indexOf(_video_id) +1; 
        var _end_play_time = player.getCurrentTime();

	var el = document.querySelector('#console-log');
        var newEl = document.createElement('p');
        var log_context = 'current_index: '+_current_index+' video_id: '+_video_id
    	
    if (state.data === YT.PlayerState.ENDED && _end_play_time >= endSeconds_arr[i]) {
		
        newEl.innerHTML = log_context+' state: ENDED'+' end-play-time:'+_end_play_time;
		el.insertBefore(newEl, el.childNodes[0] || null)
        
        console.log('State: ', _video_id, _current_index, 
    		    player.getCurrentTime(),  
                    startSeconds_arr[i], 
                    endSeconds_arr[i], 
                    (endSeconds_arr[i] - startSeconds_arr[i]),
                    state );

		i++;
		if(typeof videoId_arr[i] === 'undefined'){
			i = 0;
            return;
        }
        
        player.loadVideoById({
			videoId: videoId_arr[i],
			startSeconds: startSeconds_arr[i],
			endSeconds: endSeconds_arr[i]
        });
  } else {
  	newEl.innerHTML = log_context+' state: '+state.data;
	el.insertBefore(newEl, el.childNodes[0] || null)
   
	console.log('State: ', _video_id, _current_index, state );
  }
}
</script>