文章詳情頁

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

瀏覽：127日期：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.b3g6.com/bcjs/10457.html#' @click='playMusic(item.id)' class='iconfont icon-bofang1'></a><label>{{item.name}}</label><a href='http://www.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://www.b3g6.com/bcjs/img/cd1.png' /><img src='http://www.b3g6.com/bcjs/img/cd.png' /><img :src='http://www.b3g6.com/bcjs/musicCover' /></div><div class='boxa3'><h1>熱門評論</h1><div v-for='item in hotComments'><div class='boxa3_nr1'><img :src='http://www.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://www.b3g6.com/bcjs/musicUrl' @play='play' @pause='pause' controls autoplay loop></audio></div><div v-show='isShow'><video ref=’video’ :src='http://www.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. 刪除docker里建立容器的操作方法2. docker容器調用yum報錯的解決辦法3. Django中如何使用Channels功能4. IntelliJ IDEA導出項目的方法5. IntelliJ IDEA設置條件斷點的方法步驟6. Docker究竟是什么為什么這么流行它的優點和缺陷有哪些？7. idea自定義快捷鍵的方法步驟8. jsp中sitemesh修改tagRule技術分享9. 使用 kind 和 Docker 啟動本地的 Kubernetes環境10. idea設置代碼格式化的方法步驟

排行榜

					
					idea自定義快捷鍵的方法步驟
jsp中sitemesh修改tagRule技術分享
JavaScript中break、continue和return的用法區別實例分析
IntelliJ IDEA導出項目的方法
使用 kind 和 Docker 啟動本地的 Kubernetes環境
刪除docker里建立容器的操作方法
docker容器調用yum報錯的解決辦法
IntelliJ IDEA設置條件斷點的方法步驟
Docker究竟是什么 為什么這么流行 它的優點和缺陷有哪些？
Django中如何使用Channels功能
idea設置代碼格式化的方法步驟
				