1.videoPlayer.vue

<template>
	<view class="videoPlayer">
		<video 
		id="myVideo" 
		class="video" 
		:controls="false" 
		:loop="true" 
		:src="'http://192.168.11.164:80/video/'+video.src" 
		:autoplay="autoplay"
		@click="click"
		>
		</video>
		
	</view>
</template>

<script>
	var timer=null
	export default {
		props:['video','index'],
		data() {
			return {
				play:false,
				dblClick:false,
				autoplay:false
			};
		},
		onReady(){
			this.videoContext=uni.createVideoContext('myVideo',this)
		},
		methods:{
			click(){
				clearTimeout(timer)
				this.dblClick=!this.dblClick
				timer=setTimeout(()=>{
					if(this.dblClick){
						//单击
						if(this.play===false){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						//双击
						this.$emit('changeClick')
					}
					this.dblClick=false
				},300)
			},
			player(){
				//从头播放视频
				if(this.play===false){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play=true
				}
			},
			pause(){
				//暂停视频
				if(this.play===true){
					this.videoContext.pause()
					this.play=false
				}
			},
			playThis(){
				//播放当前视频
				if(this.play===false){
					this.videoContext.play()
					this.play=true
				}
			},
			atuo(){
				//首个视频自动播放
				if(this.index===0){
					this.autoplay=true
				}
			}
		},
		created() {
			this.atuo()
		}
	}
	
</script>

<style>
.videoPlayer{
	height: 100%;
	width:100%;
}
.video{
	height: 100%;
	width:100%;
	z-index: 19;
}
</style>

2.videoList.vue

<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper 
			class="swiper"  
			:vertical="true" 
			@change="change"
			@touchstart="touchStart"
			@touchend="touchEnd"
			>
				<swiper-item v-for="(item,index) of videos" :key="item.id">
					<view class="swiper-item" style="color:#000000">
						<video-player 
						@changeClick="changeClick" 
						ref="player" 
						:video="item"
						:index="index"
						>
						</video-player>
					</view>
					<view class="left-box">
						<list-left :item="item"></list-left>
					</view>
					<view class="right-box">
						<list-right @open="openComment" :item="item" ref="right"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-show="show" class="comment-box">
			<comment @close="close"></comment>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './videoPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	import comment from './comment.vue'
	var time=null
	export default {
		props:['list'],
		components:{
			videoPlayer,
			listLeft,
			listRight,
			comment
		},
		data() {
			return {
				videos:[],
				pageStartY:0,
				pageEndY:0,
				page:0,
				show:false
			};
		},
		watch:{
			list(){
				this.videos=this.list
			}
		},
		methods:{
			changeClick(){
				//点赞，调用listRight方法
				this.$refs.right[0].change()
			},
			change(res){
				clearTimeout(time)
				this.page=res.detail.current
				time=setTimeout(()=>{
					if(this.pageStartY<this.pageEndY){
						this.$refs.player[this.page].player()
						this.$refs.player[this.page+1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}else{
						this.$refs.player[this.page].player()
						this.$refs.player[this.page-1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}
				},1)
				
			},
			touchStart(res){
				this.pageStartY=res.changedTouches[0].pageY
			},
			touchEnd(res){
				this.pageEndY=res.changedTouches[0].pageY
			},
			openComment(){
				if(this.show===false){
					this.show=true
				}
			},
			close(){
				if(this.show===true){
					this.show=false
				}
			}
		},
		
	}
</script>

<style>
.videoList{
	height:100%;
	width: 100%;
}
.swiper-box{
	height:100%;
	width: 100%;
}
.swiper{
	height:100%;
	width: 100%;
}
.swiper-item{
	height:100%;
	width: 100%;
}
.left-box{
	z-index:20;
	position:absolute;
	bottom: 50px;
	left: 10px;
}
.right-box{
	z-index:20;
	position:absolute;
	bottom: 50px;
	right: 10px;
}
.comment-box{
	position:fixed;
	bottom:0 ;
	left: 0;
	z-index:22;
	height: 500px;
	width: 100%;
}
</style>

3.listRight.vue

<template>
	<view class="listright">
		<view class="author-img">
			<image class="img" src="../static/img/author.jpg" @click="click"></image>
			<view class="iconfont iconjiahao add" v-show="show" @click="hide">
			</view>
		</view>
		<view class="iconfont iconaixin right-box" :style="color" @click="changeColor">
			
		</view>
		<view class="number">
			{{item.loveNumber}}
		</view>
		<view class="iconfont icontubiaozhizuo-  right-box" @click="openComment">
		</view>
		<view class="number">
			{{item.commentNumber}}
		</view>
		<view class="iconfont iconfenxiang right-box">
		</view>
		<view class="number">
			{{item.shareNumber}}
		</view>
		<view class="around">
			<image class="img" src="../static/img/2-1.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		data() {
			return {
				show:true,
				color:''
			};
		},
		methods:{
			hide(){
				this.show=false
			},
			changeColor(){
				this.color=this.color===''?"color:red;":''
			},
			change(){
				this.color="color:red;"
			},
			click(){
				uni.navigateTo({
					url:'/pages/user/user'
				})
			},
			openComment(){
				this.$emit('open')
			}
			
		}
	}
</script>

<style>
.listright{
	width: 50px;
	margin: 0 auto;
}
.author-img{
	height: 50px;
	width:50px;
	border-radius: 50%;
	border:2px solid #FFFFFF;
	position:relative;
}
.img{
	height: 50px;
	width:50px;
	border-radius: 50%;
}
.right-box{
	width:50px;
	height: 40px;
	margin-top:13px ;
	text-align: center;
	line-height: 40px;
	color:#FFFFFF;
	font-size:33px;
	
}
.number{
	font-size: 10px;
	text-align: center;
	color: #FFFFFF;
}
.around{
	margin-top:15px ;
	animation:rotate 1.5s linear 0.2s infinite;
	height: 50px;
	width:50px;
}
.add{
	width: 18px;
	height:18px;
	border-radius: 50%;
	background: red;
	position:absolute;
	bottom:-9px;
	left:16px;
	text-align: center;
	line-height: 18px;
	color: #FFFFFF;
	font-size: 10px;
}



@keyframes rotate{
	0%{
		transform:rotate(0deg)
	}
	100%{
		transform:rotate(360deg)
	}
}
</style>