如何无卡顿切换HTML Video元素源，避免元素塌陷重建？

直接修改video元素的src会导致浏览器中断当前播放、重新请求资源，这段间隙里video会因无内容出现塌陷。用双video元素叠加的方式可彻底解决该问题，核心思路是始终保持一个video在前台播放，另一个在后台预加载下一段视频，切换时仅调整两者的显示状态，完全不会有加载间隙。

步骤1：HTML结构与CSS布局 #

创建两个完全重叠的video元素，默认仅显示其中一个：

<div class="video-container">
  <video id="currentVideo" class="video-player" autoplay playsinline></video>
  <video id="nextVideo" class="video-player" preload="auto" playsinline style="display: none;"></video>
</div>

.video-container {
  position: relative;
  width: 100%;
  height: auto;
}
.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，避免拉伸变形 */
}

步骤2：JS逻辑实现预加载与切换 #

通过监听视频的canplay事件确认下一段视频加载完成，再切换显示状态，同时循环复用两个video元素：

const currentVideo = document.getElementById('currentVideo');
const nextVideo = document.getElementById('nextVideo');
let isSwitching = false;

// 预加载并切换到下一段视频
function switchVideo(nextVideoPath) {
  if (isSwitching) return;
  isSwitching = true;

  // 为备用视频设置地址，启动预加载
  nextVideo.src = nextVideoPath;
  
  // 监听预加载完成事件
  nextVideo.oncanplay = () => {
    // 切换显示状态
    currentVideo.style.display = 'none';
    nextVideo.style.display = 'block';
    
    // 播放新视频
    nextVideo.play().catch(err => console.error(err));
    
    // 交换两个video的角色，为下一次切换做准备
    [currentVideo, nextVideo] = [nextVideo, currentVideo];
    
    // 重置备用video的状态
    nextVideo.src = '';
    nextVideo.style.display = 'none';
    isSwitching = false;
  };
}

额外优化点 #

• 若需要音频平滑过渡，可在切换前给当前视频添加音量淡出效果，同时给新视频添加音量淡入效果
• 针对用户响应生成的视频，可提前预判请求时机，提前调用switchVideo进行预加载，进一步减少延迟

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