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;

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

谢谢你们所有人。