videojs 按钮绑定自定义组件

要在 Video.js 中绑定一个自定义组件，需要执行以下步骤：

1. 创建一个继承自 `Component` 的自定义组件类。

2. 在该组件类中定义要添加的 DOM 元素，以及任何需要的事件监听器和方法。

3. 在 Video.js 中创建一个新的 `Button`，并将它的 `Button.prototype.buildCSSClass()` 方法重写为返回你的自定义组件的 CSS 类名。

4. 在 `Button.prototype.handleClick()` 方法中，创建一个实例化你的自定义组件的代码，并将其添加到 Video.js 播放器中。

下面是一个示例代码，演示了如何创建一个名为 `MyCustomButton` 的自定义组件，并将其绑定到 Video.js 的按钮上：

// 创建自定义组件类
class MyCustomComponent extends videojs.getComponent('Component') {
  constructor(player, options) {
    super(player, options);

    // 添加自定义 DOM 元素
    this.el().innerHTML = '<div class="my-custom-button">My Custom Button</div>';

    // 添加事件监听器和方法
    this.on('click', this.handleClick.bind(this));
  }

  handleClick() {
    console.log('My Custom Button clicked!');
  }
}

// 创建一个新的按钮，绑定自定义组件
videojs.registerComponent('MyCustomButton', videojs.extend(videojs.getComponent('Button'), {
  constructor: function() {
    videojs.getComponent('Button').apply(this, arguments);
  },

  // 重写 buildCSSClass() 方法，返回自定义组件的 CSS 类名
  buildCSSClass: function() {
    return 'vjs-my-custom-button';
  },

  // 重写 handleClick() 方法，创建自定义组件实例并添加到播放器中
  handleClick: function() {
    var myCustomComponent = new MyCustomComponent(this.player());
    this.player().addChild(myCustomComponent);
  }
}));

// 在 Video.js 控制条中添加自定义按钮
player.controlBar.addChild('MyCustomButton');

在上面的代码中，我们创建了一个名为 `MyCustomComponent` 的自定义组件，并在其中添加了一个 DOM 元素和一个事件监听器。然后，我们创建了一个新的 `Button`，并将其绑定到 `MyCustomComponent` 中。在 `Button.prototype.buildCSSClass()` 方法中，我们返回了自定义组件的 CSS 类名，以便 Video.js 中的样式可以应用到它上面。在 `Button.prototype.handleClick()` 方法中，我们创建了一个 `MyCustomComponent` 的实例，并将其添加到 Video.js 播放器中。最后，我们将自定义按钮添加到 Video.js 控制条中，使用 `player.controlBar.addChild()` 方法。

这样，当用户点击自定义按钮时，就会创建一个新的 `MyCustomComponent` 实例，并将其添加到 Video.js 播放器中。你可以根据需要修改或替换示例代码中的内容，以满足你的具体需求。