使用Video.JS播放含内嵌字幕流的MP4视频时无法渲染字幕问题求助

问题原因 #

HTML5 原生video标签默认不支持直接解析MP4容器内的内嵌字幕流，因此Video.js默认调用原生能力时也无法读取这类字幕，你之前添加的静态track标签src属性为空，也无法加载字幕内容。

可行解决方案 #

方案1：前端直接解析内嵌字幕，无需后端改造

针对不同的内嵌字幕格式调整配置+引入对应解析插件即可：

• 若内嵌为CEA-608/708格式字幕，直接调整Video.js初始化配置，开启模拟字幕和内嵌字幕解析能力：

const videoJsConfig = {
  controls: true,
  autoplay: false,
  preload: 'auto',
  fluid: true,
  height: 600,
  width: 800,
  textTrackSettings: true,
  html5: {
    nativeTextTracks: false, // 关闭原生字幕，改用Video.js模拟渲染
    vhs: {
      enableCEA708Captions: true // 开启CEA格式内嵌字幕解析
    }
  }
};

this.player = videojs('preview-player', videoJsConfig);

• 若内嵌为mov_text格式字幕，额外引入mp4box.js解析视频blob中的字幕轨，提取字幕内容后动态添加到播放器即可，示例代码如下：

import MP4Box from 'mp4box';

// 加载视频时同时解析字幕
const objectURL = URL.createObjectURL(file as Blob);
this.player.src([{ type: 'video/mp4', src: objectURL }]);

// 解析内嵌字幕
const mp4boxFile = MP4Box.createFile();
const reader = new FileReader();
reader.onload = e => {
  const buf = e.target.result;
  buf.fileStart = 0;
  mp4boxFile.appendBuffer(buf);
};
reader.readAsArrayBuffer(file);

mp4boxFile.onReady = info => {
  // 找到字幕轨
  const subtitleTrack = info.tracks.find(track => track.type === 'subtitle');
  if (subtitleTrack) {
    // 提取字幕内容生成srt后添加到播放器
    this.player.addRemoteTextTrack({
      kind: 'subtitles',
      srclang: subtitleTrack.language || 'en',
      label: subtitleTrack.name || '字幕',
      src: 生成的srt文件地址,
      default: true
    }, false);
  }
};

方案2：后端提前提取字幕（稳定性更高）

你提到的后端用FFmpeg提取srt字幕返回前端的方案兼容性最好，不受字幕格式限制，前端拿到srt地址后调用上述addRemoteTextTrack方法动态添加即可，不需要额外引入前端解析插件，加载性能也更优。

适配内嵌字幕场景的播放器推荐 #

• Shaka Player：谷歌开源的播放器，原生支持解析MP4、HLS、DASH容器内的多种格式内嵌字幕，不需要额外引入插件，对字幕的渲染兼容性比Video.js更好，也有成熟的Angular适配包。
• Plyr：UI交互更现代化，底层可对接原生video或Video.js，对字幕的配置封装更简单，适合快速落地需求。

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