uniapp 刷新video和live-player组件,实现刷新效果

Posted 风花一世月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 刷新video和live-player组件,实现刷新效果相关的知识,希望对你有一定的参考价值。

思路:

点击刷新时,用v-if将video元素隐藏,改变一个值,并在watch里监听这个值,值改变的时候

  

<live-player id="live-video" :src="dataObj.serverAddress" v-if="showVideo" autoplay></live-player>

 

refresh(){
  console.log("刷新视频")
  this.refreshdata+=1;
  this.showVideo = false;
}

  将showVideo变为true的方法放在this.$nextTick()中,触发浏览器的重排,可以使浏览器重新获取video和live-player的src值,重新加载视频资源。

watch:{
refreshdata (old,new) {
  this.$nextTick(() => {
    this.showVideo = true
  })
}
},

  

以上是关于uniapp 刷新video和live-player组件,实现刷新效果的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 滚动加载和下拉刷新

uni-app video开始播放默认全屏

uniapp video 视频暂停,且展示题目

uniapp微信小程序video视频监听播放时间

uniapp如何下载video.js

uniapp实现禁止video拖拽快进