如何在HTML Video标签中将多个视频文件当作单个文件播放？

嘿，刚好能帮你搞定这个多视频连续播放的需求！你原来的脚本思路是对的，我帮你补全并优化一下，让它更稳定、更接近“单个文件播放”的体验～

完整工作代码 #

首先给你补全并修正了原代码的小问题（比如拼写错误），还加了一些实用优化：

<video id="videoPlayer" controls preload="auto"></video>
<!-- 建议添加播放按钮，规避浏览器autoplay限制 -->
<button id="startPlayBtn">开始播放</button>

<script>
const videoPlayer = document.getElementById('videoPlayer');
const startPlayBtn = document.getElementById('startPlayBtn');
// 你的视频列表，修正了拼写错误：thrid → third
const videoUrls = [
  "my-first-video.mp4",
  "my-second-video.mp4",
  "my-third-video.mp4"
];
let currentVideoIndex = 0;

// 初始播放触发（规避autoplay限制）
startPlayBtn.addEventListener('click', () => {
  loadAndPlayVideo(currentVideoIndex);
  startPlayBtn.style.display = 'none';
});

// 加载并播放指定索引的视频
function loadAndPlayVideo(index) {
  videoPlayer.src = videoUrls[index];
  videoPlayer.play().catch(err => {
    console.error('播放失败：', err);
  });
}

// 视频结束后自动播放下一个
videoPlayer.addEventListener('ended', () => {
  currentVideoIndex++;
  if (currentVideoIndex < videoUrls.length) {
    loadAndPlayVideo(currentVideoIndex);
  } else {
    // 可选：播放完所有视频后循环播放
    // currentVideoIndex = 0;
    // loadAndPlayVideo(currentVideoIndex);
    console.log('所有视频已播放完毕');
  }
});

// 预加载下一个视频，减少切换等待，提升无缝感
function preloadNextVideo() {
  const nextIndex = currentVideoIndex + 1;
  if (nextIndex < videoUrls.length) {
    const preloader = new Video();
    preloader.src = videoUrls[nextIndex];
    preloader.preload = 'auto';
  }
}

// 当前视频开始播放时，预加载下一个
videoPlayer.addEventListener('playing', preloadNextVideo);

// 处理视频加载错误，避免播放中断
videoPlayer.addEventListener('error', () => {
  console.error(`视频加载失败：${videoUrls[currentVideoIndex]}`);
  currentVideoIndex++;
  if (currentVideoIndex < videoUrls.length) {
    loadAndPlayVideo(currentVideoIndex);
  }
});
</script>

关键优化点说明 #

• 规避autoplay限制：现代浏览器大多禁止无用户交互的自动播放，所以添加了播放按钮，让用户手动触发初始播放，避免脚本失效。
• 无缝切换体验：加入了预加载下一个视频的逻辑，当前视频播放时就提前加载下一个，切换时几乎没有等待。
• 错误处理：添加了错误监听，如果某个视频加载失败，会自动跳过并播放下一个，不会导致整个播放流程中断。
• 代码可读性：把播放逻辑封装成函数，替换了原代码里的全局变量i，用更清晰的命名让代码更容易维护。

额外可选功能 #

如果需要更贴近“单个文件”的体验，还可以做这些调整：

• 隐藏原生播放器的进度条（但会牺牲用户手动跳转的功能），或者自定义进度条，把所有视频的总时长整合显示。
• 保持音量、播放速度等设置在视频切换时不变（原生播放器默认会保留这些设置，一般不用额外处理）。

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