在屏幕外暂停嵌入 Vimeo 视频

如何解决在屏幕外暂停嵌入 Vimeo 视频

我正在构建一个网站组合，其中将包含几个嵌入的 vimeo 视频。为了让它运行得更快，我正在考虑暂停所有没有出现在屏幕上的视频。我从我发现的一些例子中制作了这段代码，但我只能在视频的一部分离开屏幕时立即暂停视频，我只想在视频完全离开屏幕时暂停它。我不仅要暂停那些在视口之前的人，还要暂停那些在视口之后的人（这两个类别无论如何都是不可见的）。

我认为一种方法是将玩家高度添加到其最高值并检查它是否超出视口。因此，我尝试使用从 player documentation here 获得的方法 .getVideoHeight() 但我收到错误消息，指出这不是一个已定义的函数。

你能帮我理解如何修改代码来实现这一点吗？

顺便说一句，您认为暂停视频是否真的有助于减少页面负载（这是我的猜测，所以我不确定它是否真的有用）

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;
    //I got an error on this log
    //console.log("this should be player " + i + " height: " + players[i].getVideoHeight());
    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);
    }
  }
});

body {
  height:5000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<div class="inner">
<iframe id="video" src="https://player.vimeo.com/video/10985679?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0&muted=1&autopause=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

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

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

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