如何在Angular 7中使用waveurfer.js读取AVI文件

时间:2018-12-16 15:59:52

标签: javascript angular typescript video.js wavesurfer.js

我试图在waveurfer.js中播放AVI文件,当我将输入文件作为AVI提供​​时,它说无法读取编码的数据,但是使用wav文件则可以正常工作。所以我决定使用videojs.wavesurfer即时通讯,让我在控制台中看不到任何错误消息,并且无法通过以下代码在屏幕上看到任何内容,有人可以帮助我在waveurfer中读取avi文件。还是请让我知道我们是否无法在videojswavesurfer中阅读avi。

import WaveSurfer from '../../../../node_modules/wavesurfer.js'
import TimelinePlug  from '../../../../node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import videojs  from  '../../../../node_modules/videojs-wavesurfer/src/js/videojs.wavesurfer.js
var player;
   var options = {
       controls: true,
       autoplay: true,
       fluid: false,
       loop: false,
       width: 600,
       height: 300,
       plugins: {
           wavesurfer: {
               src: 'media/example.mp4',
               msDisplayMax: 10,
               debug: true,
               waveColor: '#336699',
               progressColor: 'black',
               cursorColor: 'black',
               hideScrollbar: true
           }
       }
   };

   function createPlayer(event) {

       player = videojs('myVideo', options, function() {
           // print version information at startup
           var msg = 'Using video.js '+ videojs.VERSION +
               ' with videojs-wavesurfer ' +
               videojs.getPluginVersion('wavesurfer') +
               ' and wavesurfer.js ' + WaveSurfer.VERSION;
           videojs.log(msg);
       });
       player.on('waveReady', function(event) {
           console.log('waveform: ready!');
       });
       player.on('playbackFinish', function(event) {
           console.log('playback finished.');
       });
       // error handling
       player.on('error', function(error) {
           console.warn('ERROR:', error);
       });
   }';

这是我的html

 <div id="myVideo" class="video-js vjs-default-skin"></div>

1 个答案:

答案 0 :(得分:0)

https://wavesurfer-js.org/examples/

他们在这里给了所有的赞美物

对我有用