Videojs-如何在控制栏中添加自定义图标

Question

我正在使用videojs库来构建播放器音频。我想在播放按钮之前的控制栏中添加自定义组件，例如图像。

我阅读了如何添加自定义按钮：

var button = videojs.getComponent('Button');
var closeButton = videojs.extend(button, {
    constructor: function() {
        button.apply(this, arguments);
    },
    /*  handleClick: function() {
        this.player().dispose();
    }*/
});

但是添加图像无效。有人可以帮助我吗？非常感谢

Answer 1

对于图像，您可以添加一个组件，该组件创建一个div，并添加一个类来为其设置样式。

<script>
  videojs('my_video').ready(function() {
    var img = this.controlBar.addChild('Component', {}, 0); // 3rd arg is index, i.e. first
    img.addClass("my-image");
  });
</script>
<style>
  .video-js .my-image {
    width: 40px;
    background: url(https://placekitten.com/38/28) center center no-repeat;
  }
</style>