Question

我使用视频js在React中构建了一个自定义视频播放器组件。我正在尝试使用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？

1 个答案: