HTML5视频列表多个video标签滚出屏幕暂停播放

HTML5 中的 `<video>` 标签支持自动播放功能，但如果视频容器滚动出屏幕范围，浏览器通常会为了节省资源而暂停视频的播放。如果你想让视频在滚动到看不见时暂停，但用户再次滚动到该区域时能够恢复播放，可以利用 JavaScript 来实现这一点。

以下是实现这个功能的基本步骤：

1. 首先，在每个 `<video>` 元素上添加一些基本属性，如 `id` 和一个自定义的 CSS 类（例如 `.scrollable-video`），用于后续的JavaScript操作：

<video id="video1" class="scrollable-video">
  <!-- 视频源 -->
</video>
<!-- 同样的结构应用于其他视频 -->

2. 使用 JavaScript 获取视频元素，并监听窗口的滚动事件：

window.addEventListener('scroll', function() {
  scrollVideos();
});

3. 编写 `scrollVideos()` 函数，检查视频是否超出可视区域，并根据需要控制它们的播放状态：

function scrollVideos() {
  const videos = document.querySelectorAll('.scrollable-video');
  
  videos.forEach(function(video) {
    if (isVideoOutOfView(video)) { // 检查视频是否不在视窗内
      video.pause(); // 如果是，则暂停
    } else {
      video.play(); // 否则，如果在视窗内则恢复播放
    }
  });
}

function isVideoOutOfView(videoElement) {
  const rect = videoElement.getBoundingClientRect();
  return !rect.top > window.innerHeight;
}

4. 当页面滚动时，`scrollVideos()` 函数会被触发，检查每个视频的状态并做出相应的调整。