VideoJS v5 - 在 ES6 中添加自定义组件 - 我做得对吗？

Question

我正在为VideoJS v5编写一个社交共享插件：我想在控制栏下方的播放器标记中添加一个 div，其中包含几个链接，允许在我网站上的文章中对播放器实例进行社交共享。我在 ES6 工作。

VideoJS 文档很少，特别是对于 v5 - 我在源代码中摸索以试图弄清楚如何做到这一点。我确实找到了这个VideoJS 组件子类化的例子。

这是我到目前为止所得到的 - 如果我犯了风格犯罪，我很抱歉，我对 VideoJS 插件或 ES6 类没有太多经验。

videojs.plugin('social-share', function(opts) {
  let player = this;

  const Component = videojs.getComponent('Component');
  const ClickableComponent = videojs.getComponent('ClickableComponent');

  class VjsShareBar extends Component {
    constructor(player, opts) {
      super(player, opts);
    }

    createEl() {
      return super.createEl('div', {
        className: 'vjs-share-bar video-share share-buttons'
      }, {
        'role': 'group'
      });
    }
  }

  class VjsShareButton extends Component {
    constructor(player, opts) {
      super(player, opts);
    }

    createEl() {
      return super.createEl('a', {
        className: 'share-button'
      })
    }
  }

  let twitterShareBtn = new VjsShareButton(player, opts);
  twitterShareBtn.addClass('twitter');

  let twitterShareIcon = new Component(player, opts);

  let fbShareBtn = new VjsShareButton(player, opts);
  fbShareBtn.addClass('facebook');

  let vjsShareBar = player.addChild(new VjsShareBar(player, opts));
  vjsShareBar.addChild(twitterShareBtn);
  vjsShareBar.addChild(fbShareBtn);

});

这会将预期的元素添加到video-js容器内的玩家标记中：

<div class="vjs-share-bar video-share share-buttons" role="group">
    <a class="share-button twitter"></a>
    <a class="share-button facebook"></a>
</div>

我是否需要这种为每个元素扩展新子类的方法？好像有点笨重。有没有一种方法可以为我想要创建的每个元素简单地创建 VideoJS组件类的新实例，每次传入不同的标记名和类？我需要在a标签中添加跨度，以及扩展一个新的想法Component为每个子类似乎有点过分。

（我网站中现有的事件处理程序将处理链接上的点击，所以我不会用播放器 API 监听点击事件。我使用的是简单的Component类，因为不希望额外的碰撞更具体的类，比如ClickableComponent并Button添加到标记中。）

Answer 1

这已经很老了，但我写了一篇关于如何以灵活的方式为 Video.js 创建自定义组件的文章。

不幸的是，他们的文档还不是很有帮助，所以我写了这篇文章。 https://nikushx.com/blog/2019/05/21/creating-custom-components-with-video-js/

class ToggleCaptionsButton extends videojs.getComponent('Button') {

    constructor(player, options = {}) {
        super(player, options);
            this.addClass('vjs-captions-toggle');

            // captions are "on" by default
            this.addClass('vjs-captions-on');
        }

    /**
    * Toggle the subtitle track on and off upon click
    */
    public handleClick(_e) {
        const textTracks = this.player.textTracks();

        for (let i = 0; i < textTracks.length; i++) {
            if (textTracks[i].kind !== 'subtitles') {
                continue;
            }

            // toggle showing the captions
            if (textTracks[i].mode === 'showing') {
                textTracks[i].mode = 'hidden';
                this.removeClass('vjs-captions-on');
            } else {
                textTracks[i].mode = 'showing';
                this.addClass('vjs-captions-on');
            }
        }
    }
}