CODEWITHSUNDEEP
javascriptvimeovimeo-api
Jack
Jack

Reputation: 15872

Vimeo queuing videos 'finish' event stops firing after 2nd API loaded video

Example showing the issue: http://codepen.io/anon/pen/dXbBLZ

play, and then fast forward the video by dragging the slider to the end and repeat, see that it doesn't load the final video: https://player.vimeo.com/video/166807261

I'm trying to sequentially play videos using Vimeo, once a video finishes it should load the next. However the finish event stops firing after the 3rd video has been played.

The 1st video is loaded via the iframe src:

<iframe src="https://player.vimeo.com/video/76979871?api=1&player_id=player1"...>

Following videos are loaded via the API.

var index = 0;
var videos = ['167054481', '164479194', '166807261'];

...

function onFinish() {
    if(index < videos.length) {
      player.api('loadVideo', videos[index]);
      index++;
    }
}

Upvotes: 0

Views: 307

Answers (1)

Jack
Jack

Reputation: 15872

I've gone down the route of an alternative approach.

  1. Simply delete the iframe
  2. Render a new iframe with the next video's ID
  3. Re-attach the event handlers after the iframe has loaded.

http://codepen.io/anon/pen/KMKKZY

$(function() {

  var index = 0;
  var videos = ['167054481', '164479194', '166807261'];

  function addFrame(videoID) {
    $("#player1").remove();

    var iframe = $('<iframe></iframe>')
      .attr({
        "src": "http://player.vimeo.com/video/" + videoID + "?api=1&player_id=player1",
        "id": "player1",
        "frameborder": "0",
        "webkitallowfullscreen": "",
        "mozallowfullscreen": "",
        "allowfullscreen": ""
      });

    $(".frame-container").append(iframe);

    iframe.load(function() {
      var player = $f(iframe[0]);

      function addEvents() {
        player.addEvent('ready', function() {
          player.addEvent('finish', onFinish);
        });
      }

      function onFinish() {
        if (index < videos.length) {
          index++;
          addFrame(videos[index]);
        }
      }
      addEvents();

      player.api('play');
    });

  }

  addFrame(videos[index]);
});

Upvotes: 1

Related Questions