Next.js+React项目中react-player加载SRT字幕不显示问题排查

问题概述 #

在React/TypeScript+Next.js项目里，用react-player播放视频时，视频和模态框功能正常，但添加的.srt格式字幕始终无法显示。Network面板显示SRT文件已成功加载（200状态码，含一次307重定向），但字幕完全不出现。

可能的原因及解决方案 #

1. Next.js 静态资源路径错误 #

Next.js的public目录是静态资源的根目录，引用其中的文件必须用绝对路径，而非相对路径。你当前使用的./videos/test_captions.srt是相对路径，会导致路径解析异常。

修改路径为绝对路径：

const videoConfig = {
    file: {
      tracks: [
        {
          kind: "subtitles",
          src: "/videos/test_captions.srt", // 改为根路径开头的绝对路径
          srcLang: "en",
          label: "English",
          default: true,
        },
      ],
    },
  };

2. 缺少字幕MIME类型声明 #

ReactPlayer的track配置中，建议显式指定SRT文件的MIME类型application/x-subrip，避免浏览器无法识别字幕格式：

const videoConfig = {
    file: {
      tracks: [
        {
          kind: "subtitles",
          src: "/videos/test_captions.srt",
          srcLang: "en",
          label: "English",
          default: true,
          type: "application/x-subrip", // 补充SRT对应的MIME类型
        },
      ],
    },
  };

3. 检查浏览器字幕开关状态 #

即便设置了default: true，部分浏览器仍可能默认关闭字幕显示。点击视频控件的「字幕」按钮，确认是否已选中「English」选项。

4. 验证SRT文件格式细节 #

再核对下你的SRT文件格式是否完全合规：

• 时间戳的毫秒部分必须用逗号分隔（如00:00:01,000，不能用点号）
• 每个字幕块之间必须有空行分隔
• 字幕序号必须连续无缺失

修改后的完整组件示例 #

const videoConfig = {
    file: {
      tracks: [
        {
          kind: "subtitles",
          src: "/videos/test_captions.srt",
          srcLang: "en",
          label: "English",
          default: true,
          type: "application/x-subrip",
        },
      ],
    },
  };

// 组件渲染部分
<ReactPlayer
    url={videoUrl}
    controls={true}
    width="100%"
    height="100%"
    playing={true}
    muted={true}
    config={videoConfig}
/>

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