uniapp+vant 实现抖音短视频分类切换播放

最新推荐文章于 2024-09-29 11:43:53 发布
最新推荐文章于 2024-09-29 11:43:53 发布
阅读量2.7k 收藏 12
点赞数 1
分类专栏： uni-app 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GongWei_/article/details/115556755
版权

在这里插入图片描述

在这里插入图片描述
功能点： 上下滑动切换视频；tab标签切换分类

<template>
	<view class="app">
		<view class="header">
			<view class="back"></view>
			<van-tabs v-model="activeName" @click="onClick" style="width: 60%;background: rgba(255,255,255,0);">
				<van-tab title="南山" name="a">
					<swiper
						class="swiper"
						:current="current"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange"
					>
						<block v-for="(item, index) in vlist" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideoa' + index"
										:ref="'myVideoa' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="contain"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
				<van-tab title="关注" name="b">
					<swiper
						class="swiper"
						:current="current2"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange2"
					>
						<block v-for="(item, index) in vlist2" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideob' + index"
										:ref="'myVideob' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="contain"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
				<van-tab title="推荐" name="c">
					<swiper
						class="swiper"
						:current="current3"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange3"
					>
						<block v-for="(item, index) in vlist3" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideoc' + index"
										:ref="'myVideoc' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="fill"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current:0,
			current2:0,
			current3:0,
			activeName: 'c', //tab标签页
			player: null, //视频对象
			indicatorDots: false, //显示面板指示点
			duration: 200, //滑动动画时长
			circular: true, //是否衔接滑动
			vertical: true, //是否纵向滑动
			vlist: [
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/sky.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/lol.mp4' }
			],
			vlist2: [
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				
				{ src: '../../../static/video/sky.mp4' },
				
				{ src: '../../../static/video/lol.mp4' }
			],
			vlist3: [
				{ src: '../../../static/video/lol.mp4' },
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/sky.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				
				
				
				
			]
		};
	},
	onShow() {
		let newVideo = uni.createVideoContext('myVideo0');
		if (!this.player) {
			this.player = newVideo;
			// this.player.pause();
			setTimeout(() => {
				this.player.play();
			}, 10);
			console.log(this.player + '播放');
			return;
		}
	},
	methods: {
		onClick(name){
			if(name=="a"&& this.current!= 0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="a"&& this.current== 0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
			if(name=="b"&&this.current2!=0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current2)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="b"&&this.current2==0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				// newVideo.play()
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
			if(name=="c"&&this.current3!=0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current3)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="c"&&this.current3==0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
		},
		//控制播放 source 字段，表示导致变更的原因
		swiperChange(current, source) {
			// console.log(current)
			this.current=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		},
		swiperChange2(current, source) {
			// console.log(current)
			this.current2=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		},
		swiperChange3(current, source) {
			// console.log(current)
			this.current3=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.app {
	position: relative;
	width: 100%;
	display: block;
	height: 100%;
}
/* 头部 */
.header {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80upx;
	z-index: 100;
	justify-content: center;
	align-items: center;
	color: #ffffff;
}
.back {
	position: fixed;
	left: 0;
	top: 0;
	width: 80upx;
	height: 80upx;
	line-height: 80upx;
}
/* 播放器 */
.uni_vdplayer {
	height: 100%;
}
.player-video {
	width: 100%;
	height: 100%;
}
//更改vant tab组件的样式
.van-tabs__nav{
		background: transparent!important;
}
.van-tabs__wrap{
	height: 106upx!important;
	line-height: 106upx!important;
}
.van-tab{
	color: #FFFFFF !important;
	font-size: 36upx!important;
	line-height: 100upx!important;
}
.van-tabs__line {
	background-color: #F1F1F1!important;
}
.van-tab__text--ellipsis{
	display: block!important;
	height: 100upx!important;
	margin-top: 50upx!important;
}
.van-tabs__content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.van-tab__pane{
	height: 100%;
}
</style>
听听那晚风
关注
专栏目录
微信小程序动态导航栏（uniapp + vant）
954L
12-19 1253
vant小程序版本：[https://vant-contrib.gitee.io/vant-weapp/#/home](https://vant-contrib.gitee.io/vant-weapp/#/home) 注：vant并没有uniapp的版本，所以此处是引入小程序版本的ui
uniapp 仿抖音上下滑动视频.zip
03-12
uniapp 仿抖音上下滑动视频
使用vant制作一个视频播放的功能
jakelihua
06-14 1972
简介：本文是一个用结合vant制作的一个视频播放功能的页面。
uniapp，短剧视频类App实现参考，仿抖音 仿陌陌 短视频 无限滑动播放 视频流
最新发布
ckcs49_mj的博客
09-29 309
仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题，适合与不同功能视图组合使用，实现丰富的应用功能。
ue3+vant+van-swipe 实现短视频播放的功能（一）
u013611978的博客
08-11 2910
原文链接：vue3+vant+van-swipe 实现短视频播放的功能（一） 在网上翻阅了很多通过vue3+vant+van-swipe 实现短视频播放的功能，但是收获很少，即使有这样的文章，内容也是残缺不全或者根本就是做广告的（严肃的投诉某课网，起的标题很诱人，但其实没有一点实际的内容：vue3.0+vant3仿快手/抖音短视频）。 于是打算自己实现一个短视频播放的小页面，简单但是不简陋，开始播放、暂停、上下滑动切换视频、点赞、分享、评论功能都有。 结果图如下 页面展示： 封面页
uniapp 小程序上下划屏切换视频
weixin_38946164的博客
12-26 2455
效果图： 代码： <template> <view> <view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="page-section-spacing"> <swiper class="swiper" @change="
h5+vant的视频播放横屏
weixin_52568554的博客
07-15 1273
vue横屏播放
uniapp仿抖音滑动视频
07-15
uniapp仿抖音
基于uniapp+vant框架的乒乓球器材查询、位置查询及约课微信小程序设计源码
09-27
本项目是一款基于uniapp+vant框架的微信小程序，包含1230个文件，涵盖JavaScript、微信小程序、TypeScript、Vue、HTML等多种语言。主要功能包括乒乓球器材查询、附近乒乓球馆位置查询以及教练约课服务。该设计源码...
基于spring boot+vue实现小程序视频点播+直播+社区交流+评论+抢购+拍卖+短视频
08-24
基于spring boot+vue实现小程序视频点播+直播+社区交流+评论+抢购+拍卖+短视频 基于spring boot+vue实现小程序视频点播+直播+社区交流+评论+抢购+拍卖+短视频 基于spring boot+vue实现小程序视频点播+直播+社区交流+...
uniapp+vant weapp实现图片上传前预览功能
Kätzchen-408的博客
06-01 1703
在社区功能中,想要发布一个帖子,那么最好在本地预览得到图片数量然后通过循环一次上传,而不是直接上传.这里对组件进行了一些修改. html: <van-uploader :disabled="disable" :file-list="previewList" @after-read="previewImg" max-count="9" /> js: data() { return { text: "", school: "", disable: t
仿抖音上下滑动播放视频
07-22
Android仿抖音上下滑切换视频播放，性能完全比拟抖音，上下预加载，也可改造左右滑切换，切换时先用一张截图盖住视频，视频渲染成功再隐藏截图，感觉上是无缝切换
仿抖音上下滑动切换短视频播放
11-26
仿抖音上下滑动切换短视频播放，播放器采用的是阿里的免费播放器，包含了上下滑动切换的播放列表，以及包含视频封面图设置，ui界面可以自己扩展，滑动基本不卡顿，利用了viewpage的缓存策略。
uniapp+vant weapp实现课程表小程序_课程表功能的实现
Kätzchen-408的博客
06-01 2173
课程表功能的实现思路1.节数与天数和grid内单选框索引的转换2.单选框样式的魔改温馨提示:尽量用原生源码 思路 课程表的实现,我想了很久,在没有现成组件库的情况下实现,我主要是用了vant weapp的宫格和单选框来实现主要的难点有以下两个方面: 1.节数与天数和grid内单选框索引的转换 返回值给我一个包含课程节数和天数的对象数组,我把它转换成一个包含unit(5节课*7天的对应的数字来定位)的对象数组 2.单选框样式的魔改 单选框直接使用radio的插槽来贴图来适应样式需求 <van-radio
uni-app使用scrollview+swiper实现滑动切换页面功能
yyxhzdm的博客
07-28 4587
效果图： 一、创建自定义组件scrollbar.vue <template> <view class="uni-tab-bar"> <scroll-view class="uni-swiper-tab" scroll-x="true"> <block v-for="(tab,index) in tabBars" :style="scrollStyle"> <view...
uniapp app手机端视频滑动
前端-CV全粘工程师
11-09 1533
uniapp app视频滑动,视频不出现,滑动卡顿等
uniapp 抖音短视频
m0_61950846的博客
07-18 1254
uniapp仿写抖音短视频效果
uni-app上下滑动播放视频（类抖音）
qq_52244923的博客
05-19 1811
uni-app上下滑动播放视频（类抖音）
Vue+vant仿抖音滑动浏览视频
weixin_43807981的博客
04-29 1669
浏览器视频不支持自动播放，所以第一个视频需要手动触发播放，仅供参考 <style lang="less" scoped> .main { width: 100%; height: 100%; background: #fff; .my-swipe .van-swipe-item { color: #fff; font-size: 0.2rem; text-align: center; background-color: #39a9ed;
uniapp + vant
09-13
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用它开发同时运行在多个平台的应用程序，包括iOS、Android、Web等。它可以让开发者只写一套代码，即可发布到多个平台。 Vant 是一个基于 Vue.js 的移动端组件库，提供了丰富的 UI 组件和交互效果，可以帮助开发者快速构建美观、功能丰富的移动应用。Vant 的组件库包含了常见的移动端 UI 组件，如按钮、导航栏、弹出框等，还提供了一些在移动端常用的工具函数。 在使用 UniApp 进行跨平台开发时，可以很方便地使用 Vant 组件库来构建移动端界面，提高开发效率和用户体验。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值