您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章为大家展示了使用Vue怎么编写一个播放器，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
HTML+CSS+JS
<section id="xwyy">
<!--主体区域-->
<section class="box" >
<div class="nav">
<div class="nava">
<h2>小王音乐</h2>
</div>
<!--搜索框-->
<div class="navb">
<input type="text" autocomplete="off" v-model.lazy="query" @keyup.enter="searchMusic" placeholder="搜索想听的歌" />
</div>
</div>
<div class="boxa">
<!--歌曲列表-->
<div class="boxa1">
<ul>
<li v-for="item in musicList">
<a href="#" @click="playMusic(item.id)" class="iconfont icon-bofang1"></a>
<label>{{item.name}}</label>
<a href="#" v-if="item.mvid!=0" @click="playMv(item.mvid)" class="iconfont icon-MV"> </a>
</li>
</ul>
</div>
<!--歌曲信息-->
<div class="boxa2" :class="{playing:isPlayin}">
<img src="img/cd1.png" class="imga" />
<img src="img/cd.png" class="imgb autoRotate" />
<img :src="musicCover" class="imgc autoRotate" />
</div>
<!--歌曲评论-->
<div class="boxa3">
<h2>热门评论</h2>
<div class="boxa3_nr" v-for="item in hotComments">
<div class="boxa3_nr1">
<img :src="item.user.avatarUrl" />
</div>
<div class="boxa3_nr2">
<h4>{{item.nickname}}</h4>
<div class="a3p">
{{item.content}}
</div>
</div>
</div>
</div>
</div>
<!--播放音乐-->
<div class="boxb">
<audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop>
</audio>
</div>
<div class="mv" v-show="isShow">
<video ref='video' :src="mvUrl" width="100%" height="100%" controls="controls">
</video>
</div>
<div class="mk" @click="hide" v-show="isShow">
</div>
</section>
</section>* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
body {
background-image: url(../img/acg.jpg);
background-size: 100%;
position: relative;
}
.box {
width: 1000px;
height: 570px;
background-color: rgba(205, 205, 205, 0.4);
margin: 0 auto;
position: relative;
}
.nav {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
background-image: linear-gradient(to bottom right, #e66465, #9198e5);
/*渐变*/
}
.nav h2 {
padding-left: 20px;
color: #fff;
font-size: 16px;
}
.navb {
width: 230px;
height: 25px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
display: flex;
align-items: center;
overflow: hidden;
margin-right: 20px;
}
.navb input {
width: 80%;
border: 0px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0);
margin-left: 10px;
font-size: 12px;
color: #fff;
outline: none/*去掉聚焦框*/
}
/*改变input中placeholder的颜色*/
.navb input::-ms-input-placeholder {
color: silver;
}
.navb input::-webkit-input-placeholder {
color: silver;
}
.boxa {
width: 100%;
min-height: 500px;
box-sizing: content-box;
display: flex;
justify-content: space-between;
}
.boxa1 {
width: 250px;
height: 500px;
display: flex;
justify-content: center;
border-right: 2px solid rgba(205, 205, 205, 0.3);
overflow-x: hidden;
scrollbar-width: none;
/*兼容火狐*/
-ms-overflow-style: none;
/*兼容IE*/
}
.boxa1::-webkit-scrollbar {
/*兼容谷歌*/
display: none;
}
.boxa1 a {
display: block;
width: 15px;
height: 15px;
/*background-image: url(../img/bf.jpg);
background-size:100% ;*/
text-decoration: none;
color: red;
}
.boxa1 i {
display: block;
width: 15px;
height: 15px;
background-image: url(../img/2.png);
}
.boxa1 li {
display: flex;
justify-content: space-between;
align-items: center;
width: 210px;
padding: 5px;
margin-top: 10px;
/*background-color: rgba(0,0,0,0.2);*/
color: #000;
}
.boxa1 label {
margin-left: 20px;
margin-right: 25px;
}
.boxa1 li:nth-of-type(2n+1) {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
.boxa2 {
width: 500px;
height: 500px;
border-right: 1px solid rgba(205, 205, 205, 0.3);
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
.boxa3 {
width: 250px;
height: 500px;
position: relative;
overflow-x: hidden;
scrollbar-width: none;
/*兼容火狐*/
-ms-overflow-style: none;
/*兼容IE*/
}
.boxa3::-webkit-scrollbar {
/*兼容谷歌*/
display: none;
}
.boxa3 h2 {
position: absolute;
top: 5px;
left: 40%;
}
.boxa3_nr {
width: 260px;
height: ;
margin-top: 30px;
overflow: hidden;
margin-left: 20px;
}
.boxa3_nr1 {
width: 50px;
height: 50px;
float: left;
overflow: hidden;
border-radius: 50px;
}
.boxa3_nr2 {
width: 150px;
height: ;
margin-left: 10px;
float: left;
overflow: hidden;
}
.boxa3_nr2 h4 {
font-size: 15px;
}
.clear {
clear: left;
}
.a3p {
width: 150px;
height: ;
margin-top: 5px;
}
.boxa3 img {
width: 100%;
height: 100%;
}
.boxb {
width: 100%;
height: 40px;
background-color: aliceblue;
}
.boxb audio {
width: 100%;
height: 100%;
}
/*是否正在播放*/
.boxa2.playing .imgb,
.boxa2.playing .imgc {
animation-play-state: running;
}
/*杆*/
.boxa2.playing .imga {
transform: rotate(45deg);
transition: .5s;
}
@keyframes Rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
/*旋转的类名*/
.autoRotate {
animation-name: Rotate;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
animation-duration: 5s;
}
.imga {
display: block;
width: 120px;
height: 60px;
position: absolute;
top: -5px;
right: 100px;
z-index: 3;
transform: rotate(0);
transform-origin: 12px 12px;
transition: .5s;
}
.imgb {
display: block;
width: 300px;
height: 300px;
margin-top: 50px;
position: relative;
}
.imgc {
display: block;
width: 220px;
height: 220px;
position: absolute;
top: 19%;
left: 29%;
z-index: -2;
border-radius: 100px;
}
.mv {
width: 1000px;
height: 600px;
position: absolute;
background-color: #000;
top: 0;
left: 0;
z-index: 7;
}
.mk {
width: 1000px;
height: 600px;
position: absolute;
top: 0;
left: 0;
transform: scale(6);
background-color: rgba(0, 0, 0, 0.7);
z-index: 5;
}
.mv video {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}var xwyy = new Vue({
el:"#xwyy",
data:{
query:"",
musicList:[],
musicUrl:"",
musicCover:"",
hotComments:[],
isPlayin:false,
isShow:false,
mvUrl:""
},
methods:{
/*歌曲搜索*/
searchMusic:function(){
var that = this;
axios.get("https://autumnfish.cn/search?keywords="+this.query)
.then(function(response){
that.musicList = response.data.result.songs;
},function(err){});
},
/*歌曲播放*/
playMusic:function(muiscId){
var that = this;
/*获取歌曲地址*/
axios.get("https://autumnfish.cn/song/url?id="+muiscId)
.then(function(response){
that.musicUrl = response.data.data[0].url;
},function(err){})
/*获取歌曲图片*/
axios.get("https://autumnfish.cn/song/detail?ids="+muiscId)
.then(function(response){
that.musicCover = response.data.songs[0].al.picUrl;
},function(err){})
/*获取歌曲评论*/
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+muiscId)
.then(function(response){
that.hotComments = response.data.hotComments;
},function(err){})
},
/*播放*/
play:function(){
this.isPlayin = true;
},
/*暂停*/
pause:function(){
this.isPlayin = false;
},
playMv:function(mvid){
var that = this;
axios.get("https://autumnfish.cn/mv/url?id="+mvid)
.then(function(response){
that.isShow = true;
that.mvUrl = response.data.data.url;
},function(err){})
},
/*隐藏mv*/
hide:function(){
this.isShow = false;
/*关闭mv*/
this.$refs.video.pause();
}
}
});上述内容就是使用Vue怎么编写一个播放器，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。