如何在HTML中同步播放双视频并实现统一控制？

需求说明 #

需要在HTML中并排播放两个视频（一个为另一个的过滤版本），通过单个控制条统一操控，实现如同单个视频的同步播放效果。当前已有代码可实现双视频并排，但二者播放状态相互独立：

<center>
<video height="350" controls>
  <source src="video1.mp4" type="video/mp4">
</video>
<video height="350" controls>
  <source src="video2.mp4" type="video/mp4">
</video>
</center>

实现方案 #

核心思路是保留一个视频的原生控制条，通过JavaScript监听该控制条的所有操作，同步另一个视频的播放状态、进度、音量等参数，同时用CSS优化布局对齐效果。

1. 调整HTML结构 #

仅保留主视频的controls属性，为两个视频添加ID以便JavaScript定位，用容器包裹实现灵活布局：

<div class="video-container">
  <video id="mainVideo" height="350" controls playsinline>
    <source src="video1.mp4" type="video/mp4">
  </video>
  <video id="syncVideo" height="350" playsinline>
    <source src="video2.mp4" type="video/mp4">
  </video>
</div>

2. CSS布局优化 #

使用Flex布局实现视频并排，替代原有的<center>标签，同时保证视频比例不被拉伸：

.video-container {
  display: flex;
  justify-content: center;
  gap: 12px; /* 两个视频间的间距 */
  margin: 20px 0;
}

video {
  object-fit: contain; /* 保持视频原始比例 */
}

3. JavaScript同步逻辑 #

监听主视频的所有交互事件，将状态同步到第二个视频，实现完全同步：

const mainVideo = document.getElementById('mainVideo');
const syncVideo = document.getElementById('syncVideo');

// 同步播放/暂停状态
mainVideo.addEventListener('play', () => syncVideo.play());
mainVideo.addEventListener('pause', () => syncVideo.pause());

// 同步播放进度（实时跟随）
mainVideo.addEventListener('timeupdate', () => {
  syncVideo.currentTime = mainVideo.currentTime;
});

// 同步音量与静音状态
mainVideo.addEventListener('volumechange', () => {
  syncVideo.volume = mainVideo.volume;
  syncVideo.muted = mainVideo.muted;
});

// 同步播放速度
mainVideo.addEventListener('ratechange', () => {
  syncVideo.playbackRate = mainVideo.playbackRate;
});

// 同步进度跳转（用户拖拽进度条）
mainVideo.addEventListener('seeked', () => {
  syncVideo.currentTime = mainVideo.currentTime;
});

// 可选：等待两个视频加载完成后再同步初始状态
Promise.all([
  new Promise(resolve => mainVideo.addEventListener('loadedmetadata', resolve)),
  new Promise(resolve => syncVideo.addEventListener('loadedmetadata', resolve))
]).then(() => {
  syncVideo.currentTime = mainVideo.currentTime;
});

注意事项 #

• 确保两个视频的时长完全一致，否则会出现进度不同步的问题
• 添加playsinline属性可避免移动端视频自动全屏，提升体验
• 如果需要自定义控制条，可以隐藏原生controls，自己实现HTML+CSS控制界面，再同步两个视频的状态

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