利用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的tree组件
Dec 03 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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 删除数组元素
2009/01/16 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
jQuery each()小议
2010/03/18 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python调用win32接口进行截图的示例
2020/11/11 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
高职助产应届生自荐信
2013/09/24 职场文书
难忘的一课教学反思
2014/04/30 职场文书
世界环境日活动总结
2015/02/11 职场文书
员工辞职信范文
2015/03/02 职场文书
工程进度款催款函
2015/06/24 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL