vue实现视频流播放_vue播放视频流

方式一：easywasmplayer

1、依赖下载

 npm install @easydarwin/easywasmplayer --save
1

2、复制文件到public下

安装好之后，在node-modules中，会出现@easydarwin–>easywasmplayer文件

如果在vscode中没有找到，可以进入到文件夹中进行查找

找到文件夹下的EasyWasmPlayer.js和libDecoder.wasm

将其复制到public文件夹下

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

<script src="./EasyWasmPlayer.js"></script>   
1

4、使用

页面

      <div class="video-box">
        <div id="Player"></div>
      </div>
1
2
3

变量

      player: "",
      vUrl: "",
1
2

方法

//播放方法
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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5、其他方法

方式二：flv.js

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