Videojs - 如何在控制栏中添加自定义图标 [英] Videojs - how to add a custom icon in the control bar

问题描述

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

I am using the videojs library to build a player audio. I would like to add the custom component, such as an image, in the control bar, before the play button.

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

I read how to add a custom button:

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

但是添加图片不起作用.有人可以帮助我吗?非常感谢

But it doesn't work to add image. Somebody can help me? Thanks a lot

推荐答案

对于图像，您可以添加一个组件，它会创建一个 div，并添加一个类来设置它的样式.

For an image you can add a Component, which creates a div, and add a class to style it.

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

这篇关于Videojs - 如何在控制栏中添加自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！