uniapp使用nvue三item写仿抖音短视频

于 2024-03-26 11:39:05 发布
阅读量348 收藏 6
点赞数 4
分类专栏： uniapp vue 文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61339009/article/details/137039977
版权

实机效果


首先，代码最主要的思路先说明一下：

        1.本身uniapp的渲染能力并不高，即时用上nvue也不能做到完美，所以我选择只渲染三个video，不过代码方面也还可以优化，这只是我简单的一个demo和思路提供，列如滑动暂停，或者视频先用封面处理。

        2.三个item就需要每次滑动都判断是到底是上还是下。

        3.再滑动到特定的index时需要不同的处理，需要在滑动时提前做好下一个的处理，比如在上滑到第二个播放器时，需要对三个播放器进行处理了。

先创建nvue项目，这边也就不多说了：

先在nvue页面创建一个swiper组件用for循环三个item里嵌套video，使用cover-view和cover-image来使层级在video之上

<template>
	<view style="height: 100vh;flex:1;width:750rpx">
		<swiper @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
			class="list">
			<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
				<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
					@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
					:show-center-play-btn='false' :controls="false"
					src="https://media.w3.org/2010/05/sintel/trailer.mp4">
					<cover-view style="margin-top: 50rpx">
						<text style="color: aqua;">{{item.id}}</text></cover-view>
					<cover-view class="back" v-if="!item.active">
						<cover-image class="pauseIcon" src="../../static/icon/pause.png"></cover-image>
					</cover-view>
					<cover-view class="iconList">
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view>
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view>
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view style="white-space: nowrap;lines:1;">
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="formation">
						<cover-view style="display: flex;align-items: center;flex-direction: row;">
							<cover-image class="header"
								src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
							<cover-view>
								<text class="context">作者</text>
							</cover-view>
						</cover-view>
						<cover-view>
							<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
						</cover-view>
					</cover-view>
					<cover-view class="duration">
						<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
					</cover-view>
				</video>
			</swiper-item>

		</swiper>
	</view>
</template>

先来看看在第几个视频时，我们会遇到的情况：

        第1个：可能是视频从尾到头，也可能是从下一个播放器返回。

        第2个：可能是视频第一个过来，也可能是从下一个播放器返回。

        第3个：可能是视频第二个过来，也可能是从下一个播放器返回。

所以在滑动时，我们需要提前先进行判断到底是上滑还是下滑：

qiehuan(e) {

				if (this.oldActiveIndex < e.detail.current) {
					if (this.oldActiveIndex - e.detail.current != -2) {
						console.log('上滑');
						this.index++
						this.next(e.detail.current)
					} else {
						console.log("下滑");
						this.pre(e.detail.current)
						this.index--
					}
				} else if (this.oldActiveIndex > e.detail.current) {
					if (this.oldActiveIndex - e.detail.current != 2) {
						console.log('下滑');
						this.pre(e.detail.current)
						this.index--
					} else {
						console.log("上滑");
						this.index++
						this.next(e.detail.current)
					}
				}
				this.$nextTick(() => {
					this.oldActiveIndex = e.detail.current
				})
			},

我们需要一个变量来记录上一次滑动的播放器下标拿来对比，因为从2到0，和0到2的情况存在，所以判断需要拆开。

然后在对不同情况进行不同的处理，我比较懒，所以代码直接拆开写了。

			next(index) {
				if (Object.is(this.index, 2)) {
				}
				if (Object.is(index, 0)) {
					this.list[1] = this.allList[this.index + 1]
				}
				if (Object.is(index, 1)) {
					this.list[2] = this.allList[this.index + 1]
				}
				if (Object.is(index, 2)) {
					this.list[0] = this.allList[this.index + 1]
				}
				this.play(this.activeIndex)
			},
			pre(index) {
				if (Object.is(this.index, 2)) {
				}
				if (Object.is(index, 0)) {
					this.list[2] = this.allList[this.index - 2]
				}
				if (Object.is(index, 1)) {
					this.list[0] = this.allList[this.index - 2]
				}
				if (Object.is(index, 2)) {
					this.list[1] = this.allList[this.index - 2]
				}
				this.play(this.activeIndex)
			},

主要的处理就是这样，还有一些小功能也做了对应的处理，比如滑动时上一个暂停等等，还有一些小优化，进度条等等。

全部代码：

<template>
	<view style="height: 100vh;flex:1;width:750rpx">
		<swiper @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
			class="list">
			<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
				<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
					@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
					:show-center-play-btn='false' :controls="false"
					src="https://media.w3.org/2010/05/sintel/trailer.mp4">
					<cover-view style="margin-top: 50rpx">
						<text style="color: aqua;">{{item.id}}</text></cover-view>
					<cover-view class="back" v-if="!item.active">
						<cover-image class="pauseIcon" src="../../static/icon/pause.png"></cover-image>
					</cover-view>
					<cover-view class="iconList">
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view>
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view>
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
						<cover-view class="iconListClass">
							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
							<cover-view style="white-space: nowrap;lines:1;">
								<text class="context">12.5w</text>
							</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="formation">
						<cover-view style="display: flex;align-items: center;flex-direction: row;">
							<cover-image class="header"
								src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
							<cover-view>
								<text class="context">作者</text>
							</cover-view>
						</cover-view>
						<cover-view>
							<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
						</cover-view>
					</cover-view>
					<cover-view class="duration">
						<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
					</cover-view>
				</video>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 视频下标，记录播放到第几个
				index: 0,
				// 数据
				allList: [{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 0
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 1
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 2
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 3
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 4
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 5
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 6
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 7
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 8
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 9
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 10
					},
				],
				list: [{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 0
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 1
					},
					{
						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						active: false,
						currentTime: 0,
						duration: 121,
						percent: 0,
						id: 2
					},
				],
				// 播放器下标
				activeIndex: 0,
				// 记录上一个播放器下标
				oldActiveIndex: 0
			}
		},
		onReady() {},
		methods: {
			qiehuan(e) {
				if (this.oldActiveIndex < e.detail.current) {
					if (this.oldActiveIndex - e.detail.current != -2) {
						console.log('上滑');
						this.index++
						this.next(e.detail.current)
					} else {
						console.log("下滑");
						this.pre(e.detail.current)
						this.index--
					}
				} else if (this.oldActiveIndex > e.detail.current) {
					if (this.oldActiveIndex - e.detail.current != 2) {
						console.log('下滑');
						this.pre(e.detail.current)
						this.index--
					} else {
						console.log("上滑");
						this.index++
						this.next(e.detail.current)
					}
				}
				this.$nextTick(() => {
					this.oldActiveIndex = e.detail.current
				})
			},
			next(index) {
				if (Object.is(this.index, 2)) {
				}
				if (Object.is(index, 0)) {
					this.list[1] = this.allList[this.index + 1]
				}
				if (Object.is(index, 1)) {
					this.list[2] = this.allList[this.index + 1]
				}
				if (Object.is(index, 2)) {
					this.list[0] = this.allList[this.index + 1]
				}
				this.play(this.activeIndex)
			},
			pre(index) {
				if (Object.is(this.index, 2)) {
				}
				if (Object.is(index, 0)) {
					this.list[2] = this.allList[this.index - 2]
				}
				if (Object.is(index, 1)) {
					this.list[0] = this.allList[this.index - 2]
				}
				if (Object.is(index, 2)) {
					this.list[1] = this.allList[this.index - 2]
				}
				this.play(this.activeIndex)
			},
			play(index) {
				for (let i = 0; i < 3; i++) {
					uni.createVideoContext(`Video${i}`, this).pause()
				}
				this.videoContext = uni.createVideoContext('Video' + index, this)
				this.list[index].active = true
				this.videoContext.play()
			},
			swiper(e) {
				// console.log(e.detail.current);
				this.activeIndex = e.detail.current
				// this.play(e.detail.current)
				// this.play(this.activeIndex)
			},
			end(e) {
				this.activeIndex++
				if (Object.is(this.activeIndex, 3)) {
					this.activeIndex = 0
				}
			},
			long(e, item, index) {
				item.currentTime = e.detail.currentTime
				item.percent = (e.detail.currentTime / e.detail.duration) * 750
			},
			pause(item, index) {
				this.videoContext = uni.createVideoContext('Video' + index, this)
				if (item.active) {
					this.videoContext.pause()
				} else {
					this.videoContext.play()
				}
				this.list[index].active = !this.list[index].active
			},
			videoClick() {

			}
		}
	}
</script>

<style>
	.list {
		background-color: black;
		flex: 1;
		width: 750rpx;
	}

	.video {
		flex: 1;
		width: 750rpx;
	}

	.back {
		background-color: rgba(225, 225, 225, 0.3);
		flex: 1;
		width: 750rpx;
		justify-content: center;
		align-items: center;
	}

	.pauseIcon {
		position: absolute;
		left: calc(50% - 25px);
		top: calc(50% - 30px);
		width: 50px;
		height: 60px;
	}

	.duration {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100vw;
		height: 3px;
	}

	.long {
		height: 100%;
		background-color: white;
	}



	.formation {
		flex-direction: column;
		position: absolute;
		left: 10px;
		bottom: 10px;
		width: calc(100% - 80px);
		display: flex;
	}

	.header {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.iconListClass {
		justify-content: center;
		align-items: center;
	}

	.context {
		white-space: nowrap;
		width: 100rpx;
		color: white;
		margin-left: 5px;
		font-size: 13px;
		font-weight: bold;
	}

	.title {
		width: 600rpx;
		margin-top: 10px;
		color: white;
		margin-left: 5px;
		font-size: 13px;
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		lines: 1;
	}


	.iconList {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 40px;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.icon {
		margin-top: 10px;
		width: 40px;
		height: 40px;
	}

	.context {
		text-align: center;
		color: white;
		font-size: 13px;
	}
</style>

钢铁卡卡龙o_0
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿抖音短视频小程序APP组件（超高性能）自动预加载-uniapp
qq_28445593的博客
06-16 1579
全局只渲染3个item节点，快速上下滑动不错乱，自动预加载，高度可自定义。- uniapp 开发的仿抖音、快手小程序组件（超高性能）自动预加载
uniapp仿抖音滑动视频
07-15
uniapp仿抖音
uniapp 开发之仿抖音，上下滑动切换视频、点击小爱心效果
weixin_52479803的博客
08-29 3101
uniapp 开发之仿抖音，上下滑动切换视频、点击小爱心效果
利用uniapp中模仿抖音、滑动视频组件、双击点赞、首个视频自动播放
热门推荐
weixin_42125732的博客
05-08 1万+
前言 仿抖音截图 基于uniapp模仿抖音的视频播放，其核心就是播放器，因此记录一下实现该功能的组件，我喜欢组件化开发，就放重点的一些组件，可以在下面的代码中学到父组件调用子组件的方法，父组件向子组件传值，子组件向父组件传值等操作 组件化开发 videoList.vue //主要组件 <template> <view class="videoList"> <view class="swiper-box"> <swiper class="swi
基于uniapp+vue3多端「h5+小程序+App」仿微信/抖音直播商城|uni-app+vue3小视频
最新发布
码农ICoding
01-01 2673
这两个组件的vue2版本已经发布到了插件市场，如果大家有需要，可以去下载一次性拿走使用。
uniapp - 仿抖音短视频项目
m0_46785319的博客
02-03 2954
uniapp - 仿抖音短视频
uniapp 仿抖音上下滑动视频.zip
03-12
uniapp 仿抖音上下滑动视频
Java仿抖音短视频小程序开发
03-21
网上找到了很多资源，可是都是缺少的，难得找了全面的教程，视频+代码分享
仿抖音上下滑动切换短视频播放
11-26
仿抖音上下滑动切换短视频播放，播放器采用的是阿里的免费播放器，包含了上下滑动切换的播放列表，以及包含视频封面图设置，ui界面可以自己扩展，滑动基本不卡顿，利用了viewpage的缓存策略。
仿抖音视频录制功能
03-28
之前上传了一个短视频播放器，现在上传一个短视频录制功能。如果有做短视频项目的可以看看。
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
01-19
一、项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播，支持编译到多端(H5、小程序、App端) 且兼容效果一致。 二、效果预览 在H5、小程序、App端测试效果如下：(后续大图均为APP端) 三、使用技术 编码器+技术：HBuilderX + vue/NVue/uniapp/vuex iconfont图标：阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件：uniPop（uni-app封装自定义弹出窗） 测试环境：H5端 + 小程序 + App端
仿抖音代码，可以直接运行的
02-04
自己调试的第一个仿抖音android项目，可以上啦下滑的。
仿抖音视频录制
11-07
该资源是使用OpenGL以及MediaCodec实现的仿抖音的视频录制，其中包括了五种速度的录制
学习uniapp 在App端模仿抖音刷视频效果
m0_58668337的博客
02-23 2748
简单的抖音刷视频效果，nvue入坑
基于Java+Vue+uniapp微信小程序懂球短视频平台设计和实现
java李阳勇的博客
12-15 3401
在网络与微信小程序不断地发展，小程序技术不断发展的今天。对于一些球员和足球爱好者来说，需要时时刻刻了解，自己及自己所喜欢的足球赛事的相关信息，比赛赛事的相关事宜，比赛比分的相关信息，各个懂球短视频的小组赛。每场赛事球员发挥情况，比如查询自己所喜欢的足球视频、懂球视频、分享视频等这样才能更好的推动我国的体育事业发展,为此今后有必要对体育的发展做出更加深入的探索和研究。
利用uniapp中模仿抖音、滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能
u012941592的博客
09-20 2550
前言：最近在做短剧，于是就在网上找了很多不错的例子，但是不是很完美，基本上都比较卡顿，我也是在站在巨人的肩膀上优化了一下。本内容主要实现了滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能，主要组件：代码里逻辑很清晰，就不再赘述了。以上测试逻辑都是基于小程序测试的，希望对于您有所帮助。
uniapp仿抖音分享视频
09-08
你可以使用uniapp来开发一个仿抖音分享视频的应用。首先，你可以创建一个uniapp项目并设置好基本的配置。然后，你可以使用uniapp提供的组件和API来实现视频的播放、分享等功能。 在页面中，你可以使用uniapp的video组件来展示视频，并通过设置src属性来加载视频资源。你还可以使用uniapp的swiper组件来实现左右滑动切换不同的视频。 为了实现视频的分享功能，你可以使用uniapp的分享API，将分享按钮放置在页面中，并在点击分享按钮时调用相关API完成分享操作。你可以使用uniapp的社交分享组件或自定义分享逻辑来实现这一功能。 除了视频播放和分享功能，你还可以根据仿抖音的需求添加其他的功能，如用户登录、评论、点赞等。你可以使用uniapp提供的各种组件和API来实现这些功能。 总结来说，uniapp是一个跨平台的开发框架，可以让你使用Vue.js开发一次代码，同时在多个平台上运行。通过使用uniapp提供的组件和API，你可以快速实现一个仿抖音分享视频的应用。希望对你有所帮助！如还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值