uniapp small video project: slide to play video

Get into the habit of writing together! This is the 9th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the event details .

1. Monitor video sliding

Add to swiper @change="change", this time is executed after we complete a swipe, add a change event under methods, and print the result:

change(res){
	console.log(res);
}
复制代码

Among them res.detail.currentindicates the current page number It can also monitor the sliding direction, so @touchstart="touchStart"increase @touchend="touchEnd"the monitoring of and , which are executed at the beginning and end of the touch screen respectively

When you slide up, that is, when you flip from the first video to the second video, you can see that pageY becomes smaller, and we can judge the up and down sliding direction according to this.

So we write the code

<template>
	<view class="videoList">
		<view class="video-box">
			<swiper class="swiper" :vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="item of list" :key="item.id">
					<view class="swiper-item">
						<videoPlayer :video="item"></videoPlayer>
					</view>
					<view class="left-box">
						<listLeft></listLeft>
					</view>
					<view class="right-box">
						<listRight></listRight>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './videoPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	var time = null
	export default {
		props: ["myList"],
		components: {
			videoPlayer,
			listLeft,
			listRight
		},
		name: "video-list",
		data() {
			return {
				list: [],
				pageStartY: 0,
				pageEndY: 0
			};
		},
		methods: {
			change(res) {
				clearTimeout(time)
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑动")
						this.pageStartY = 0
						this.pageEndY = 0
					} else {
						console.log("向下滑动");
						this.pageStartY = 0
						this.pageEndY = 0
					}
				},1)
			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
				console.log(this.pageStartY);
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
				console.log(this.pageEndY);
			}
		},
		watch: {
			myList() {
				this.list = this.myList;
			}
		}
	}
</script>

<style>
	.videoList {
		width: 100%;
		height: 100%;
	}

	.video-box {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		z-index: 19;
	}

	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}

	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	}
</style>

复制代码

View log log

The execution order of the code is: touchStart-> change-> toucheEnd, so chagneusing pageStartY and pageEndY in the method to judge the up and down sliding direction requires a timer with a delay of 1ms, so that the execution order becomes touchStart-> toucheEnd-> change, and both pageStartY and pageEndY are completed After the assignment, it can be judged

2. Play and Pause

Swipe from the first video to the second video, then the first video should be paused and the second video should start playing. We write this part of the code in videoPlayer.vue

onReady() {
	this.videoContext = uni.createVideoContext("myVideo",this)
},
methods:{
	playVideo(){
		this.videoContext.seek(0)
		this.videoContext.play()
		console.log("播放视频");
	},
	pauseVideo(){
		this.videoContext.pause()()
		console.log("暂停视频");
	}
}
复制代码

The next thing to do is to solve how to let the parent component call the child component, modify videoList.vue, and add videoPlayer to it.ref

<videoPlayer ref="player" :video="item"></videoPlayer>
复制代码

然后通过 this.$refs.player 可以找到 videoPlayer 这个插件，由于是个数组，所以通过 page 来找到当前页。当第一个视频滑动到第二个视频，第一个视频应该暂停，第二个应该自动播放，也就是上滑的情况。下滑的情况则相反，因此完善代码：

data() {
			return {
				......
				page:0
			};
		},
		methods: {
			change(res) {
				clearTimeout(time)
				this.page = res.detail.current
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑动"+this.page);
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page-1].pauseVideo()
						this.pageStartY = 0
						this.pageEndY = 0
					} else {
						console.log("向下滑动"+this.page);
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page+1].pauseVideo()
						this.pageStartY = 0
						this.pageEndY = 0
					}
				},1)
			},
			......
		},
复制代码

查看效果：

3、增加播放、暂停视频功能

增加一个点击视频进行播放、暂停的功能。给 videoPlayer 增加一个点击事件

<template>
	<view class="videoPlayer">
		<video id="myVideo" @click="click"
		class="video" :controls="false" :loop="true" :src="video.src"></video>
	</view>
</template>

<script>
	export default {
		props:['video'],
		name: "videoPlayer",
		data() {
			return {
				play:false
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo",this)
		},
		methods:{
			click(){
				if(this.play === false){
					this.playthis()
				}else{
					this.pauseVideo()
				}
			},
			playVideo(){
				if(this.play === false){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pauseVideo(){
				if(this.play === true){
					this.videoContext.pause()
					this.play = false
				}
			},
			playthis(){
				if(this.play === false){
					this.videoContext.play()
					this.play = true
				}
			}
		}
	}
</script>
......
复制代码

4、增加双击点赞

双击方法直接在 videoPlayer.vue 的 click() 方法上修改：

data() {
			return {
				......
				dblClick: false
			};
		},
		......
		methods: {
			click() {
				clearTimeout()
				this.dblClick = !this.dblClick
				timer = setTimeout(() => {
					//300ms之内dblClick为true为单击
					if (this.dblClick) {
						//单击
						if (this.play === false) {
							this.playthis()
						} else {
							this.pauseVideo()
						}
					} else {
						//双击
						this.$emit("doubleClick")
					}
					this.dblClick = false
				}, 300)

			},
			......
		}
复制代码

另外由于爱心写在 listRight.vue，所以在 listRight.vue 中增加一个方法

change() {
	this.color = 'color: red;'
}
复制代码

没有复用 changeColor() 方法，因为双击点赞，再双击并不会取消点赞，跟直接单击爱心图标是不一样的

videoPlayer.vue 双击时，子组件向父组件传值使用了 this.$emit("doubleClick")，我们需要在 video-list.vue 中增加 doubleClick() 方法

<listRight ref="right"></listRight>

doubleClick(){
	//点赞，调用 listRight 中方法
	this.$refs.right[0].change()
}
复制代码

当双击屏幕，爱心变红，再次双击，爱心不会改变 单击爱心，取消点赞

5、控制首个视频自动播

思路：判断是否为第一个视频，然后修改 videoPlayer 的 autoplay 属性

修改 video-list.vue，在循环时，给 videoPlayer 传一个 index

<swiper-item v-for="(item,index) of list" :key="item.id">
	<view class="swiper-item">
		<videoPlayer @doubleClick="doubleClick" ref="player" 
						:video="item" :index="index"></videoPlayer>
	</view>
	......
</swiper-item>
复制代码

videoPlayer.vue 中接收 index 传值，判断如果是 0，改变 autoPlay 的值

<template>
	<view class="videoPlayer">
		<video id="myVideo" @click="click" 
		class="video" :controls="false" :loop="true" 
		:src="video.src" :autoplay="autoPlay"></video>
	</view>
</template>

<script>
	var timer = null
	export default {
		props: ['video','index'],
		name: "videoPlayer",
		data() {
			return {
				......
				autoPlay:false
			};
		},
		......
		methods: {
			......
			auto(){
				if(this.index === 0){
					this.autoPlay = true
				}
			}
		},
		created() {
			this.auto()
		}
	}
</script>

......

复制代码

6、动态渲染视频信息

index.vue 中获取数据后，通过 myList 将数据传递给了 video-list.vue，在 video-list.vue 中接收了 myList 的数据，然后通过循环展示了视频数据，所以展示左侧和右侧的数据，只需要将循环的每项 item 传给 listLeft 和 listRight 即可

<view class="left-box">
	<listLeft :item='item'></listLeft>
</view>
<view class="right-box">
	<listRight ref="right" :item='item'></listRight>
</view>
复制代码

然后分别在 listLeft 和 listRight 中接收后，展示数据

<template>
	<view class="listLeft">
		<view class="author">
			{{item.author}}
		</view>
		<view class="title">
			{{item.title}}
		</view>
		<view class="box">
			<view class="music">
				@我们的恋爱是对生命的严重浪费@
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item'],
		name:"listLeft",
		data() {
			return {
				
			};
		}
	}
</script>

......
复制代码

listRight.vue

<template>
	<view class="listRight">
		......
		<view class="number">{{item.loveNumber}}</view>
		......
		<view class="number">{{item.commentNumber}}</view>
		......
		<view class="number">{{item.shareNumber}}</view>
		......
	</view>
</template>

<script>
	export default {
		props:['item'],
		......
	}
</script>
......
复制代码