如何设置圆形videojs的滑块按钮的样式

<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>

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

var player = videojs('my-video');
player.ready(function() {
  var controlBar = player.controlBar;
  var progressControl = controlBar.progressControl;
  var seekBar = progressControl.seekBar;
  var playProgressBar = seekBar.playProgressBar;

  // 设置滑块按钮的样式
  playProgressBar.addClass('custom-slider');

  // 添加自定义样式
  var style = document.createElement('style');
  style.innerHTML = '.custom-slider .vjs-play-progress:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: #ff0000; }';
  document.head.appendChild(style);
});

.custom-slider .vjs-play-progress {
  background-color: transparent !important;
}