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

实现抖音刷视频功能

javascript 复制代码
<!--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 组件

javascript 复制代码
<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转华为快应用)

相关推荐
在努力的前端小白12 分钟前
Spring Boot 敏感词过滤组件实现:基于DFA算法的高效敏感词检测与替换
java·数据库·spring boot·文本处理·敏感词过滤·dfa算法·组件开发
路溪非溪13 分钟前
关于Linux内核中头文件问题相关总结
linux
未来之窗软件服务13 分钟前
自建知识库,向量数据库 (九)之 量化前奏分词服务——仙盟创梦IDE
数据库·仙盟创梦ide·东方仙盟·自建ai·ai分词
小曾同学.com1 小时前
【每天学点‘音视频’】前向纠错 和 漏包重传
音视频·fec·前向纠错
胖虎11 小时前
(二十)深入了解 AVFoundation-编辑:使用 AVMutableVideoComposition 实现视频加水印与图层合成(下)——实战篇
音视频·视频编辑·视频添加水印
AI浩2 小时前
跟踪不稳定目标:基于外观引导的运动建模实现无人机视频中的鲁棒多目标跟踪
目标跟踪·音视频·无人机
Lovyk3 小时前
Linux 正则表达式
linux·运维
冒泡的肥皂3 小时前
MVCC初学demo(一
数据库·后端·mysql
Fireworkitte4 小时前
Ubuntu、CentOS、AlmaLinux 9.5的 rc.local实现 开机启动
linux·ubuntu·centos
sword devil9004 小时前
ubuntu常见问题汇总
linux·ubuntu