现象:
1、点击遮罩弹窗关闭,弹窗的视频已经用v-if销毁,但是后台会自己从头开始播放视频声音。但是此时已经没有视频dom
2、定时器在打开弹窗后3秒自动关闭弹窗,则正常没有问题。
原来的代码:
//页面
<a @click="handleOpen()">点我打开弹窗</>
<van-popup v-model="isShow" v-if="isShow" get-container="body" @click-overlay="handleVideoClose"><div class="container"><video v-if="isShow" id="videoPlay" class="video" controls autoplay="autoplay" :src="videoSrcs" preload></video></div></van-popup>//方法
async handleOpen() {this.videoSrcs =‘http://视频链接’this.isShow= true
}
handleVideoClose(){document.getElementById('videoPlay').pause()this.isShow= false
},
解决结果:
将video的autoplay
属性去掉,使用.play()
解决。但是还是没太懂原因,求各位大佬指点!!!
正常运行代码:
//页面
<a @click="handleOpen()">点我打开弹窗</>
<van-popup v-model="isShow" v-if="isShow" get-container="body" @click-overlay="handleVideoClose"><div class="container"><video v-if="isShow" id="videoPlay" class="video" controls :src="videoSrcs" preload></video></div></van-popup>//方法
async handleOpen() {this.videoSrcs =‘http://视频链接’this.isShow= truethis.$nextTick(()=>{document.getElementById('videoPlay').play()})
}
handleVideoClose(){document.getElementById('videoPlay').pause()this.isShow= false
},