vue实现视频流播放

方式一:easywasmplayer

1、依赖下载
 npm install @easydarwin/easywasmplayer --save
2、复制文件到public下

安装好之后,在node-modules中,会出现@easydarwin–>easywasmplayer文件
image.png
如果在vscode中没有找到,可以进入到文件夹中进行查找
image.png
找到文件夹下的EasyWasmPlayer.jslibDecoder.wasm
vue实现视频流播放_第1张图片
将其复制到public文件夹下
vue实现视频流播放_第2张图片

3、在public目录index.html中添加引用
   

vue实现视频流播放_第3张图片

4、使用

页面

      

变量

      player: "",
      vUrl: "",

方法


//播放方法
doVideo() {
this.player = new WasmPlayer(null, "Player", this.callbackfun);
this.player.play(this.vUrl, 1);
},
//回调方法
callbackfun(e) {
  console.log(e)
    },

//关闭视频
this.player.destroy(this.vUrl)

//暂停视频
this.player.pause(this.vUrl);

5、其他方法

vue实现视频流播放_第4张图片

方式二:flv.js

这个是b站开源的,具体就不讲了,大家可以自己研究

你可能感兴趣的:(vue,vue.js,前端)