reactjs - Videojs自定义TextTrackDisplay不起作用

Question

我的项目需要自定义播放器控件。除了 TextTrackDisplay 组件，我发现了很多文档如何使它成为可能。由于某种原因，该组件已由 videojs 渲染，但渲染的代码似乎对标准 hls 流 (bip-bop) 的任何现有文本轨道一无所知。

我创建了成功自定义播放按钮的代码示例，但 TextTrackDisplay 不是出于某种原因...

https://codepen.io/jurij-sergeewich-gerc/pen/xxxwPmN

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')
);

任何人都可以帮助我:))

标签： reactjsvideo.js

Answer 1

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