当前位置：主页 > 查看内容

uniapp+vant 实现抖音短视频播放

发布时间：2021-06-09 00:00| 有位朋友查看

简介：功能点上下滑动切换视频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 clas……

在这里插入图片描述

在这里插入图片描述
功能点：上下滑动切换视频；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>

；原文链接：https://blog.csdn.net/GongWei_/article/details/115556755
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：【MATLAB appdesigner】13_如何实现多个app界面的交互（1）(有实 下一篇：案例分享：Qt便携式致病菌快速检测仪（账号管理、实验过程、二维

随机推荐

Mozilla放出Firefox Proton新UI预览：视

继 Australis 和 Photon 之后，Mozilla 现又酝酿为 Firefox 带来名为Proton的全...
程序人生：初入职场你应该了解的几件事

简介 “ 大家好我是帅哥欢迎来到帅哥的程序人生我会把经历分享出来助你了解圈内...
微软发布Windows10更新：内存、CPU占用率

不少Windows 10用户之前都抱怨一个问题，那就是系统的屏幕出现了渲染问题，而微...
.NET Core类库System.Reflection.Dispatc

前言 aop即是面向切面编程，众多Aop框架里Castle是最为人所知的，另外还有死去的...
从console.log说起(console.log详细介绍)

console.log ，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函...
搞定万亿级MySQL海量存储的索引与分表设

互联网业务往往使用MySQL数据库作为后台存储，存储引擎使用InnoDB。我们针对互联...
微软计划合并 Windows10 累积和服务堆栈

2月26日消息众所周知，Windows 10 的安全更新和其他重要累计更新通常是在同一天...
Postman使用详解

一、Postman背景介绍用户在开发或者调试网络程序或者是网页B/S模式的程序的时候...
聊一聊 MySQL 排序规则

本文转载自微信公众号「Linux开发那些事儿」，作者 LinuxThings 。转载本文请联...
如何使用Git优雅的回滚实现

开发过程中，我们经常会遇到代码回滚的情况。正常人都知道，git 回滚有两大宝： ...

uniapp+vant 实现抖音短视频播放

推荐图文

正则表达式实现字符的模糊匹配功能示例

Linux Mint vs Ubuntu：哪个更适合初学者？

9个提高代码运行效率的小技巧你知道几个？

真伪静态区别方法分析

详细讲解 Redis 的两种安装部署方式

华为GaussDB数据库推出双分布式架构，打造金融核心

随机推荐

Mozilla放出Firefox Proton新UI预览：视

程序人生：初入职场你应该了解的几件事

微软发布Windows10更新：内存、CPU占用率

.NET Core类库System.Reflection.Dispatc

从console.log说起(console.log详细介绍)

搞定万亿级MySQL海量存储的索引与分表设

微软计划合并 Windows10 累积和服务堆栈

Postman使用详解

聊一聊 MySQL 排序规则

如何使用Git优雅的回滚实现

关于我们