JavaScript视频播放器上一曲/下一曲按钮功能异常问题

问题根源 #

1. 全局索引被覆盖：play函数内用var index = 0重新声明变量，覆盖了全局的index，导致初始索引逻辑混乱。
2. UI与播放内容不同步：next/prev里先更新UI显示当前index对应的文件名，再修改index获取播放文件，导致显示的是上一个索引的内容，实际播放的是新索引的文件。
3. 上一曲索引逻辑错误：prev中当index减到小于0时，应该跳转到最后一个文件索引，而不是直接设为0。
4. 重复绑定结束事件：视频结束时同时触发play、next、prev三个函数，逻辑冲突。

修复后的代码 #

let index = 0;
const video = document.getElementsByTagName('video')[0]; // 修正标签选择，原<v>应为<video>

// 统一更新播放信息的复用函数
const updatePlayingInfo = (files) => {
  document.getElementById("playingName").innerHTML = files[index].name;
  document.getElementById("playingNr").innerHTML = `${index + 1}/${files.length}`;
};

// 统一播放文件的复用函数
const playFile = (files) => {
  const file = files[index];
  const url = window.URL.createObjectURL(file);
  video.src = url;
  video.load();
};

const play = () => {
  const files = document.getElementById('f').files;
  if (files.length === 0) return;
  index = 0; // 播放时重置到第一个文件
  updatePlayingInfo(files);
  playFile(files);
};

const next = () => {
  const files = document.getElementById('f').files;
  if (files.length === 0) return;
  index = (index + 1) % files.length; // 取模处理循环，无需额外判断
  updatePlayingInfo(files);
  playFile(files);
};

const prev = () => {
  const files = document.getElementById('f').files;
  if (files.length === 0) return;
  index = (index - 1 + files.length) % files.length; // 避免索引为负，自动跳转到最后一个文件
  updatePlayingInfo(files);
  playFile(files);
};

// 仅绑定一个结束事件，这里绑定next实现自动下一曲，可按需调整
video.addEventListener('ended', next, false);

修复说明 #

• 移除play函数内的局部index声明，保证全局索引的一致性。
• 拆分复用函数，减少重复代码，逻辑更清晰。
• 用取模运算简化循环索引的处理，避免冗余判断。
• 修正上一曲的索引计算，确保索引始终合法。
• 移除重复的结束事件绑定，避免逻辑冲突。
• 增加空文件列表判断，防止报错。
• 修正视频标签选择器，匹配标准<video>标签。

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