Moving through Vimeo videos with Javascript

Question

I would like to play through Vimeo videos in sequence with JavaScript with continuous playback and looping through items. The following code moves to the second video at the end of the first but the same functions are not called at the end of the second video. Only the end of the first video shows Called! in the Javascript console, not the end of the second.

The Vimeo Player SDK has player.getVideoId() but not player.setVideoId() so I used a hack to load the next video: setting the source of the iframe and starting the Vimeo player anew. I wonder if this is the problem and the listener for the end of the video is attached to the discarded player.

Another issue with this code is that it exits fullscreen to load the next video.

I attempted this CodePen that sets the Vimeo Player on any element instead of an iframe and was unable to change the played video.

What is a cleaner or effective way of changing videos with the Vimeo Player SDK?

The HTML is:

<div class="vimeo">
  <div class="resp-iframe-container container-centered">
    <iframe class="resp-iframe" scrolling="no" frameborder="no" src="https://player.vimeo.com/video/238301525" allowfullscreen="" data-ready="true"></iframe></div></div>

And the javascript is:

    var l = ["238301525",  "496371201", "238301525",  "496371201", "..."];
    window.current = 0;

    var increment = function() {
      window.current += 1;
      if (window.current == l.length) {
        window.current = 0;
      }
    };

    var decrement = function() {
      window.current -= 1;
      if (window.current < 0) {
        window.current = l.length - 1;
      }
    };

    prevA.addEventListener("click", function() {
      decrement();
      loadPlayer();
    });
    nextA.addEventListener("click", function() {
      increment();
      console.log("here!");
      loadPlayer();
      console.log("there!");
    });

    var loadPlayer = function() {
      console.log("Called!");
          
      var iframe = document.querySelector('iframe');
      iframe.src = "https://player.vimeo.com/video/" + l[window.current];
      var player = new Vimeo.Player(iframe);
      player.autoplay = true;
  
      var treatEvent = function(data, eventLabel) {
  
        // Custom code...
  
        if ("end" == eventLabel) {
          console.log("incrementing automatically");
          increment();
          loadPlayer();
        }
      };
  
      var onPlay = function(data) {
        treatEvent(data, "play");
      }
      var onPause = function(data) {
        treatEvent(data, "pause");
      }
      var onSeeked = function(data) {
        treatEvent(data, "seeked");
      }
      var onEnd = function(data) {
        treatEvent(data, "end");
      }
        
      player.on('play', onPlay);
      player.on('pause', onPause);
      player.on('seeked', onSeeked);
      player.on('ended', onEnd);

      setTimeout(function() {
        //console.log("Trying to play...");
        player.play().then(function() {
          // the video was played
          console.log("success: video played");
        }).catch(function(error) {
          console.log("Error! " + error.name);
        });
      }, 1000);
    }
    loadPlayer();

Answer 1

It seems that the Vimeo Player keeps track of whether it was initialized, adding a tag data-vimeo-initialized="true" in the HTML element.

One solution is to use the Vimeo Player SDK function .loadVideo():

var song_iframe = document.querySelector("iframe#song_video");
var song_player = new Vimeo.Player(song_iframe);

var on_song_end = function(data) {

    // Logic to get the new id.
    song_player.loadVideo(newId).then(function() {
      song_player.play();
    });
};

song_player.on("ended", on_song_end);