利用Vue实现简易播放器的完整代码


Posted in Vue.js onDecember 30, 2020

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

利用Vue实现简易播放器的完整代码

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/*去掉聚焦框*/
}


/*改变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;
}
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){})
		},
		
		/*隐藏mv*/
		hide:function(){
			this.isShow = false;
			/*关闭mv*/
			this.$refs.video.pause();
		}
		
	}
});

总结

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

Vue.js 相关文章推荐
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
Vue实现随机验证码功能
Dec 29 #Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
You might like
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
python高级特性简介
2020/08/13 Python
python属于哪种语言
2020/08/16 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
.NET面试10题
2014/02/24 面试题
销售高级职员求职信
2013/10/29 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
党性分析自查总结
2014/10/14 职场文书
自我检讨书范文
2015/01/28 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书