iOS Safari中视频进入视口时自动播放问题求助

问题分析 #

你的当前实现存在几个核心问题导致iOS Safari中无法正常触发后续视频自动播放：

1. scroll事件触发逻辑缺陷：scroll事件会在滚动过程中频繁触发，count变量会持续累加，仅通过count === 1或2判断视频切换的逻辑会在多次滚动后完全失效。
2. 依赖滚动次数判断位置不准确：CSS Snap Scroll的滚动是跳跃式的，iOS Safari的scroll事件触发时机与桌面端存在差异，无法通过滚动次数精准对应视频所在的section。
3. 视频权限与属性配置问题：部分视频初始未设置muted，且未利用好用户第一次交互后的播放权限上下文。

解决方案 #

改用IntersectionObserver检测视频所在section是否进入视口，这是针对全屏滚动场景最可靠的视口检测方案，同时优化视频播放逻辑：

修改后的完整代码

<body>
  <section class="video-section">
    <video id="myVideo1" height="400px" loop playsinline muted>
      <source src="video1.mp4" type="video/mp4">
    </video>
    <button id="playFirstVideo">Play</button>
  </section>
  <section class="video-section">
    <video id="myVideo2" height="400px" loop playsinline muted>
      <source src="video2.mp4" type="video/mp4">
    </video>
  </section>
  <section class="video-section">
    <video id="myVideo3" height="400px" loop playsinline muted>
      <source src="video3.mp4" type="video/mp4">
    </video>
  </section>

  <script>
    // 保存所有视频元素
    const videos = document.querySelectorAll('video');
    const playBtn = document.getElementById('playFirstVideo');
    let hasUserInteraction = false;

    // 初始化IntersectionObserver，检测section进入视口
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && hasUserInteraction) {
          // 获取当前section内的视频
          const currentVideo = entry.target.querySelector('video');
          // 播放当前视频并取消静音
          currentVideo.play().catch(err => console.error(err));
          currentVideo.muted = false;
          // 暂停其他视频
          videos.forEach(vid => {
            if (vid !== currentVideo) {
              vid.pause();
              vid.muted = true;
            }
          });
        }
      });
    }, { threshold: 0.8 }); // 当section可见度达到80%时触发

    // 监听所有视频section
    document.querySelectorAll('.video-section').forEach(section => {
      observer.observe(section);
    });

    // 第一次用户交互，开启后续自动播放权限
    playBtn.addEventListener('click', () => {
      hasUserInteraction = true;
      const firstVideo = document.getElementById('myVideo1');
      firstVideo.play();
      firstVideo.muted = false;
      playBtn.style.display = 'none'; // 隐藏播放按钮
    });
  </script>
</body>

关键优化点说明

• IntersectionObserver替代scroll事件：精准检测section是否进入视口，避免滚动事件的频繁触发与计数错误，适配iOS Safari的滚动行为。
• 统一视频初始配置：所有视频默认设置muted，确保符合iOS的自动播放前置条件，用户第一次交互后再取消当前视频静音。
• 用户交互权限标记：用hasUserInteraction变量记录用户是否完成第一次点击，确保后续视频播放能继承用户交互后的权限。
• 视频状态统一管理：进入视口的视频自动播放并取消静音，其他视频暂停并静音，符合类TikTok的交互逻辑。

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