如何在自定义 Videojs 组件中使用 videojs-contextmenu？答案

【问题标题】：How to use videojs-contextmenu in a custom Videojs component?如何在自定义 Videojs 组件中使用 videojs-contextmenu？
【发布时间】：2018-09-02 17:34:08
【问题描述】：

我在 React 中使用视频 js 构建了一个自定义视频播放器组件。我正在尝试使用 videojs-contextmenu 和 videojs-contextmenu-ui 实现上下文菜单。但是，当我尝试初始化插件时，出现以下错误。

Message: Uncaught TypeError: this.playerInstance.contextmenuUI is not a function - URL: webpack-internal:///375 - Line: 116 - Column: 27 - Error object: {}

既然我已经自定义了组件，我该如何初始化插件。我已经导入了 videojs，然后才导入了 videojs-contextmenu 和 videojs-contextmenu-ui。

import videojs from 'video.js';
import SmartModeToggleMenuButton from './SmartModeToggleMenuButton';
import 'videojs-contextmenu';
import 'videojs-contextmenu-ui';

const Player = videojs.getComponent('Player');
videojs.registerComponent('smartModeToggleMenuButton', SmartModeToggleMenuButton);

class SmartModePlayer extends Player {

  constructor(tag, options,ready) {
    super(tag,options, ready);
    //some custom code
  }      

}

videojs.registerComponent('SmartModePlayer', SmartModePlayer);

export default SmartModePlayer;

然后，我在其他地方使用 SmartModepLayer，如下所示：

this.playerInstance = new SmartModePlayer(this.kaalRecordingPlayer, options , function () {});
this.playerInstance.contextmenuUI();

在上述自定义组件中使用时如何正确使用 videojs-conetxtmenu-ui 插件。

【问题讨论】：

标签： video.js

【解决方案1】：

我必须专门调用这 2 行：

videojs.registerPlugin('contextmenu', VjsContextMenu);
videojs.registerPlugin('contextmenuUI', VjsContextMenuUI);

【讨论】：