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

【问题标题】：Videojs - how to add a custom icon in the control barVideojs - 如何在控制栏中添加自定义图标
【发布时间】：2020-03-02 12:32:32
【问题描述】：

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

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

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

但添加图像不起作用。有人可以帮助我吗？非常感谢

【问题讨论】：

codepen.io/anon/pen/KpRZBe

标签： jquery html html5-audio video.js

【解决方案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>

【讨论】：

【解决方案2】：

注意：这是在目前最新版本的videojs（v7.15.0）中测试的

根据https://docs.videojs.com/tutorial-components.html#creating-a-component 的文档，我们将首先创建一个 VideoJS Button 组件并创建要添加到控制栏的按钮实例。

获取视频js实例：

var player = videojs(document.querySelector('#videoJsPlayer'))

接下来让我们创建 Button 组件并向我们的 videojs 播放器实例添加一个按钮：

      var ButtonComp = videojs.getComponent('Button');
      var notesBut = new ButtonComp(player, {
        clickHandler: function(event) {
          videojs.log('Custom Button Clicked');
          //Perform your logic here !
        }
      });

我们将添加一个自定义类，以便我们可以访问此特定按钮并添加图标，从而将我们的自定义按钮附加到 controlBar

     notesBut.addClass('addNotesBut')
     player.controlBar.addChild(notesBut,{},3)
     console.log(notesBut.contentEl());

在这里，我将我的按钮添加到第三个索引，这意味着第四个位置。控制台显示以下输出：

    <button class="vjs-control vjs-button addNotesBut" type="button" aria-disabled="false">
        <span aria-hidden="true" class="vjs-icon-placeholder"></span>
        <span class="vjs-control-text" aria-live="polite"></span>
    </button>

请注意，我们会将图标添加到新创建按钮的 vjs-icon-placeholder 中。我们通过类访问它并插入如下所示的图标。我添加了一个引导图标并使用了它的 SVG。您可以使用不同的 HTML 标签，例如或。

document.querySelector('.addNotesBut .vjs-icon-placeholder').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-plus" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>'

因此，这就是您可以将自定义图标添加到 VideoJS 的方式。

【讨论】：