Safari中视频进入视口自动播放失效问题求助

问题根源 #

Safari对媒体自动播放的限制比其他浏览器更严格：即使视频设置了muted，也可能因为元数据未加载、IntersectionObserver触发时机过早或浏览器权限策略导致play()调用被拒绝；同时你之前的代码未处理play()返回的Promise拒绝，导致控制台抛出错误。另外，原有的Safari检测逻辑并不准确，无法有效规避问题。

解决方案 #

1. 处理play()的Promise拒绝

video.play()返回Promise，必须捕获拒绝状态，避免未处理的Promise错误。

2. 确保视频元数据加载完成后再播放

在调用play()前检查视频的readyState，如果未加载元数据，先触发加载操作。

3. 修正Safari检测逻辑

结合navigator.vendor和User Agent做更可靠的Safari识别，避免误判。

4. 优化IntersectionObserver配置

针对Safari设置合理的触发阈值，确保视频真正进入视口后再触发播放。

修改后的完整代码 #

HTML（保持原结构）

<video class="tuttiVideo" loop muted preload="metadata">
    <source class="source_video" src="xxx" type="video/mp4">
</video>

JS代码

function observerCallback(entries, observer) {
  entries.forEach(async entry => {
    const video = entry.target;
    if (!entry.isIntersecting) {
      console.log("pausa");
      video.pause();
      playState = false;
    } else {
      console.log("play");
      try {
        // 确保视频元数据已加载
        if (video.readyState < 2) {
          await video.load();
          await new Promise(resolve => video.onloadedmetadata = resolve);
        }
        await video.play();
        playState = true;
      } catch (err) {
        console.error("播放失败:", err);
        // 重试：强制确认静音状态后再尝试播放
        video.muted = true;
        try {
          await video.play();
          playState = true;
        } catch (retryErr) {
          console.error("重试播放仍失败:", retryErr);
        }
      }
    }
  });
};

// 更准确的Safari检测逻辑
function isSafari() {
  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || navigator.vendor.includes('Apple Computer, Inc.');
}

window.onload = () => {
  // 针对Safari调整观察器阈值，确保视频一半进入视口再触发
  const observerOptions = isSafari() ? { threshold: 0.5 } : {};
  const observer = new IntersectionObserver(observerCallback, observerOptions);
  const videoStart = document.querySelectorAll(".tuttiVideo");
  let playState = null;
  
  videoStart.forEach(video => {
    if (video) {
      observer.observe(video);
    }
  });
}

额外说明 #

• Safari的自动播放策略会根据用户交互状态调整：如果用户已经和页面有过交互（点击、滚动等），自动播放限制会放宽；页面刚加载时触发播放更容易被阻止。
• 将preload="none"改为preload="metadata"，让浏览器提前加载视频元数据，能提升播放触发的成功率。

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