vue实现视频流播放

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

安装好之后,在node-modules中,会出现@easydarwin–>easywasmplayer文件
image.png
如果在vscode中没有找到,可以进入到文件夹中进行查找
image.png
找到文件夹下的EasyWasmPlayer.jslibDecoder.wasm
image.png
将其复制到public文件夹下
image.png

3、在public目录index.html中添加引用
<script src="./EasyWasmPlayer.js"></script>   

image.png

4、使用

页面

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

变量

      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、其他方法

image.png

方式二:flv.js

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

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WalkerShen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值