video js 自定义按钮

Video.js是一个基于HTML5视频技术的开源框架，可以轻松地将视频集成到您的网站或应用程序中。

如果您想要自定义Video.js的按钮，可以使用其API中的"ControlBar"选项。 ControlBar允许您轻松地添加、删除或调整Video.js播放器控件的位置。

以下是自定义Video.js按钮的步骤：

首先，在您的HTML文件中加载Video.js库和自定义CSS样式表：

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<link href="custom.css" rel="stylesheet" />
创建您自己的控件按钮，并在Video.js初始化选项中使用“controlBar”属性添加控件按钮。
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
  <source src="my-video.mp4" type="video/mp4">
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</video>
<script>
var player = videojs('my-video', {
  controlBar: {
    children: [
      'playToggle', // 播放/暂停按钮
      'currentTimeDisplay', // 当前时间
      'timeDivider', // 时间分隔符
      'durationDisplay', // 总时长
      'progressControl', // 进度条
      'customButton' // 自定义按钮
  plugins: {
    samplePlugin: {
      option1: 'value1',
      option2: 'value2'
player.ready(function(){
  player.controlBar.addChild('customButton', {});
</script>
添加自定义按钮的CSS样式和JavaScript逻辑
在custom.css中添加以下样式：
.vjs-custom-button .vjs-icon-placeholder:before {
  content: '\f111'; /* 字体图标编码 */
  font-family: FontAwesome;
  font-size: 16px;
  color: #fff;
在JavaScript中添加以下逻辑：
videojs.registerComponent('customButton', videojs.Button.extend({
  constructor: function(player, options) {
    videojs.Button.call(this, player, options);
    this.controlText("Custom Button");
  handleClick: function() {
    alert('You clicked the custom button!');
这个例子创建了一个名为"customButton"的自定义按钮，并使用FontAwesome字体图标作为按钮的图标。点击自定义按钮时，它将弹出一个警告框。
这就是如何在Video.js中创建自定义按钮的基本过程。通过这种方式，您可以添加任何类型的自定义按钮并添加适当的逻辑和样式。
希望这个例子可以帮助您了解如何自定义Video.js按钮。