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

进击的企鹅呀2025-01-17 4:01

现象：

1、点击遮罩弹窗关闭，弹窗的视频已经用v-if销毁，但是后台会自己从头开始播放视频声音。但是此时已经没有视频dom

2、定时器在打开弹窗后3秒自动关闭弹窗，则正常没有问题。

原来的代码：

javascript 复制代码

//页面
<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()解决。但是还是没太懂原因，求各位大佬指点！！！

正常运行代码：

javascript 复制代码

//页面
<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= true
      this.$nextTick(()=>{
        document.getElementById('videoPlay').play()
      })
}
handleVideoClose(){
  document.getElementById('videoPlay').pause()
  this.isShow= false
},