看b站某马学习，实现一个属于自己的播放器

HTML+CSS+JS

<section id="xwyy"> <!--主体区域--> <section class="box" style="margin-top: 30px;"> <div class="nav"> <div class="nava"> <h1>小王音乐</h1> </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"> <h1>热门评论</h1> <div class="boxa3_nr" v-for="item in hotComments"> <div class="boxa3_nr1"> <img :src="item.user.avatarUrl" /> </div> <div class="boxa3_nr2"> <h3>{{item.nickname}}</h3> <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 h1 { 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}.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; }.boxa1::-webkit-scrollbar { display: none;}.boxa1 a { display: block; width: 15px; height: 15px; 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; 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; }.boxa3::-webkit-scrollbar { display: none;}.boxa3 h1 { 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 h3 { 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){}) }, hide:function(){ this.isShow = false; this.$refs.video.pause(); } }});

总结

到此这篇关于利用Vue实现简易播放器的文章就介绍到这了,更多相关Vue实现简易播放器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！