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

蚊子 2023年04月20日 362次浏览

前言

vue版本:2.x

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

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

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

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

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


视频解决

要暂停的东西
image-1682000968521

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

2.在视频标签添加代码

ref="video"

image-1682001224807

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

this.spok = false;
this.$refs.video.pause()

音频解决

要暂停的东西
image-1682000441810
1.音乐标签添加代码

ref='audio'

image-1682000500909

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

than.spok=true;
 var than = this;
 than.$refs.audio.pause()

image-1682001769037


class标签判断

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