uniapp 작은 비디오 프로젝트: 슬라이드하여 비디오 재생

함께 쓰는 습관을 들이세요! "너겟 데일리 뉴 플랜 · 4월 업데이트 챌린지" 참여 9일차입니다. 클릭하시면 이벤트 내용을 보실 수 있습니다 .

1. 비디오 슬라이딩 모니터링

swiper에 추가 @change="change", 이번에는 스와이프를 완료하고 메서드 아래에 변경 이벤트를 추가하고 결과를 인쇄한 후 실행됩니다.

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

그 중 현재 페이지 번호를 res.detail.current나타냅니다 . 슬라이딩 방향도 모니터링 할 수 @touchstart="touchStart"있으므로 @touchend="touchEnd"터치 스크린의 시작과 끝에서 각각 실행되는 및 의 모니터링을 증가시킵니다.

슬라이드 업, 즉 첫 번째 영상에서 두 번째 영상 으로 넘어가면 pageY가 작아지는 것을 볼 수 있으며, 이를 바탕으로 위아래 슬라이딩 방향을 판단할 수 있습니다.

그래서 우리는 코드를 작성합니다

<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>

复制代码

로그 로그 보기

코드의 실행 순서는 touchStart-> change-> toucheEnd이므로 chagne위아래 슬라이딩 방향을 판단하는 메서드에서 pageStartY 및 pageEndY 를 사용하려면 1ms 지연 타이머가 필요하므로 실행 순서는 touchStart-> toucheEnd-> change가 됩니다. pageStartY, pageEndY 모두 완료 할당 후 판단 가능

2. 재생 및 일시 중지

첫 번째 동영상에서 두 번째 동영상으로 스와이프하면 첫 번째 동영상이 일시중지되고 두 번째 동영상이 재생되기 시작합니다. 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("暂停视频");
	}
}
复制代码

다음으로 할 일은 상위 컴포넌트가 하위 컴포넌트를 호출하고 videoList.vue를 수정하고 여기에 videoPlayer를 추가하도록 하는 방법을 해결하는 것입니다.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>
......
复制代码