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

看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="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实现简易播放器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue音乐播放器插件vue-aplayer的配置及其使用实例详解

    昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观. 首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-p

  • 基于vue-video-player自定义播放器的方法

    先看一下效果. 图1--显示侧边栏 图2-收起侧边栏: 图三:全屏. 写在前面 本次项目中需要用到vue,vue-video-player,我用的是iview的ui框架,但是ui框架无妨,这里关注的是基于video.js开发的vue-video-player的使用,以及如何操作video.js中的api. vue-video-player 项目地址:https://github.com/surmon-china/vue-video-player. video.js文档地址:http://docs

  • vue实现自定义H5视频播放器的方法步骤

    前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采

  • vue-video-player视频播放器使用配置详解

    本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频播放器 import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) 3.新建一个vueVideoPlayer.vue组件供调用 <

  • vue一个页面实现音乐播放器的示例

    本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标 本怀着

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • Vue 开发音乐播放器之歌手页右侧快速入口功能

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件 list-vue 组件在props中接受 shortcut快速入口列表 所用到的属性 是计算属性 通过将singer.vue组件中传入到list-view组件中的数据计算得到 将得到的shortcutList数据通过v-for展示在页面 效果图如下 下面来实现功能 1.点击右侧快速

  • vue-dplayer 视频播放器实例代码

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$refs.player.dp ,然后通过 switchVideo() 对 url 进行修改 <template> <d-player ref="player" :options="options">

  • 基于vue-element组件实现音乐播放器功能

    最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下 演示地址 https://github-laziji.github.io 效果 使用到的组件 element组件 布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio 实现代码 更详细的实现可以看 https://github.com/GitHub-Laziji/vblog <template>

  • vue-music关于Player播放器组件详解

    本文实例为大家分享了关于Player播放器组件的具体内容,供大家参考,具体内容如下 迷你播放器: 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js'; const state = { singer:{}, playing:false, //是否播放 fullScreen:false, //是否全屏 playList:[], //播放列表 sequenceLi

随机推荐