Reactjs Videojs自定义TextTrackDisplay不工作

我在我的项目中有自定义播放器控件的要求。除了TextTrackDisplay组件之外，我发现了很多关于如何实现这一点的文档。出于某种原因，这个组件已经由videojs呈现，但呈现的代码似乎没有关于标准hls流（bip bop）的任何现有文本轨迹的线索

我已经创建了play按钮成功定制的代码示例，但TextTrackDisplay并不是出于某种原因

类播放器扩展React.Component{
init=（videoRef）=>{
const videoJsOptions={
控件：false，
html5:{nativeTextTracks:false}，
};
constplayer=videojs（videoRef，videoJsOptions，（）=>{
常量类型='application/x-mpegURL'；
常数src=https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
player.pause（）；
src（{type，src}）；
player.play（）；
这个。连接播放按钮（播放器）；
这个.connectTextTracks（播放器）；
});
}
连接播放按钮=（播放器）=>{
常量选择器=“[data play btn]”；
const allegements=Array.from（document.querySelectorAll（selector））；
等位基因。forEach（（框）=>{
const playtogle=videojs.getComponent（'playtogle'）；
const playtokle=新的playtokle（玩家）；
appendChild（playtokle.el（））；
});
};
connectTextTracks=（播放器）=>{
常量选择器=“[data text tracks]”；
const allegements=Array.from（document.querySelectorAll（selector））；
等位基因。forEach（（框）=>{
const TextTrackDisplay=videojs.getComponent（'TextTrackDisplay'）；
const textTrackDisplay=新的textTrackDisplay（播放器）；
appendChild（textTrackDisplay.el（））；
});
};
渲染（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

---

有人能帮我吗：）

我昨天晚上很累，这很愚蠢，但是对于控制面板中的显示“cc”，我们需要使用的不是“TextTrackDisplay”组件，而是“SubtitlesButton”。

我昨天晚上很累，这很愚蠢，但是对于控制面板中的显示“cc”，我们需要使用的不是“TextTrackDisplay”组件，我们需要使用的不是“TextTrackDisplay”组件，而是“SubtitlesButton”

class Player extends React.Component {
  init = (videoRef) => {
    const videoJsOptions = {
      controls: false,
      html5: {nativeTextTracks: false},
    };

    const player = videojs(videoRef, videoJsOptions, () => {
      const type = 'application/x-mpegURL';
      const src = 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
      player.pause();
      player.src({type, src});
      player.play();

      this.connectPlayButton(player);
      this.connectTextTracks(player);
    });
  }

  connectPlayButton = (player) => {
    const selector = '[data-play-btn]';
    const allElements = Array.from(document.querySelectorAll(selector));
    allElements.forEach((box) => {
      const PlayToggle = videojs.getComponent('PlayToggle');
      const playToggle = new PlayToggle(player);
      box.appendChild(playToggle.el());
    });
  };

  connectTextTracks = (player) => {
    const selector = '[data-text-tracks]';
    const allElements = Array.from(document.querySelectorAll(selector));
    allElements.forEach((box) => {
      const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
      const textTrackDisplay = new TextTrackDisplay(player);
      box.appendChild(textTrackDisplay.el());
    });
  };

  render () {
    return (
      <div data-vjs-player>
        <video ref={this.init} className="video-js-video">
        </video>
        <div data-play-btn></div>
        <div data-text-tracks></div>
      </div>
    )
  }
}

ReactDOM.render(
  <Player/>,
  document.getElementById('root')
);