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

现象:
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
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue.js组件开发-如何实现路由懒加载

在Vue.js应用中&#xff0c;路由懒加载是一种优化性能的技术&#xff0c;它允许在需要时才加载特定的路由组件&#xff0c;而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间&#xff0c;提高用户体验。在Vue Router中&#xff0c;实现路由懒加载非常简单&#xf…

带头双向循环链表(数据结构初阶)

文章目录 双向链表链表的分类概念与结构实现双向链表定义链表结构链表打印判空申请结点初始化头插尾插头删尾删查找指定位置插入和删除销毁链表 顺序表和链表的分析结语 欢迎大家来到我的博客&#xff0c;给生活来点impetus&#xff01;&#xff01; 这一节我们学习双向链表&a…

41,【7】CTFHUB WEB SQL Cookie注入

搜索知Cookie 是由服务器发送给用户浏览器的一小段文本信息&#xff0c;浏览器会将其保存下来&#xff0c;并且在后续的请求中自动将 Cookie 发送回服务器。 所以可以联想到cookie会出现在请求处&#xff0c;可以使用BP抓包 找到了 又是整形注入 可知字节数为2 找到回显点 得…

unity学习16:unity里向量的计算,一些方法等

目录 1 unity里的向量&#xff1a; 2 向量加法 2.1 向量加法的几何意义 2.2向量加法的标量算法 3 向量减法 3.1 向量减法的几何意义 3.2 向量减法的标量算法 4 向量的标量乘法 5 向量之间的乘法要注意是左乘 还是右乘 5.1 注意区别 5.2 向量&#xff0c;矩阵&#x…

卷积神经05-GAN对抗神经网络

卷积神经05-GAN对抗神经网络 使用Python3.9CUDA11.8Pytorch实现一个CNN优化版的对抗神经网络 简单的GAN图片生成 CNN优化后的图片生成 优化模型代码对比 0-核心逻辑脉络 1&#xff09;Anacanda使用CUDAPytorch2&#xff09;使用本地MNIST进行手写图片训练3&#xff09;…

堆的实现【C++】

堆的实现 概念实现完整代码 概念 介绍堆之前得说一下二叉树&#xff0c;因为堆的逻辑结构是二叉树&#xff0c;二叉树的树的子集&#xff0c;树只有一个根节点&#xff0c;向下衍生出了很多节点&#xff0c;并且这个节点之间相互没有连接&#xff0c;除非是父子节点&#xff0…

UI自动化测试:异常截图和page_source

自动化测试过程中&#xff0c;是否遇到过脚本执行中途出错却不知道原因的情况&#xff1f;测试人员面临的不仅是问题的复现&#xff0c;还有对错误的快速定位和分析。而异常截图与页面源码&#xff08;Page Source&#xff09;的结合&#xff0c;正是解决这一难题的利器。 在实…

语法

jQuery 的 .toggleClass() 方法用于在选定的元素上添加或移除一个或多个类。这个方法会检查每个元素中指定的类,如果类不存在,则添加它;如果类已设置,则删除它。这被称为切换效果。此外,可以通过使用 "switch" 参数来规定只删除或只添加类。 语法 (selector).…

Node.js 版本管理工具完全指南

Node.js 版本管理工具完全指南 目录 1. nvm (Node Version Manager)2. n (Node Package Manager)3. fnm (Fast Node Manager)4. Volta5. 工具对比 1. nvm (Node Version Manager) 1.1 安装指南 macOS/Linux # 使用 curl 安装 curl -o- https://raw.githubusercontent.com…

线程池底部工作原理

线程池内部是通过线程和队列实现的&#xff0c;当我们通过线程池处理任务时&#xff1a; 如果线程池中的线程数量小于corePoolSize&#xff0c;无论是否有处于空闲的线程&#xff0c;都创建新的线程来处理被添加的任务。 如果线程池中的线程数量等于corePoolSize&#xff0c;…

ASP.NET Core - 依赖注入(三)

ASP.NET Core - 依赖注入&#xff08;三&#xff09; 4. 容器中的服务创建与释放 4. 容器中的服务创建与释放 我们使用了 IoC 容器之后&#xff0c;服务实例的创建和销毁的工作就交给了容器去处理&#xff0c;前面也讲到了服务的生命周期&#xff0c;那三种生命周期中对象的创…

【C++】面试题整理(未完待续)

【C】面试题整理 文章目录 一、概述二、C基础2.1 - 指针在 32 位和 64 位系统中的长度2.2 - 数组和指针2.3 - 结构体对齐补齐2.4 - 头文件包含2.5 - 堆和栈的区别2.6 - 宏函数比较两个数值的大小2.7 - 冒泡排序2.8 - 菱形继承的内存布局 三、智能指针3.1 - 智能指针是线程安全的…

gitlab runner正常连接 提示 作业挂起中,等待进入队列 解决办法

方案1 作业挂起中,等待进入队列 重启gitlab-runner gitlab-runner stop gitlab-runner start gitlab-runner run方案2 启动 gitlab-runner 服务 gitlab-runner start成功启动如下 [rootdocserver home]# gitlab-runner start Runtime platform …

麦田物语学习笔记:构建游戏的时间系统

基本流程 1.代码思路 (1)新建一个TimeManager.cs (2)创建枚举变量来表示四季,在TimeManager里需要的变量有: 游戏内的秒,分钟,小时,天,月,年;游戏内的季节;控制一个季节有多少个月;控制时间的暂停;计时器tikTime (3)在Settings里添加计时器的阈值,以及各个时间的进位 (4)初始化…

Spring Boot教程之五十七:在 Apache Kafka 上发布 JSON 消息

Spring Boot | 如何在 Apache Kafka 上发布 JSON 消息 Apache Kafka是一个发布-订阅消息系统。消息队列允许您在进程、应用程序和服务器之间发送消息。在本文中&#xff0c;我们将了解如何在 Spring Boot 应用程序中向 Apache Kafka 发送 JSON 消息。 为了了解如何创建 Spring…

c++类和对象---下

文章目录 一、类的静态成员 1.1.静态成员变量&#xff1a;所有对象共享的成员变量。 1.2.静态成员函数&#xff1a;可以访问静态成员变量&#xff0c;但不能访问非静态成员变量。 二、类的继承 2.1.继承&#xff1a;子类继承父类的成员变量和成员函数。 2.2.多态&#xff1a;基…

计算机网络 (44)电子邮件

一、概述 电子邮件&#xff08;Electronic Mail&#xff0c;简称E-mail&#xff09;是因特网上最早流行的应用之一&#xff0c;并且至今仍然是因特网上最重要、最实用的应用之一。它利用计算机技术和互联网&#xff0c;实现了信息的快速、便捷传递。与传统的邮政系统相比&#…

代码随想录算法训练营day02| 977.有序数组的平方、209.长度最小的子数组、59.螺旋矩阵II

977. 有序数组的平方 双指针&#xff0c;新数组用k&#xff1b; 由于已经排序&#xff0c;所以比较两侧数据即可&#xff1b; class Solution { public:vector<int> sortedSquares(vector<int>& nums) {vector<int> ans(nums.size());int k nums.siz…

Unity 语音转文字 Vosk 离线库

市场有很多语音库&#xff0c;这里介绍Vosk SDK 除了支持untiy外还有原生开发服务器等 目录 安装unity示例demo下载语音训练文件运行demo结尾一键三联 注意事项 有可能debug出来的文本是空的&#xff0c;&#xff08;确保麦克风正常&#xff0c;且索引正确&#xff09;分大…

网络网络层ICMP协议

网络网络层ICMP协议 1. ICMP 协议介绍 ICMP&#xff08;Internet Control Message Protocol&#xff09;是 TCP/IP 协议簇中的网络层控制报文协议。用于在 IP 主机、路由器之间传递控制消息&#xff0c;提供可能有关通信问题的反馈信息。 以及用于网络诊断或调试&#xff08;…