swiper和video实现抖音刷视频功能

最新推荐文章于 2024-05-15 20:29:03 发布

poguanba

最新推荐文章于 2024-05-15 20:29:03 发布

阅读量1k

点赞数 7

文章标签：音视频数据库 linux

本文链接：https://blog.csdn.net/poguanba/article/details/134848381

版权

实现抖音刷视频功能

<!--swiper实现整屏划动播放视频-->
<swiper :vertical="true" class="swiperVideo" style="height: 100vh;" @change="changeplay"
			@touchstart="touchStart" @touchend="touchEnd">
	<swiper-item v-for="(item, index) in swiperList" :key="item.id">
		<view class="bg-video">
			<view class="video">
				<videoPlayer ref="player" :video="item" :index="index"></videoPlayer>
			</view>
		</view>
	</swiper-item>
</swiper>

//上下滑动触发事件
changeplay(res) {
	console.log('res', res);
	clearTimeout(time)
	this.page = res.detail.current
	time = setTimeout(() => {
		if (this.pageStatrY < this.pageEndY) {

			console.log('向上滑动')
			setTimeout(() => {
				this.$refs.player[this.page].player()
			}, 20)

			this.$refs.player[this.page + 1].pause()
			this.pageStatrY = 0
			this.pageEndY = 0
		} else {
			console.log('向下滑动')
			setTimeout(() => {
				this.$refs.player[this.page].player()
			}, 20)
			console.log('page', this.page - 1, this.$refs.player);
			this.$refs.player[this.page - 1].pause()
			this.pageStatrY = 0
			this.pageEndY = 0
		}
	}, 1)
},
//获取向下滑动的值
touchStart(res) {

	this.pageStatrY = res.changedTouches[0].pageY
	console.log('pageStatrY', this.pageStatrY)
},
//获取向上滑动的值
touchEnd(res) {
	this.pageEndY = res.changedTouches[0].pageY
	console.log('pageEndY', this.pageEndY)
},

videoPlayer 组件

<template>
	<view class="videoPlayer">
		<video id="myVideo" class="video" :controls="false" :src="video" :loop="false" :autoplay="autoplay"
			:show-center-play-btn="false" style="pointer-events:none;will-change: transform;" @click="click"></video>
		
	</view>
</template>

<script>
	var timer = null
	export default {
		props: ['video', 'index'],
		data() { 
			return {
				play: false,
				dblClick: false,
				autoplay: false,
			};
		},
		mounted() {  
			this.videoContext = uni.createVideoContext('myVideo', this)
			this.atuo() 
		},

		methods: {
			click() {
				clearTimeout(timer)
				this.dblClick = !this.dblClick
				timer = setTimeout(() => {
					if (this.dblClick) { //判断是单击 即为true
						//单击
						if (this.play === false) {
							this.playThis()
						} else {
							this.pause()
						}
					} else {
						//双击
						// this.$emit('changeClick') //向父组件传递一个事件
					}
					this.dblClick = false //点击后重置状态 重置为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
				}
			}
		},
	}
</script>

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

	.video {
		height: 100vh;
		width: 100%;
	}
</style>

！！！！目前我这个小程序是可以用的，但是华为快应用不行（uniapp转华为快应用）