Safari浏览器中video.play()无法触发视频播放问题求助

问题分析 #

你的脚本在Chrome中正常执行，但Safari里仅能将视频重置到0秒位置却无法触发播放，核心原因在于：

• Safari对媒体自动播放的限制更严苛，即便开启muted和autoplay属性，video.play()的触发时机、异步处理逻辑和Chrome存在差异
• 当前trigger的IntersectionObserver回调仅重置currentTime，未主动触发播放；原视频Observer仅在currentTime === 0时才调用play()，重置后该条件不再满足，导致播放逻辑不执行

修复方案 #

1. 重置视频后主动调用播放逻辑 #

修改observerTrigger的回调，在设置currentTime = 0后主动调用play()，同时处理play()返回的Promise（Safari中play()是异步操作，需捕获可能的播放错误）：

window.addEventListener('DOMContentLoaded', function () {

  const video = document.getElementById("573dfe8f-6592-57e6-c48c-8e93fbdae2e3-video");
  const trigger = document.getElementById("trigger");

  // 封装复用的播放逻辑
  const playVideo = () => {
    video.muted = true;
    // 处理异步播放的Promise，捕获Safari可能的播放异常
    video.play().catch(err => {
      console.error("视频播放失败:", err);
    });
  };

  const observerVideo = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      playVideo();
    }
  }, { threshold: 1 });

  const observerTrigger = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      video.currentTime = 0;
      // 重置后立即触发播放
      playVideo();
    }
  }, { threshold: 0 });

  observerTrigger.observe(trigger);
  observerVideo.observe(video);
})

2. 额外优化建议 #

• 给视频元素添加preload="auto"属性，确保Safari提前加载视频元数据，避免重置后播放延迟或失败
• 若仍存在问题，可监听视频的seeked事件，在视频完成跳转至0秒后再调用play()：

// 将trigger回调中的播放逻辑替换为：
video.currentTime = 0;
video.addEventListener('seeked', () => {
  playVideo();
}, { once: true }); // 使用once确保事件仅触发一次

3. 验证Safari自动播放规则 #

确保：

• 视频元素在HTML层面已明确设置muted和autoplay属性
• 无其他脚本修改视频的muted状态或暂停状态

内容的提问来源于stack exchange，提问作者Mr.Stas