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

我正在为以下内容编写一个社交共享插件：我想在控制栏下方的播放器标记中添加一个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>

为我要创建的每个元素初始化，每次传入不同的标记名和类？我需要在
a
标记中添加跨距，为每个标记扩展一个新的
组件
子类的想法似乎有些过分

（我的站点中现有的事件处理程序将处理链接上的点击，因此我不打算使用播放器API来监听点击事件。我使用简单的
组件
类，因为我不想额外增加更具体的类，如
可点击组件
和
按钮
添加到标记中。）
这是一篇非常古老的文章，但我写了一篇关于如何以灵活的方式为Video.js创建自定义组件的文章

不幸的是，他们的文档还不是非常有用，所以我写了这个。

class ToggleCaptionsButton扩展了videojs.getComponent（'Button'）{
构造函数（播放器，选项={}）{
超级（玩家、选项）；
this.addClass（'vjs-captions-toggle'）；
//默认情况下，标题为“开”
this.addClass（'vjs-captions-on'）；
}
/**
*单击即可打开和关闭字幕曲目
*/
公共把手舔{
const textTracks=this.player.textTracks（）；
for（设i=0；i
除了@Nikush很棒的答案，我想添加一些信息，以便其他人能够更快地找到解决方案

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

由于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;

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;

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;

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;

请记住，您可以将组件和插件放在同一个文件中，并使用与上面相同的方法

谢谢大家。
您的回答节省了很多人的时间。非常感谢。