25.music-MV播放

MV播放
1.MV标示显示(v-if
2.MV地址获取
3.遮罩层(v-show v-on
4.MV地址设置(v-bind

mv地址获取(以下为黑马程序员课程提供)
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址

在musicList里面找寻数据，我们可以看到mvid若不为0则代表有mv

因此我们要去筛选有mv的选项，这时就有逻辑问题了，我们要用v-if去筛掉mv==0的，剩下有MV的就会显示标示啦

 <!-- 歌曲列表中加入MV标示--><span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i class="mv">MV</i></span>

接着我们要设置播放MV

设置完了之后我们要让MV播放出来，而且成功播放之后，要能关起来，所以我们要在设置一个hide

<div class="video_con" v-show="isShow" style="display: none;">        <video :src="mvUrl" controls="controls"></video>        <div class="mask" @click="hide"></div>      </div>

 playMV(mvid){              var that = this;              axios.get("https://autumnfish.cn/mv/url?id=" + mvid)              .then(function(response){                //console.log(response)                console.log(response.data.data.url);                that.isShow = true;                that.mvUrl = response.data.data.url;              },function(err){})            },             // 隐藏            hide(){              this.isShow = false;            }        }

MV呈现(点击黑色区域即关闭)

这样就完成所有功能啦

参考资料https://www.bilibili.com/video/BV1HE411e7vY/?p=36&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967