如何用CSS Scroll-Snap与JS实现滚动时视频自动启停

需求回顾 #

需要实现：滚动时仅当前视口内的视频自动播放，其余视频自动暂停，替代手动点击播放的逻辑，避免多视频同时播放的问题。

解决方案 #

我们可以利用Intersection Observer API高效检测视频是否处于视口内，结合浏览器自动播放政策调整HTML属性，最终实现需求。

1. 调整HTML代码

首先统一视频类名，并添加自动播放所需属性：

<div class="app__videos">
  <div class="video">
      <video src="video1.mp4" class="video__player" muted playsinline></video>
  </div> 
  
  <div class="video">
      <video src="video2.mp4" class="video__player" muted playsinline></video>
  </div> 
</div>

• muted：现代浏览器要求视频静音才能触发自动播放，这是必须属性
• playsinline：确保移动端视频在容器内播放，不会自动全屏

2. 替换JS代码

用Intersection Observer替代原有的scroll事件监听，实现精准的视口检测：

function setupVideoAutoPlay() {
  const videoContainer = document.querySelector('.app__videos');
  const videos = document.querySelectorAll('.video__player');

  // 配置观察者：当视频可见区域超过视口50%时触发
  const observerOptions = {
    root: videoContainer, // 以滚动容器为根节点（匹配你的CSS滚动吸附容器）
    rootMargin: '0px',
    threshold: 0.5 // 可见比例达到50%时触发回调
  };

  // 视口变化时的回调逻辑
  const handleVideoVisibility = (entries) => {
    entries.forEach(entry => {
      const video = entry.target;
      if (entry.isIntersecting) {
        // 视频进入视口，尝试自动播放
        video.play().catch(err => {
          console.log('自动播放受限，启用点击播放：', err);
          // 如果浏览器禁止自动播放，添加一次性点击播放事件
          video.addEventListener('click', () => video.play(), { once: true });
        });
      } else {
        // 视频离开视口，立即暂停
        video.pause();
      }
    });
  };

  // 创建观察者并监听所有视频
  const videoObserver = new IntersectionObserver(handleVideoVisibility, observerOptions);
  videos.forEach(video => videoObserver.observe(video));

  // 可选：保留点击切换播放/暂停的交互（如果需要）
  videos.forEach(video => {
    video.addEventListener('click', () => {
      video.paused ? video.play() : video.pause();
    });
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', setupVideoAutoPlay);

3. 代码逻辑说明

• Intersection Observer优势：相比scroll事件监听，它只会在元素进入/离开视口时触发，性能更优，无需手动计算元素位置
• 阈值设置：threshold: 0.5意味着当视频有50%以上区域出现在滚动容器内时，触发自动播放，符合Reels的交互逻辑
• 自动播放兼容：添加catch处理自动播放失败的情况（比如浏览器隐私限制），降级为点击播放

为什么之前的尝试有问题？ #

• 修改1：给每个视频绑定scroll事件，滚动时所有视频都会触发播放/暂停，逻辑混乱
• 修改2：仅检测了视频底部位置，但没有执行播放/暂停操作，也没有正确匹配当前视口内的视频
• 修改3：用固定高度判断滚动位置，无法适配不同屏幕尺寸，且没有实现视口内视频的自动播放

内容的提问来源于stack exchange，提问作者Ryan D