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

风花一世月

发布于 2024-03-19 13:08:16

1230

发布于 2024-03-19 13:08:16

文章被收录于专栏：前端前端

思路：

点击刷新时，用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
　　})
}
},

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度