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

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

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="/UploadFiles/2021-04-02/cd1.png">



* {
	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"+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"+muiscId)
			.then(function(response){
				that.musicUrl = response.data.data[0].url;
			},function(err){})
			
			/*获取歌曲图片*/
			axios.get("https://autumnfish.cn/song/detail"+muiscId)
			.then(function(response){
				that.musicCover = response.data.songs[0].al.picUrl;
			},function(err){})
			
			/*获取歌曲评论*/
			axios.get("https://autumnfish.cn/comment/hot"+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"+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播放器

标签：

vue,简易播放器,vue,播放器组件,vue播放器

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“利用Vue实现简易播放器的完整代码”

暂无利用Vue实现简易播放器的完整代码的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

vue,简易播放器,vue,播放器组件,vue播放器

Vue实现简易购物车页面

vue+element UI实现树形表格

评论“利用Vue实现简易播放器的完整代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接