如何在最新版Video.js实现CC按钮一键切换字幕开关？

默认的Video.js字幕控件点击后会展开下拉菜单，要实现点击CC按钮直接切换字幕开启/关闭状态，可以通过以下方式实现：

核心实现代码 #

const player = videojs('my-video');

player.ready(() => {
  // 定位到字幕控制按钮
  const ccButton = player.controlBar.children().find(el => el.name() === 'captionsButton');

  ccButton.on('click', (e) => {
    // 阻止默认的下拉菜单展开行为
    e.preventDefault();
    e.stopPropagation();

    const textTracks = player.textTracks();
    let activeTrack = null;

    // 查找当前处于显示状态的字幕轨道
    for (let i = 0; i < textTracks.length; i++) {
      const track = textTracks[i];
      if (track.mode === 'showing') {
        activeTrack = track;
        break;
      }
    }

    // 切换字幕状态：有激活轨道则关闭，无则开启首个可用字幕
    if (activeTrack) {
      activeTrack.mode = 'hidden';
    } else {
      // 示例：开启英语字幕，可根据需求修改逻辑
      for (let i = 0; i < textTracks.length; i++) {
        const track = textTracks[i];
        if (track.kind === 'subtitles' && track.language === 'en') {
          track.mode = 'showing';
          break;
        }
      }
      // 若无需指定语言，可替换为：
      // if (textTracks.length > 0) textTracks[0].mode = 'showing';
    }
  });
});

关键说明 #

• 代码基于Video.js官方textTracks API实现，兼容新版Video.js，避免旧插件过时问题
• 通过阻止CC按钮的默认点击行为，替换为自定义的字幕切换逻辑
• 可根据实际字幕轨道配置调整开启逻辑（比如循环切换多轨道、记忆上次选择的轨道等）

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