文章詳情頁

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

瀏覽：43日期：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.aoyou183.cn/bcjs/10457.html#' @click='playMusic(item.id)' class='iconfont icon-bofang1'></a><label>{{item.name}}</label><a href='http://www.aoyou183.cn/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.aoyou183.cn/bcjs/img/cd1.png' /><img src='http://www.aoyou183.cn/bcjs/img/cd.png' /><img :src='http://www.aoyou183.cn/bcjs/musicCover' /></div><div class='boxa3'><h1>熱門評論</h1><div v-for='item in hotComments'><div class='boxa3_nr1'><img :src='http://www.aoyou183.cn/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.aoyou183.cn/bcjs/musicUrl' @play='play' @pause='pause' controls autoplay loop></audio></div><div v-show='isShow'><video ref=’video’ :src='http://www.aoyou183.cn/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. chat.asp聊天程序的編寫方法2. 解決ajax的delete、put方法接收不到參數的問題方法3. Jsp中request的3個基礎實踐4. Django ORM實現按天獲取數據去重求和例子5. IntelliJ IDEA 統一設置編碼為utf-8編碼的實現6. idea修改背景顏色樣式的方法7. IntelliJ IDEA設置自動提示功能快捷鍵的方法8. XML入門的常見問題(一)9. jsp EL表達式詳解10. 怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？

排行榜

					
					idea修改背景顏色樣式的方法
IntelliJ IDEA配置Tomcat服務器的方法
IntelliJ IDEA 統一設置編碼為utf-8編碼的實現
IntelliJ IDEA設置自動提示功能快捷鍵的方法
怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？
chat.asp聊天程序的編寫方法
Jsp中request的3個基礎實踐
解決ajax的delete、put方法接收不到參數的問題方法
XML入門的常見問題(一)
jsp EL表達式詳解
IntelliJ IDEA刪除類的方法步驟
				