使用jQuery实现视口可见时播放Iframe视频：仅首个视频生效问题排查

问题1：仅捕获到第一个视频 #

你当前通过$('.inner').each()遍历容器，但页面中只有一个.inner元素，调用$(this).find("iframe").get(0)只会获取该容器内的第一个iframe，第二个视频完全没被加入players数组，所以不会触发播放/暂停逻辑。

问题2：视口判断逻辑颠倒 #

当前代码的状态判断写反了：

// 错误逻辑：元素在视口内时暂停，在外时播放
var status = (elementFromTop > 0 && elementFromTop < players[i].top + viewportHeight) ? "pause" : "play";

实际需求是视口内播放，外暂停，逻辑需要反转。

问题3：元素位置计算不准确 #

position().top获取的是元素相对于父容器的偏移量，滚动时应该用offset().top获取元素相对于文档顶部的绝对位置，否则位置判断会出错。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="/styles/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>
  </head>
  <body>
    <div class="inner">
    <div class="container">
        <div class="innercontainer">
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
</div>
  </div>
  <div class="videocontainer">
    <div>
   <iframe id="video1" src="https://player.vimeo.com/video/757127483?background=true" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
   <iframe id="video2" src="https://player.vimeo.com/video/807516670?background=true" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
  </div>
  </div>
    </div>
    <img>
    <script src="index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
var players = []
// 直接遍历所有视频iframe，确保两个视频都被捕获
$('.videocontainer iframe').each(function() {
  players.push({
      player: new Vimeo.Player(this),
      // 用offset().top获取文档绝对位置
      top: $(this).offset().top,
      status: "paused"
  })
});
var viewportHeight = $(window).height();

$(window).on('scroll', function() {
    var scrollPos = $(window).scrollTop();
    // 视口底部位置 = 滚动距离 + 视口高度
    var viewportBottom = scrollPos + viewportHeight;
    for(var i=0; i<players.length;i++) {
        var videoTop = players[i].top;
        // 视频底部位置 = 视频顶部 + 视频高度
        var videoBottom = videoTop + $(players[i].player.element).height();
        
        // 判断视频是否进入视口：视频顶部 < 视口底部 且 视频底部 > 滚动位置
        var isInViewport = (videoTop < viewportBottom) && (videoBottom > scrollPos);
        // 修正逻辑：视口内播放，外暂停
        var status = isInViewport ? "play" : "pause";   
        
        if(players[i].status != status) {
            players[i].status = status;
            players[i].player[status]();
            console.log(i, status);      
        }
    }
});
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Robert Carmichael