JavaScript视频播放器无法加载随机选中视频的技术求助

我看了你的代码，发现几个关键问题导致随机视频加载失败，咱们一步步来修正：

核心错误分析 #

1. 变量被当成字符串引用：你写了video2.src = "selectVideo";，这里的引号把变量selectVideo变成了字符串字面量，浏览器会去请求一个叫selectVideo的文件，而不是用变量里存储的随机视频文件名。
2. 缺少视频路径前缀：你的videoCache里只有文件名（比如video-1.mp4），但实际视频存在videos/目录下，直接赋值的话路径不完整，浏览器找不到文件。
3. 冗余代码与变量声明问题：Math.floor(Math.random() * videoCache.length)已经返回整数了，后面的*1完全多余；而且selectVideo没有用var/let/const声明，会变成全局变量，容易引发意外问题。

修正后的代码示例 #

第一步：修复单个侧边视频的逻辑 #

先把你原来的代码改成正确的版本：

// 假设这是侧边视频（id="two"）的点击事件处理函数
document.getElementById('two').addEventListener('click', function() {
  // 把当前侧边视频移到主窗口
  const mainVideo = document.getElementById('one');
  mainVideo.src = this.src; // 直接用当前点击视频的src

  // 视频缓存数组
  const videoCache = ["video-1.mp4", "video-2.mp4", "video-3.mp4", "video-4.mp4", "video-5.mp4", "video-6.mp4", "video-7.mp4", "video-8.mp4", "video-9.mp4", "video-10.mp4"];
  // 随机选中一个视频（去掉多余的*1）
  const randomVideo = videoCache[Math.floor(Math.random() * videoCache.length)];
  
  // 给当前侧边视频替换随机视频（加上路径前缀，不要给变量加引号）
  this.src = `videos/${randomVideo}`;

  // 如果你是用<source>标签来定义视频源，需要这么修改并重新加载：
  // const sourceEl = this.querySelector('source');
  // sourceEl.src = `videos/${randomVideo}`;
  // this.load(); // 触发视频重新加载资源
});

第二步：复用代码到所有侧边视频 #

为了避免重复写代码，咱们把逻辑封装成一个函数，然后给所有侧边视频绑定点击事件：

// 封装通用的侧边视频点击处理函数
function handleSideVideoClick() {
  const mainVideo = document.getElementById('one');
  // 保存当前点击视频的源
  const currentVideoSrc = this.src;
  // 替换主窗口视频
  mainVideo.src = currentVideoSrc;

  // 视频缓存（可以把这个变量提到外面，避免每次点击都重新创建）
  const videoCache = ["video-1.mp4", "video-2.mp4", "video-3.mp4", "video-4.mp4", "video-5.mp4", "video-6.mp4", "video-7.mp4", "video-8.mp4", "video-9.mp4", "video-10.mp4"];
  // 随机选视频
  const randomVideo = videoCache[Math.floor(Math.random() * videoCache.length)];
  
  // 替换当前侧边视频的源
  this.src = `videos/${randomVideo}`;

  // 如果用<source>标签的版本：
  // const sourceEl = this.querySelector('source');
  // sourceEl.src = `videos/${randomVideo}`;
  // this.load();
}

// 给所有侧边视频绑定事件
document.getElementById('two').addEventListener('click', handleSideVideoClick);
document.getElementById('three').addEventListener('click', handleSideVideoClick);
document.getElementById('four').addEventListener('click', handleSideVideoClick);

额外注意事项 #

• 如果你的HTML里用了<source>标签，修改完src后一定要调用video.load()，否则浏览器不会重新加载新的视频资源。
• 建议把videoCache变量声明在函数外面，避免每次点击都重新创建数组，提升一点点性能。
• 用const声明不需要修改的变量（比如videoCache、randomVideo），用let声明需要修改的变量，养成良好的编码习惯。

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