5

我在 Ionic 3 应用程序中使用Video.js来播放视频和音频，一切正常。但现在，我想将Video.js Wavesufer 插件用于音频。

我通过 npm 安装了插件：

npm install videojs-wavesurfer --save (plugin)
npm install wavesurfer.js --save (dependency)

并将它们导入到我的 component.ts 中：

import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';

我调用videojs了函数来初始化播放器：

ngAfterViewInit() {
    if (this.audio) {
        this.audio = this.audio.nativeElement;

        let audioJS = videojs(this.audio,
          {
            fluid: true,
            plugins: {
              wavesurfer: {
                src: this.audioSource,
                msDisplayMax: 10,
                debug: true,
                waveColor: 'grey',
                progressColor: 'black',
                cursorColor: 'black',
                hideScrollbar: true
              }
            }
          }, () => { }
        );
      }
  }

但控制台打印以下错误：

错误：插件“wavesurfer”不存在。

因此，我将对象更改为：

fluid: true,
plugins: { VideojsWavesurfer }

并且显然识别了插件，但现在我收到了这个错误（我说它显然识别了插件，因为这个错误来自videojs.wavesurfer.min.js）：

未捕获的错误：找不到模块“WaveSurfer”

我已经尝试添加WaveSurfer到导入，app.components.ts但没有任何变化。那么，我该如何解决呢？

4

1 回答 1

5

我在这里找到了 Github 上的解决方案

这有点像

在此处输入图像描述

于 2018-07-02T06:32:42.723 回答