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

【问题标题】：Vimeo queuing videos 'finish' event stops firing after 2nd API loaded videoVimeo 排队视频“完成”事件在第二个 API 加载视频后停止触发
【发布时间】：2016-05-27 08:33:53
【问题描述】：

显示问题的示例： 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++;
    }
}

【问题讨论】：

标签： javascript vimeo vimeo-api

【解决方案1】：

我选择了另一种方法。

只需删除 iframe
使用下一个视频的 ID 渲染新 iframe
加载 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]);
});

【讨论】：