Video.JS:如何在视频容器中间添加自己的自定义播放和暂停按钮？

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
  <source src="path/to/your/video.mp4" type="video/mp4">
</video>

var player = videojs('my-video');

videojs.registerPlugin('customButtonPlugin', function() {
  var myButton = this.controlBar.addChild('button');
  
  myButton.addClass('my-custom-button');
  myButton.on('click', function() {
    if(player.paused()) {
      player.play();
    } else {
      player.pause();
    }
  });
  
  this.on('play', function() {
    myButton.removeClass('my-pause-button');
    myButton.addClass('my-play-button');
  });
  
  this.on('pause', function() {
    myButton.removeClass('my-play-button');
    myButton.addClass('my-pause-button');
  });
});

player.customButtonPlugin();

.my-custom-button {
  background: url(path/to/your/button.png) no-repeat center;
  width: 50px;
  height: 50px;
}

.my-play-button {
  background-position: 0 0; /* 播放按钮的图标位置 */
}

.my-pause-button {
  background-position: -50px 0; /* 暂停按钮的图标位置 */
}