Safari页面加载时HTML5视频短暂跳动问题求助

这种跳动通常是因为浏览器在视频资源加载完成前无法确定其准确尺寸，或者海报图与视频的宽高比不一致，导致布局重排。试试下面几个方案：

方案1：强制匹配海报图与视频的宽高比 #

确保你的dashboard-poster.jpg和dashboard.mp4的宽高比完全相同。如果视频是16:9，海报图也必须是16:9，这样浏览器渲染海报时的尺寸和最终视频的尺寸完全一致，不会出现跳变。

方案2：用CSS固定宽高比，提前预留空间 #

给视频容器设置固定的宽高比，让浏览器在加载资源前就知道要预留多大的空间，避免重排。修改你的CSS：

#container {
  width: 450px;
  /* 替换成你视频实际的宽高比，比如16:9就写16/9 */
  aspect-ratio: 624 / 351;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频填充容器，保持比例 */
}

如果需要兼容不支持aspect-ratio的旧浏览器，可改用padding-top的传统方法：

#container {
  width: 450px;
  position: relative;
  /* 计算方式：(视频高度/视频宽度)*100%，比如351/624≈56.25% */
  padding-top: 56.25%;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方案3：隐藏视频直到加载完成 #

通过JS监听视频的元数据加载事件，等视频尺寸确定后再显示，避免海报图和视频切换时的跳动：

<body>
  <div id="container">
    <video id="myVideo" playsinline muted loop autoplay src="/build/img/daily/home/dashboard.mp4" poster="/build/img/daily/home/dashboard-poster.jpg" style="display: none;">
      Video not supported
    </video>
  </div>
  <script>
    const video = document.getElementById('myVideo');
    // 视频元数据加载完成后显示
    video.addEventListener('loadedmetadata', () => {
      video.style.display = 'block';
    });
    // 备用：如果元数据事件未触发，用可播放事件兜底
    video.addEventListener('canplay', () => {
      if (video.style.display === 'none') {
        video.style.display = 'block';
      }
    });
  </script>
</body>

优先保证宽高比一致，再结合CSS预留空间，最后用JS兜底，基本就能解决跳动问题。

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