video.js自定义按钮

video.js插件的问题还是比较多的，比如我想有个重播回放的功能，如何实现呢？这就得用到自定义按钮。

//==========================自定义重播按钮============================//
import videojs from 'video.js';
import 'videojs-flvjs';
class ReplayButton extends videojs.getComponent('Button') {
  player;
  constructor(player, options) {
    super(player, options);
    this.player = player;
    // 设置按钮的可访问性文本
    this.el_.innerText = '重播';
  }

  handleClick() {
    // 暂停播放
    this.player.pause();
    // 将播放时间重置为 0
    this.player.currentTime(0);
    // 重新播放
    this.player.play();
  }
}

videojs.registerComponent('ReplayButton', ReplayButton);
...
this.player = videojs('my-video', {
      controlBar: {
        children: {
          // 添加自定义重播按钮
          replayButton: {
            name: 'ReplayButton',
          },
        },
      },
      techOrder: ['html5', 'flvjs'],
      poster: 'assets/img/poster.png',
      flvjs: {
        mediaDataSource: {
          isLive: true,
          cors: true,
          withCredentials: false,
        },
      },
 });
//=========================================================================//