【知识分享】vue3在video.js播放器控制栏增加一个自定义按钮

实现思路：

1.自定义一个js文件，自定义按钮。

2.将自定义按钮加入控制栏

实现代码案例：

1.自定义的js文件：我这里自定义的叫videojs-pan-tilt-control-button.js

import videojs from 'video.js';

const Button = videojs.getComponent('Button');

class PanTiltControlButton extends Button {

  constructor(player, options) {

    super(player, options);

    this.customCode = options.code || ''; // 默认值为空字符串

     this.controlText('云台控制');

  }

  buildCSSClass() {

    return `vjs-my-custom-button ${super.buildCSSClass()}`;

  }

  handleClick() {

   if (!this.customCode) {

  console.warn('Custom code is not set.');

  return;

}

const controlClassName = `yuntai-${this.customCode}`;

const elements = document.querySelectorAll(`.${controlClassName}`);

elements.forEach(element => {

  const currentDisplay = window.getComputedStyle(element).display;

  if (currentDisplay === 'none') {

    element.style.display = 'block';

  } else {

    element.style.display = 'none';