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

Question

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

VideoJS 文档很少，尤其是对于 v5 - 我在源代码中四处寻找，试图弄清楚如何做到这一点。我确实找到了子类化 VideoJS 组件的this example。

这是我到目前为止所得到的 - 如果我犯了风格上的罪行，我深表歉意，我对 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 Component 类的新实例，每次都传入不同的标记名和类？我需要在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');
            }
        }
    }
}

Answer 2

除了@Nikush 很好的答案我想添加一些信息，以便其他人可以更快地找到解决方案。

您可以使用官方的 video-js 插件生成器来深入了解 video.js 的 bes 插件/组件模板。 videojs/generator-videojs-plugin

由于 video.js 提供的文档质量低而长期卡住了这是我找到的最佳模板：

1.组件：

     import document from "global/document";
     import video.js from "video.js";
     /**
     * @file etom-extras-logo-control-bar.js
     */
    
    /**
     * Add company logo with hyperlink link to control bar with options.
     *
     * @extends Button
     */
    
    //+++  Request videojs component (Button) [OR ANY OTHER COMPONENT LIKE (Component) +++//
    const Button = videojs.getComponent("Button");
    
    //+++  Default options for the Component. +++//
    const defaults = {};
    
    class EtomExtrasLogoInBar extends Button {
      /**
       * Creates an instance of this class.
       *
       * @param {Player} player
       *        The `Player` that this class should be attached to.
       *
       * @param {Object} [options={}]
       *        The key/value store of player options.
       */
    
      constructor(player, options = {}) {
        super(player, options);
        options = videojs.mergeOptions(defaults, options);
    
        const settings = {};
        const {} = settings;

        // start your work!!

      }
    }
    
    videojs.registerComponent("etomExtrasLogoInBar", EtomExtrasLogoInBar);
    export default EtomExtrasLogoInBar;

1.插件：

import document from "global/document";
import video.js from "video.js";

/** Import required plugins 
**  import "videojs-playlist";
**  import "./extras/plugins/overlay/etom-extras-videojs-overlay";
* @file etom-extras-playlist-extend.js
*/
/**
* Extend videoJs default playlist with extra features..
*
* @extends Plugin
*/

const Plugin = videojs.getPlugin("plugin");

// Default options for the plugin.
const defaults = {};


class EtomExtras extends Plugin {
  /**
   * Create a EtomExtras plugin instance.
   *
   * @param  {Player} player
   *         A Video.js Player instance.
   *
   * @param  {Object} [options]
   *         An optional options object.
   *
   *         While not a core part of the Video.js plugin architecture, a
   *         second argument of options is a convenient way to accept inputs
   *         from your plugin's caller.
   */

    constructor(player, options = {}) {
       super(player, options);
       options = videojs.mergeOptions(defaults, options);
    
       const settings = {};
       const {} = settings;

       // start your work!!

      }
   }

// Define default values for the plugin's `state` object here.
EtomExtras.defaultState = {};

// Include the version number.
EtomExtras.VERSION = VERSION;
// Register the plugin with video.js.
videojs.registerPlugin("etomExtras", EtomExtras);

export default EtomExtras;

请记住，您可以将组件和插件放在同一个文件中并使用与上述相同的内容。

谢谢大家。