Node.js视频流服务器播放时字幕不显示的问题求助

我明白你遇到的问题了——明明字幕文件能正常访问，但视频播放时就是不显示，这种情况确实挺让人挠头的。我仔细看过你贴的代码，咱们一步步来排查可能的问题，找到解决办法：

1. 先确认WebVTT文件的格式是否合规 #

浏览器对WebVTT的格式要求非常严格，哪怕一点点格式错误都会导致字幕加载失败。你一定要检查你的subtitrare.vtt文件：

• 必须以WEBVTT作为文件的第一行，前面不能有任何空格、注释或者空行
• 时间戳必须是标准格式：HH:MM:SS.mmm --> HH:MM:SS.mmm（比如00:00:02.100 --> 00:00:05.300），毫秒部分可以省略，但冒号和箭头的格式不能错
• 每个字幕块之间必须有空行分隔

正确的VTT文件示例：

WEBVTT

00:00:00.000 --> 00:00:03.500
Bună ziua, bine ați venit!

00:00:04.000 --> 00:00:07.200
Acesta este un exemplu de subtitrare în română.

2. 检查CORS配置是否足够宽松 #

虽然你已经用了cors()中间件，但浏览器对字幕资源的CORS检查有时候会比视频资源更严格。你可以尝试调整CORS配置，或者给字幕路由单独设置CORS头：

方案一：修改全局CORS配置 #

把你的app.use(cors());改成：

app.use(cors({
  origin: '*', // 如果你的前端是固定域名，比如http://localhost:3000，这里可以写具体域名更安全
  methods: ['GET', 'HEAD'],
  allowedHeaders: ['Range', 'Accept'],
  exposedHeaders: ['Content-Range', 'Accept-Ranges']
}));

方案二：给字幕路由单独加CORS头 #

修改你的字幕路由代码：

app.get('/subtitrare.vtt', (req, res) => {
  const subtitlesPath = path.join(__dirname, 'subtitrare.vtt');
  if (!fs.existsSync(subtitlesPath)) {
    return res.status(404).send("Subtitrarea nu a fost găsită.");
  }
  // 手动添加CORS头，确保浏览器允许加载
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Content-Type', 'text/vtt');
  fs.createReadStream(subtitlesPath).pipe(res);
});

3. 检查HTML中track标签的细节 #

你的track标签看起来没问题，但有几个小细节可以确认：

<track src="http://localhost:5000/subtitrare.vtt" kind="subtitles" srclang="ro" label="Română" default />

• 有些浏览器不会自动开启默认字幕，你可以右键点击视频，在字幕菜单里手动选择「Română」，看看能不能显示
• 如果你的HTML文件是通过Node.js服务器提供的（比如你加了静态文件路由），可以把src改成相对路径/subtitrare.vtt，避免跨域路径的潜在问题
• 确保srclang="ro"是正确的（罗马尼亚语的标准代码确实是ro），label要和srclang对应，方便用户识别

4. 用浏览器开发者工具定位问题 #

这是最有效的调试方法，打开F12开发者工具：

• 切换到Network标签，刷新页面，找到subtitrare.vtt的请求：
  • 看状态码是不是200，如果是404，说明文件路径有问题；如果是403，那就是CORS或者权限问题
  • 点进这个请求，看Response标签里的内容是不是正确的VTT文件，有没有乱码或者格式错误
• 切换到Console标签，看有没有和字幕相关的报错，比如「Failed to load resource」或者「Invalid WebVTT format」，这些提示能直接帮你定位问题根源

5. 确认字幕与视频的时间轴匹配 #

有时候字幕格式和加载都没问题，但时间轴和视频对不上，导致看起来没显示。你可以找视频里有明确对话的片段，对应字幕文件里的时间点，看看是不是在那个时间点字幕应该出现的时候没显示。

调试后的完整示例代码 #

修改后的Node.js服务器代码 #

const express = require("express");
const fs = require("fs");
const path = require("path");
const cors = require('cors');
const app = express();
const PORT = 5000;

// 配置更宽松的CORS
app.use(cors({
  origin: '*',
  methods: ['GET', 'HEAD'],
  allowedHeaders: ['Range', 'Accept'],
  exposedHeaders: ['Content-Range', 'Accept-Ranges']
}));

// 视频流路由
app.get("/video", (req, res) => {
  const videoPath = path.join(__dirname, "film.mp4");
  if (!fs.existsSync(videoPath)) {
    return res.status(404).send("Fișierul video nu a fost găsit.");
  }

  const stat = fs.statSync(videoPath);
  const fileSize = stat.size;
  const range = req.headers.range;

  if (range) {
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunkSize = end - start + 1;
    const stream = fs.createReadStream(videoPath, { start, end });

    const head = {
      "Content-Range": `bytes ${start}-${end}/${fileSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": chunkSize,
      "Content-Type": "video/mp4",
    };

    res.writeHead(206, head);
    stream.pipe(res);
  } else {
    const head = {
      "Content-Length": fileSize,
      "Content-Type": "video/mp4",
    };
    res.writeHead(200, head);
    fs.createReadStream(videoPath).pipe(res);
  }
});

// 字幕路由
app.get('/subtitrare.vtt', (req, res) => {
  const subtitlesPath = path.join(__dirname, 'subtitrare.vtt');
  if (!fs.existsSync(subtitlesPath)) {
    return res.status(404).send("Subtitrarea nu a fost găsită.");
  }
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Content-Type', 'text/vtt');
  fs.createReadStream(subtitlesPath).pipe(res);
});

// 提供静态HTML文件（如果需要的话）
app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Serverul rulează la http://localhost:${PORT}`);
});

修改后的HTML（放在public文件夹下） #

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8" />
  <title>Player Video</title>
</head>
<body>
  <video controls width="640">
    <source src="/video" type="video/mp4" />
    <track src="/subtitrare.vtt" kind="subtitles" srclang="ro" label="Română" default />
    Browserul tău nu suportă tag-ul video.
  </video>
</body>
</html>

按照上面的步骤排查，应该能解决你的字幕不显示问题。如果还是不行，你可以把浏览器Console里的报错信息贴出来，我再帮你进一步分析。

内容来源于stack exchange