h5使用video播放时关掉vant弹窗视频声音还在后台播放

现象：
1、点击遮罩弹窗关闭，弹窗的视频已经用v-if销毁，但是后台会自己从头开始播放视频声音。但是此时已经没有视频dom
2、定时器在打开弹窗后3秒主动关闭弹窗，则正常没有问题。
原来的代码：

1. //页面
2. <a @click="handleOpen()">点我打开弹窗</>
3. <van-popup v-model="isShow" v-if="isShow"  get-container="body" @click-overlay="handleVideoClose">
4.         <div class="container">
5.           <video v-if="isShow" id="videoPlay" class="video" controls autoplay="autoplay" :src="videoSrcs" preload></video>
6.         </div>
7.       </van-popup>
9. //方法
10. async handleOpen() {
11.       this.videoSrcs =‘http://视频链接’
12.       this.isShow= true
13. }
14. handleVideoClose(){
15.   document.getElementById('videoPlay').pause()
16.   this.isShow= false
17. },

复制代码

解决结果：
将video的autoplay属性去掉，使用.play()解决。但是还是没太懂原因，求各位大佬辅导！！！
正常运行代码：

1. //页面
2. <a @click="handleOpen()">点我打开弹窗</>
3. <van-popup v-model="isShow" v-if="isShow"  get-container="body" @click-overlay="handleVideoClose">
4.         <div class="container">
5.           <video v-if="isShow" id="videoPlay" class="video" controls :src="videoSrcs" preload></video>
6.         </div>
7.       </van-popup>
9. //方法
10. async handleOpen() {
11.       this.videoSrcs =‘http://视频链接’
12.       this.isShow= true
13.       this.$nextTick(()=>{
14.         document.getElementById('videoPlay').play()
15.       })
16. }
17. handleVideoClose(){
18.   document.getElementById('videoPlay').pause()
19.   this.isShow= false
20. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。