如何用JavaScript实现点击按钮无缝切换循环/单次视频并往返

要解决无缝切换的问题，核心是提前预加载第二个视频，并在切换时同步两个视频的播放进度，直接切换显示状态（不用过渡动画），避免加载延迟或视觉断层。以下是完整的实现代码：

HTML 结构 #

<div class="video-container">
  <video id="video1" src="video1-loop.mp4" autoplay loop muted playsinline></video>
  <video id="video2" src="video2-once.mp4" preload="auto" muted playsinline></video>
</div>
<button id="toggleBtn">切换到视频2</button>

CSS 样式 #

.video-container {
  position: relative;
  width: 800px;
  height: 450px;
  overflow: hidden;
}

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

#video2 {
  display: none;
}

JavaScript 逻辑 #

const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');
const toggleBtn = document.getElementById('toggleBtn');

let isVideo1Active = true;

// 预加载完成后确保视频可播放
video2.addEventListener('loadeddata', () => {
  console.log('视频2已预加载完成');
});

toggleBtn.addEventListener('click', () => {
  if (isVideo1Active) {
    // 从视频1切到视频2：同步进度，播放并显示
    video2.currentTime = video1.currentTime;
    video2.play();
    video1.pause();
    video1.style.display = 'none';
    video2.style.display = 'block';
    toggleBtn.textContent = '切回视频1';
    isVideo1Active = false;
  } else {
    // 从视频2切回视频1：同步进度，播放并显示
    video1.currentTime = video2.currentTime;
    video1.play();
    video2.pause();
    video2.style.display = 'none';
    video1.style.display = 'block';
    toggleBtn.textContent = '切换到视频2';
    isVideo1Active = true;
  }
});

// 视频2播放结束后自动切回视频1（可选，根据需求调整）
video2.addEventListener('ended', () => {
  toggleBtn.click();
});

关键注意事项 #

• 预加载设置：给视频2加上preload="auto"，确保浏览器提前加载视频数据，避免切换时的加载延迟。
• 同步播放进度：切换时将目标视频的currentTime设置为当前播放视频的进度，保证画面衔接无断层。
• 无过渡切换：直接用display属性切换显示状态，避免淡入淡出导致的视觉不连贯。
• 静音与playsinline：添加muted和playsinline属性，确保在移动端能正常自动播放（浏览器政策限制）。

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