Videojs控件栏自定义按钮

有个需求需要在视频的控件里加个按钮，点击可以切换，简单记录一下

设置

我查到一个简单的方法，直接上代码

const options = {
  controlBar: {
    children: [
        'playToggle',
        'currentTimeDisplay',
        'timeDivider',
        'durationDisplay',
        'progressControl',
        'liveDisplay',
        'seekToLive',
        'remainingTimeDisplay',
        'customControlSpacer',
        'playbackRateMenuButton',
        'chaptersButton',
        'descriptionsButton',
        'subsCapsButton',
        'audioTrackButton',
        // 'pictureInPictureToggle',
        {
          name: 'button',
          className: 'vjs-visible-text custom-control-button',
          controlText: '查看回放',
          clickHandler: function() {
            console.log('Clicked')
            this.controlText('返回')
          }
        },
        'volumePanel',
        'fullscreenToggle'
      ]
  }
}

只需要配置Videojs的options里的controlBar选项，通过children的顺序可以改变控件栏的排序，并且可以在其中插入你的自定义按钮，可以增加自定义class来改变样式

参考链接

Video.js Guides