如何为Video.js v4.9.1播放器动态添加或切换字幕

针对你遇到的字幕无法添加、切换的问题，结合v4.9.1版本特性，给出以下可行方案：

方案一：初始化播放器时正确配置字幕轨道 #

v4.9.1版本的tracks选项需传入对象数组，且要保证在DOM元素加载完成后执行初始化，同时确保播放器控件开启：

document.addEventListener('DOMContentLoaded', function() {
  var player = videojs('theater_video', {
    controls: true, // 必须开启控件，才能显示字幕切换按钮
    tracks: [
      {
        src: '/resources/videos/whale_Shailene/Spanish.vtt',
        kind: 'subtitles',
        srclang: 'es',
        label: 'Español',
        mode: 'hidden' // 默认隐藏，如需默认显示改为'showing'
      },
      {
        src: '/resources/videos/whale_Shailene/Arabic.vtt',
        kind: 'subtitles',
        srclang: 'ar',
        label: 'عرب.',
        mode: 'hidden'
      }
    ]
  });
});

方案二：初始化后手动添加字幕轨道 #

如果初始化阶段未配置，可在播放器ready事件触发后，用addRemoteTextTrack方法添加：

var player = videojs('theater_video');
player.ready(function() {
  // 添加西班牙文字幕
  player.addRemoteTextTrack({
    src: '/resources/videos/whale_Shailene/Spanish.vtt',
    kind: 'subtitles',
    srclang: 'es',
    label: 'Español'
  }, false); // 第二个参数设为false，避免自动激活该字幕

  // 添加阿拉伯文字幕
  player.addRemoteTextTrack({
    src: '/resources/videos/whale_Shailene/Arabic.vtt',
    kind: 'subtitles',
    srclang: 'ar',
    label: 'عرب.'
  }, false);
});

手动切换/关闭字幕 #

若需自定义按钮控制字幕，可通过操作字幕轨道的mode属性实现：

// 切换到西班牙文字幕
function switchToSpanishSub() {
  var tracks = player.textTracks();
  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.mode = (track.kind === 'subtitles' && track.srclang === 'es') ? 'showing' : 'hidden';
  }
}

// 关闭所有字幕
function closeAllSubtitles() {
  var tracks = player.textTracks();
  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    if (track.kind === 'subtitles') {
      track.mode = 'hidden';
    }
  }
}

关键注意事项 #

• 检查VTT文件路径是否正确，可通过浏览器控制台的网络请求确认文件是否成功加载。
• 确保VTT文件格式合规：第一行必须为WEBVTT，时间轴格式需符合HH:MM:SS.mmm --> HH:MM:SS.mmm规范。
• 若自定义过Video.js的CSS，需确认.vjs-subtitles-button类未被隐藏，否则无法看到字幕切换按钮。

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