jquery - Vimeo iFrame 在视口(viewport)外播放和暂停

Question

我正在尝试让嵌入的 Vimeo 视频在退出视口(viewport)时暂停，并允许另一个嵌入的 Vimeo 视频在进入视口(viewport)时播放。

我一直在探索各种解决方案，并发现 Froogaloop 工作得很好，但我相信是旧的 Vimeo api。

我得到了一个视频在退出时暂停的确切示例，但它使用 ID 而不是类，因此无法在多个视频上使用，并且不完全确定如何实现这一点。

Example - Jsfiddle

<div class="inner">
<iframe id="video" src="https://player.vimeo.com/video/220643186? 
autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0" width="640" 
height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen 
allowfullscreen></iframe>
</div>

Jquery:

 var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

var inner = $(".inner");
var elementPosTop = inner.position().top;
var viewportHeight = $(window).height();
$(window).on('scroll', function () {
    var scrollPos = $(window).scrollTop();
    var elementFromTop = elementPosTop - scrollPos;

    if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
        inner.addClass("active");
        player.api("play");
    } else {
        inner.removeClass("active");
        player.api("pause");
    }
});

任何帮助将不胜感激:)

Answer 1

您需要不同的播放器对象 - 每个 iframe 一个。出于性能原因，您应该在 onScroll 函数之外创建玩家列表。

var players = []
$('.inner').each(function() {
  players.push({
      player: new Vimeo.Player($(this).find("iframe").get(0)),
      top: $(this).position().top,
      status: "paused"
  })
});
var viewportHeight = $(window).height();

$(window).on('scroll', function() {
    var scrollPos = $(window).scrollTop();
    for(var i=0; i<players.length;i++) {
        var elementFromTop = players[i].top - scrollPos;
      var status = (elementFromTop > 0 && elementFromTop < players[i].top + viewportHeight) ? "play" : "pause";   
      if(players[i].status != status) {
          players[i].status = status;
          players[i].player[status]();
          console.log(i, status);      
      }
    }
});

您可以在这里测试:https://jsfiddle.net/oxf4dtn3/

注意:如果声音打开，则无法自动启动任何视频。您可以使用参数“&muted=1”将 vimeo 视频静音