video js 播放控件自定义

要自定义 Video.js 的播放控件，您可以使用 Video.js 的插件系统来添加自定义功能和样式。下面是一个示例代码，演示如何自定义 Video.js 的播放控件：

首先，确保您已经引入了 Video.js 的库文件和样式表：

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

然后，您可以使用以下 JavaScript 代码来添加自定义的播放控件：

<video id="my-video" class="video-js" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <!-- 其他视频源 -->
</video>

<script>
  // 初始化 Video.js
  var player = videojs('my-video');

  // 添加自定义控件
  player.ready(function() {
    // 创建一个新的按钮
    var myButton = player.controlBar.addChild('button', {}, {});
    myButton.addClass('my-button-class'); // 添加自定义的 CSS 类

    // 当按钮被点击时执行的操作
    myButton.on('click', function() {
      // 在这里编写您想要执行的操作
      // 例如：显示一个弹窗、切换视频源等
      console.log('按钮被点击');
    });
  });
</script>

在上述代码中，我们首先创建了一个 `<video>` 元素，并给它设置了一个唯一的 `id`，以及 `class="video-js"` 和 `controls` 属性，这样 Video.js 就会将其作为视频播放器来处理。

然后，我们使用 `videojs('my-video')` 初始化 Video.js 播放器，并在 `player.ready` 回调函数中添加自定义的按钮。您可以通过 `addChild()` 方法添加一个新的按钮，并使用 `addClass()` 方法为按钮添加自定义的 CSS 类。

最后，在按钮的 `click` 事件监听器中，您可以编写您想要执行的自定义操作。

请注意，您可以根据需要在自定义按钮中添加更多的功能和样式，详情可参考 Video.js 的文档（https://docs.videojs.com/）。

希望以上解决方案对您有帮助。如果有任何问题，请随时提问。