Question

I am trying to use the YouTube API to detect when a video ends and then to call a JS function I have to then load another one. The call function is in another JS document which is in the head of my HTML document.
This is the code I have so far from the API site but I am really confused with it.

<pre><code> <script>




var ytfullplayer;
    function onYouTubePlayerAPIReady() {
        console.log('onYouTubePlayerAPIReady');
        ytfullplayer = new YT.Player('myVid', {
            events: {

              if ''onStateChange': getVideo

            }
        });

    }
    function getVideo(); }


</script> </code> </pre>

I have called the youtube api in the head of my page. But I am not 100% sure if it goes there.
Any assistance would be nice.
I am using an for my youtube video.

Cheers
Matt

Answer 1

The API provides an example of what you’re attempting beneath Subscribing to Events:

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

Bind your custom function as the handler to the “onStateChange” event, and evaluate the new state from within. According to the Events portion of the API, you’re looking for state 0, indicating the video has ended.

function onytplayerStateChange(newState) {
   if ( newState == 0 ) {
     /* load next video */
  }
}