首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Vue2处理音频和视频标签和class标签判断

Vue2处理音频和视频标签和class标签判断

作者头像
蚊子.
发布2023-08-10 12:36:22
发布2023-08-10 12:36:22
4520
举报
文章被收录于专栏:蚊子.蚊子.

前言

vue版本:2.x

1.要处理音频问题是: 问题: 点击播放音乐了,音乐也正在放,然后又点了视频,视频播放了,视频的音频也播放了,但是前面点的音乐仍然也在播放,没有停止

解决: 当点击视频,自动暂停音乐

--------------------------------------------------------------------------------------------------------------

2.要解决的视频问题: 问题: 点击播放视频了,又取消播放视频了,但是视频的音频文件还在播放

解决: 当取消播放视频,自动暂停视频和视频音频

视频解决

要暂停的东西

1.将你的style="display: none;"隐藏代码 换成 vue的v-show标签,然后将默认值先设置为:false

2.在视频标签添加代码

代码语言:javascript
复制
ref="video"

3.在关闭视频窗口方法添加,无需额外东西

代码语言:javascript
复制
this.spok = false;
this.$refs.video.pause()

音频解决

要暂停的东西

1.音乐标签添加代码

代码语言:javascript
复制
ref='audio'

2.点击切换到视频方法里面添加,无需额外东西

代码语言:javascript
复制
than.spok=true;
 var than = this;
 than.$refs.audio.pause()

class标签判断

当一个class标签,不同值时加载不同的css内容 可以直接那么写,zhuan是一个变量,值只有和true和false

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 视频解决
  • 音频解决
  • class标签判断
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档