How to switch the video to the next one by clicking on the button?

Question

YouTube

I found on the Internet an example of a script that does what I need, namely the creation of a playlist of videos with the start and end times of each video.
I'm trying to expand the functionality and add a button to switch the video. I also googled an example where switching to the next and previous videos is implemented, but there the playlist is created when the player is initialized with the following parameter:
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
Masters, tell me how to implement such functionality with my example of creating a playlist.
I believe that when you click on a block with id="next" the iteration counter should change and the playback status should be updated somehow, but meager knowledge does not even allow you to adapt the almost finished code to your needs...

<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>

Answer 1

Might come in handy
dulsky.eu/t/