Question

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

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

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

第一个视频是通过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

我走了另一种方法的路线。

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

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

1 个答案: