页面加载后用JS修改video src在Safari中无法生效的问题

问题分析 #

你当前的延迟加载视频方案在Chrome、Firefox中正常运行，但部分Safari版本仅显示海报图和播放按钮，核心原因包括：

• Safari对媒体自动播放的策略更严格，未处理play()返回的Promise可能导致播放被浏览器拦截
• 页面中存在空的<source>标签，直接修改video.src会与<source>标签的解析逻辑冲突，Safari优先读取<source>而非video元素的src属性
• 未等待视频加载就绪就调用play()，Safari可能因视频缓存未完成拒绝执行播放操作

修复代码 #

HTML调整 #

移除空的<source>标签，避免与动态设置的src属性冲突：

<video id="video" class="settings-video-background" loop muted autoplay playsinline poster="/airline_software_masthead-video_poster_home_2.jpg">
    Your browser does not support the video tag.
</video>

JavaScript优化 #

处理play()的异步Promise，添加视频加载状态监听，确保Safari能正确触发自动播放：

window.addEventListener("load", () => {
  console.log("page loaded");

  async function setupVideo() {
    console.log('initializing video');
    const video = document.getElementById('video');
    video.src = 'video__h264_high-bitrate-2-86mb_blue_20_12.mp4';

    // 尝试自动播放，捕获拦截错误并降级处理
    await video.play().catch(err => {
      console.error('Auto-play failed:', err);
      // 若Safari拦截自动播放，绑定一次点击事件触发播放
      document.addEventListener('click', () => video.play(), { once: true });
    });
    
    // 监听视频加载完成，确保循环播放正常触发
    video.addEventListener('loadeddata', () => {
      video.play();
    });
    return video;
  }

  setTimeout(() => {
    setupVideo();
  }, 3000);
});

额外优化建议 #

• 视频压缩：8MB的视频可进一步转码，降低比特率或分辨率，减少加载耗时
• 格式兼容：同时提供WebM格式视频作为备选，提升Chrome、Firefox的加载效率，保留H.264格式适配Safari
• 预加载元数据：在video标签添加preload="metadata"属性，提前加载视频元数据，缩短播放启动时间

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