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

前言

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