Vimeo 排队视频"完成"事件在第二个 API 加载视频后停止触发

Question

显示问题的示例：http://codepen.io/anon/pen/dXbBLZ

播放，然后通过将滑块拖动到末尾并重复快进视频，查看它不会加载最终视频：https://player.vimeo.com/video/166807261

我正在尝试使用 Vimeo 按顺序播放视频，一旦视频完成，它应该加载下一个视频。但是，在播放第三个视频后，完成事件将停止触发。

第一个视频通过 iframe src 加载：

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

以下视频通过 API 加载。

var index = 0;
var videos = ['167054481', '164479194', '166807261'];
...
function onFinish() {
    if(index < videos.length) {
      player.api('loadVideo', videos[index]);
      index++;
    }
}

Answer 1

我已经走上了另一种方法的道路。

1. 只需删除内嵌框架
2. 使用下一个视频的 ID 渲染新的 iframe
3. 加载 iframe 后重新附加事件处理程序。

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]);
});