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

已经很老了，但我写了一篇关于如何以灵活的方式为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');
            }
        }
    }
}

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

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

由于视频提供的文档质量低，经过长时间的卡住.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;

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

谢谢大家。