Vimeo queuing videos ‘finish’ событие прекращает запуск после 2-го API загруженного видео

Пример, показывающий проблему:
http://codepen.io/anon/pen/dXbBLZ

воспроизведение, а затем быстрая перемотка видео, перетащив ползунок в конец и повторите, чтобы увидеть, что он не загружает окончательное видео:
https://player.vimeo.com/video/166807261

Я пытаюсь последовательно воспроизводить видео с помощью Vimeo, как только видео заканчивается, оно должно загрузить следующее. Однако событие finish прекращает стрельбу после воспроизведения 3-го видео.

1-е видео загружается через 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++;
    }
}

1 ответ

  1. Я пошел по пути альтернативного подхода.

    1. Просто удалите iframe
    2. Визуализация нового 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]);
    });