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

Question

我在 React 中有一个使用视频 js 的自定义视频播放器组件ui。我正在尝试使用 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 插件。

Answer 1

我不得不专门调用这两行：

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

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

How to use videojs-contextmenu in a custom Videojs component?

video.js