文章詳情頁

利用Vue實現簡易播放器的完整代碼

瀏覽：87日期：2022-10-14 15:03:20

看b站某馬學習，實現一個屬于自己的播放器

HTML+CSS+JS

<section id='xwyy'><section 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='http://www.gepszalag.com/bcjs/10457.html#' @click='playMusic(item.id)' class='iconfont icon-bofang1'></a><label>{{item.name}}</label><a href='http://www.gepszalag.com/bcjs/10457.html#' v-if='item.mvid!=0' @click='playMv(item.mvid)' class='iconfont icon-MV'> </a></li></ul></div><div :class='{playing:isPlayin}'><img src='http://www.gepszalag.com/bcjs/img/cd1.png' /><img src='http://www.gepszalag.com/bcjs/img/cd.png' /><img :src='http://www.gepszalag.com/bcjs/musicCover' /></div><div class='boxa3'><h1>熱門評論</h1><div v-for='item in hotComments'><div class='boxa3_nr1'><img :src='http://www.gepszalag.com/bcjs/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='http://www.gepszalag.com/bcjs/musicUrl' @play='play' @pause='pause' controls autoplay loop></audio></div><div v-show='isShow'><video ref=’video’ :src='http://www.gepszalag.com/bcjs/mvUrl' controls='controls'></video></div><div @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/*去掉聚焦框*/}/*改變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 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;}

總結

到此這篇關于利用Vue實現簡易播放器的文章就介紹到這了,更多相關Vue實現簡易播放器內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

Vue

上一條：Vue實現簡易購物車頁面下一條：vue+element UI實現樹形表格

相關文章：

1. IntelliJ IDEA導入jar包的方法2. SSM框架JSP使用Layui實現layer彈出層效果3. 刪除docker里建立容器的操作方法4. IntelliJ IDEA導出項目的方法5. java使用xfire搭建webservice服務的過程詳解6. .Net中的Http請求調用詳解(Post與Get)7. 解決IDEA項目project包目錄消失的問題8. Django實現將views.py中的數據傳遞到前端html頁面,并展示9. PHP下對緩沖區的控制10. Java源碼解析之ClassLoader

排行榜

					
					IntelliJ IDEA導入jar包的方法
SSM框架JSP使用Layui實現layer彈出層效果
刪除docker里建立容器的操作方法
IntelliJ IDEA導出項目的方法
PHP下對緩沖區的控制
.Net中的Http請求調用詳解(Post與Get)
Django實現將views.py中的數據傳遞到前端html頁面,并展示
在Django中預防CSRF攻擊的操作
JS如何在數組指定位置插入元素
java使用xfire搭建webservice服務的過程詳解
解決IDEA項目project包目錄消失的問題
				