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
    评论
Vue可以通过使用HTML5的video标签来实现视频播放,并且可以使用一些JavaScript库来实现记忆播放功能。 记忆播放是指当用户暂停或关闭视频后,下一次打开视频时可以从上次观看的时间点继续播放实现记忆播放功能的主要步骤如下: 1. 获取视频的当前时间点 在用户暂停或关闭视频时,可以通过监听video标签的timeupdate事件来获取视频的当前时间点。 ``` <video ref="video" @timeupdate="onTimeUpdate"></video> ... methods: { onTimeUpdate() { this.currentTime = this.$refs.video.currentTime; } } ``` 2. 将视频的当前时间点保存到本地存储 在获取到视频的当前时间点后,可以使用浏览器的本地存储(如localStorage)将其保存起来。在Vue中,可以使用Vue的mixin来实现全局的localStorage操作。 ``` const localStorageMixin = { methods: { setLocalStorage(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, getLocalStorage(key) { const value = localStorage.getItem(key); return value ? JSON.parse(value) : null; }, removeLocalStorage(key) { localStorage.removeItem(key); } } } Vue.mixin(localStorageMixin); ``` 在视频暂停或关闭时,可以将视频的当前时间点保存到本地存储。 ``` methods: { onTimeUpdate() { this.currentTime = this.$refs.video.currentTime; this.setLocalStorage('video-current-time', this.currentTime); }, onPause() { this.setLocalStorage('video-current-time', this.currentTime); }, onClose() { this.setLocalStorage('video-current-time', this.currentTime); } } ``` 3. 在视频播放时,从本地存储中获取上次观看的时间点 在视频播放时,可以在mounted或created生命周期钩子中从本地存储中获取上次观看的时间点,并将其设置为视频的初始时间点。 ``` mounted() { const currentTime = this.getLocalStorage('video-current-time'); if (currentTime) { this.$refs.video.currentTime = currentTime; } } ``` 通过以上步骤,就可以实现记忆播放功能。当用户暂停或关闭视频时,会将当前时间点保存到本地存储中,下一次打开视频时会从上次观看的时间点继续播放

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

WalkerShen

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

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

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

打赏作者

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

抵扣说明:

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

余额充值