求助：获取服务器视频路径并解决JS视频切换变量引用问题

一、修复视频切换的核心问题 #

你当前代码里，"vid" + video_count只会生成字符串（比如"vid2"），而非获取变量vid2存储的实际路径，浏览器会把这个字符串当作文件路径去请求，自然找不到对应视频。用数组统一管理视频路径是最直接的解决方案，完全避开变量拼接的问题。

修正后的代码如下：

// 用数组存所有视频路径，数组索引从0开始
const videoPaths = [
  "/videos/introduction.mp4",
  "/videos/explanation.mp4",
  "/videos/conclusion.mp4"
];

let currentIndex = 0; // 初始对应第一个视频
const video = document.querySelector('video'); // 确保获取到页面中的video元素

// 下一个视频切换逻辑
document.getElementById('nextBtn').addEventListener('click', () => {
  currentIndex++;
  // 超出最后一个视频时，回到第一个
  if (currentIndex >= videoPaths.length) {
    currentIndex = 0;
  }
  video.src = videoPaths[currentIndex];
});

// 上一个视频切换逻辑
document.getElementById('previousBtn').addEventListener('click', () => {
  currentIndex--;
  // 小于第一个视频索引时，跳到最后一个
  if (currentIndex < 0) {
    currentIndex = videoPaths.length - 1;
  }
  video.src = videoPaths[currentIndex];
});

关键修改说明： #

• 用数组videoPaths统一管理路径，通过索引直接获取对应视频地址，彻底解决字符串拼接变量的问题。
• 调整索引逻辑：数组从0开始计数，用currentIndex替代原video_count，边界判断基于数组长度（videoPaths.length），后续新增视频只需往数组里追加，不用修改判断条件。
• 简化事件监听：现在主流浏览器都支持addEventListener，无需兼容老旧的attachEvent，代码更简洁。

二、关于Node.js动态获取服务器视频目录的建议 #

如果不想硬编码视频路径，想从服务器目录自动获取视频列表，可以用Node.js+Express快速实现：

1. 先安装依赖：

npm install express fs path

2. 编写服务器代码（比如命名为server.js）：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

// 托管静态文件，让浏览器能访问前端页面和视频文件
app.use(express.static('public')); // 假设前端HTML/CSS/JS放在public文件夹
app.use('/videos', express.static('videos')); // 托管服务器上的videos目录

// 提供接口，返回所有视频的访问路径
app.get('/api/videos', (req, res) => {
  const videosDir = path.join(__dirname, 'videos');
  fs.readdir(videosDir, (err, files) => {
    if (err) {
      return res.status(500).send('读取视频目录失败');
    }
    // 过滤出.mp4格式的文件，生成完整访问路径
    const videoUrls = files
      .filter(file => file.endsWith('.mp4'))
      .map(file => `/videos/${file}`);
    res.json(videoUrls);
  });
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

3. 前端通过请求接口获取视频列表：

let videoPaths = [];
let currentIndex = 0;
const video = document.querySelector('video');

// 页面加载时请求接口拿到视频列表
fetch('/api/videos')
  .then(res => res.json())
  .then(urls => {
    videoPaths = urls;
    if (videoPaths.length > 0) {
      video.src = videoPaths[0]; // 默认加载第一个视频
    }
  });

// 后续的上一个/下一个视频切换逻辑，直接复用之前的代码即可

这样不管你往服务器的videos目录新增多少视频，前端都会自动获取到最新的路径，无需手动修改代码。

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