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: falsePlaylist index on state change is: 0Video Unstarted done is: false Playlist index on state change is: 0 Video Bufferingdone is: false Playlist index on state change is: 0 Video Playing done is: true Playlist index on state change is: 0 Video Bufferingdone is: true Playlist index on state change is: 0 Video Playing done is: true Playlist index on state change is: 0Video Pauseddone is: true Playlist index on state change is: 0Video endedThe 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: falsePlaylist index on state change is: 1Video Playingdone is: truePlaylist index on state change is: 1Video Pauseddone is: truePlaylist index on state change is: 1Video endeddone is: falsePlaylist index on state change is: 2Video Unstarteddone is: falsePlaylist index on state change is: 2done is: falsePlaylist index on state change is: 2Video Unstarteddone is: falsePlaylist index on state change is: 2Video Bufferingdone is: falsePlaylist index on state change is: 2Video Unstarteddone is: falsePlaylist index on state change is: 2Video Bufferingdone is: falsePlaylist index on state change is: 2Video Playingdone is: truePlaylist index on state change is: 2Video Bufferingdone is: truePlaylist index on state change is: 2Video Playingdone is: truePlaylist index on state change is: 2Video Pauseddone is: truePlaylist index on state change is: 2Video endeddone is: falsePlaylist index on state change is: 3Video Playingdone is: truePlaylist index on state change is: 3Video Pauseddone is: truePlaylist index on state change is: 3Video endeddone is: falsePlaylist index on state change is: 3Video Unstarteddone is: falsePlaylist index on state change is: 3done is: falsePlaylist index on state change is: 3Video Unstarteddone is: falsePlaylist index on state change is: 3Video Bufferingdone is: falsePlaylist index on state change is: 3Video Playingdone is: truePlaylist index on state change is: 3Video Bufferingdone is: truePlaylist index on state change is: 3Video Playingdone is: truePlaylist index on state change is: 3Video Pauseddone is: truePlaylist index on state change is: 3Video endeddone is: falsePlaylist index on state change is: 3Video Playingdone is: truePlaylist index on state change is: 3Video Pauseddone is: truePlaylist index on state change is: 3Video endedapp.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();}
