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
},
相关推荐
我不吃饼干2 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇2 小时前
前端PerformanceObserver
前端
王者鳜錸2 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录2 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry3 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明4 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask4 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE4 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack4 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住5 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js