YouTube iFrame Player API not playing second video in array

Question

I have an array (playListArray) of 3 hashes, each hash represents a YouTube clip with a youtubeID, start time and end time.

When I load the YouTube iFrame Player it successfully loads the first video clip in the array. I click on the player's play button and see the 2-second segment playing until it ends at the predefined end time. The console.logs up until this point look like this:

console

done is: false
Playlist index on state change is: 0
Video Unstarted 
done is: false 
Playlist index on state change is: 0 
Video Buffering
done is: false 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0 
Video Buffering
done is: true 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0
Video Paused
done is: true 
Playlist index on state change is: 0
Video ended

The issue I'm having is the player doesn't seem to play the second video in the array. The console does log the player's state changing i.e. 'playing', 'pausing' and 'ending' during this time, but it does so instantaneously without playing it via the player on screen. It then quickly moves onto to playing the next clip in the array. The rest of the console logs look like this:

console (continued)

done is: false
Playlist index on state change is: 1
Video Playing
done is: true
Playlist index on state change is: 1
Video Paused
done is: true
Playlist index on state change is: 1
Video ended
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Buffering
done is: true
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Paused
done is: true
Playlist index on state change is: 2
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
Video Buffering
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Buffering
done is: true
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended

app.js

loadYouTubeIframeAPI();

function loadYouTubeIframeAPI() {
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
        height: "390",
        width: "640",
        enablejsapi: 1,
        playerVars: {
            autoplay: 1,
            controls: 1,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3,
            modestbranding: 0
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

var playListArray = [
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12},
{youtubeID: "Zs5NOrYYV2s", start: 20, end: 22},
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12}
];


var playlistIndex = 0;

function onPlayerReady(event) {
    event.target.loadVideoById({
        videoId: playListArray[playlistIndex].youtubeID,
        startSeconds: playListArray[playlistIndex].start,
        endSeconds: playListArray[playlistIndex].end
    });
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    console.log("done is: " + done);
    console.log("Playlist index on state change is: " + playlistIndex);
    if (event.data == YT.PlayerState.ENDED && done == true) {
        console.log("Video ended");
        if (playlistIndex <= playListArray.length - 1) {
            event.target.loadVideoById({
                videoId: playListArray[playlistIndex].youtubeID,
                startSeconds: playListArray[playlistIndex].start,
                endSeconds: playListArray[playlistIndex].end
            });
            playlistIndex++;
        }
        done = false;
    } else if (event.data == YT.PlayerState.CUED) {
        console.log("Video Cued");
    } else if (event.data == YT.PlayerState.PLAYING) {
        console.log("Video Playing");
        done = true;
    } else if (event.data == YT.PlayerState.BUFFERING) {
        console.log("Video Buffering");
    } else if (event.data == YT.PlayerState.PAUSED) {
        console.log("Video Paused");
    } else if (event.data == YT.PlayerState.UNSTARTED) {
        console.log("Video Unstarted");
    }
}

function stopVideo() {
    player.stopVideo();
}

noogui noogui · Accepted Answer · 2018-07-03T09:02:29

Just modify this according to your specifications, Youtube IFrame Getting Started.

Here's the important parts.

 var player;
 var ctr = 0; //we create a counter to track the index of the playlist

..

//after playing the very first video, we queue a list of videos
 var done = false;  
 function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++; //increment ctr so we don't keep playing the 1st video. 
                  //Instead this will play all videos in playlist.          
        }      
  }

.. here's the complete code. Copy, Paste, Execute.

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

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

      var player;
      var ctr = 0;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          //setTimeout(stopVideo, 6000);
          done = true;
        }
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++;          
        }

      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

YouTube iFrame Player API not playing second video in array

1 Answers