文章詳情頁

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

瀏覽：131日期：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://m.b3g6.com/bcjs/10457.html#' @click='playMusic(item.id)' class='iconfont icon-bofang1'></a><label>{{item.name}}</label><a href='http://m.b3g6.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://m.b3g6.com/bcjs/img/cd1.png' /><img src='http://m.b3g6.com/bcjs/img/cd.png' /><img :src='http://m.b3g6.com/bcjs/musicCover' /></div><div class='boxa3'><h1>熱門評論</h1><div v-for='item in hotComments'><div class='boxa3_nr1'><img :src='http://m.b3g6.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://m.b3g6.com/bcjs/musicUrl' @play='play' @pause='pause' controls autoplay loop></audio></div><div v-show='isShow'><video ref=’video’ :src='http://m.b3g6.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. javascript實現貪吃蛇小練習2. Java commons-httpclient如果實現get及post請求3. Vue 實現對quill-editor組件中的工具欄添加title4. JavaScript實現簡單的彈窗效果5. Vue的props父傳子的示例代碼6. PHP單件模式和命令鏈模式的基礎知識7. 我所理解的JavaScript中的this指向8. 一文帶你徹底理解Java序列化和反序列化9. PHP利用curl發送HTTP請求的實例代碼10. PHP驗證碼工具－Securimage

排行榜

					
					Java commons-httpclient如果實現get及post請求
Spring MVC 開發快速入門
js 常用的正則表達式大全
一文帶你徹底理解Java序列化和反序列化
PHP利用curl發送HTTP請求的實例代碼
javascript實現貪吃蛇小練習
PHP單件模式和命令鏈模式的基礎知識
用Spring JMS使異步消息變得簡單
spring acegi security 1.0.0 發布
Vue 實現對quill-editor組件中的工具欄添加title
關于IDEA 2020.3 多窗口視圖丟失的問題
				