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

现象:

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
},
相关推荐
Crystal3282 分钟前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476684 分钟前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin5 分钟前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风29 分钟前
小程序中获取元素节点
前端·小程序
PineappleCoder32 分钟前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost32 分钟前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
焚 城1 小时前
EXCEL(带图)转html【uni版】
前端·html·excel
我家媳妇儿萌哒哒1 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在1 小时前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go