uniapp 小程序视频滑动 ，两个页面共同使用同一套视频

已于 2024-01-27 11:40:10 修改
阅读量139 收藏 1
点赞数
分类专栏： dcloud 微信 文章标签： uni-app 小程序 音视频
于 2023-08-15 17:17:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl980226/article/details/132302614
版权

由于是两个页面同时使用数据，使用了组合式 和 pinia 共通处理。

// UseVideo.ts
import { videoreceivepoints } from '@/api/home'
import { useVideoStore } from '@/stores/counter'
export function UseVideo() {
  const VideoStore = useVideoStore();
  const receNum = ref(0);
  const receshow = ref(false);

  //点击播放&&暂停 只是修改状态
  const tapVideoHover = (state: string) => {
    if (state == 'play' || state == 'continue') {
      VideoStore.videoList[VideoStore.VideocurrentIndex].state = 'pause'
    } else {
      VideoStore.videoList[VideoStore.VideocurrentIndex].state = 'continue'
    }
    if (VideoStore.videoList[VideoStore.VideocurrentIndex].state == 'continue') {
      playVideo()
    }
    if (VideoStore.videoList[VideoStore.VideocurrentIndex].state == 'pause') {
      pauseVideo()
    }
  }

  const animationfinish = () => {
    if (VideoStore.VideocurrentIndex == VideoStore.videoList.length - 1) {
      VideoStore.increment()
    }
  }

  //播放实时进度
  const videoTimeUpdateEvent = async (e: any, ind: number) => {
    let remainingSeconds = Math.floor(Number(e.detail.duration) - Number(e.detail.currentTime))

    VideoStore.videoList[ind].remainingMinutes = Math.floor(remainingSeconds / 60)
      .toString()
      .padStart(2, '0')
    VideoStore.videoList[ind].remainingSecondsInMinute = Math.floor(remainingSeconds % 60)
      .toString()
      .padStart(2, '0')
    VideoStore.videoCurrentTime = e.detail.currentTime
    VideoStore.videoList[ind].DrawDown = remainingSeconds;
  }

  //播放完成后处理
  const getPoints = async (id: number) => {
   	console.log('播放完成')

  }


  //开始播放
  const playVideo = (ind?: number) => {
    if (ind !== undefined && VideoStore.VideocurrentIndex !== ind) {
      VideoStore.VideocurrentIndex = ind
    } else {
      uni.createVideoContext(returnID()).seek(VideoStore.videoCurrentTime)
    }
    nextTick(() => {
      uni.createVideoContext(returnID()).play()
      VideoStore.videoList[VideoStore.VideocurrentIndex].state = 'play'
      VideoStore.videoList[VideoStore.VideocurrentIndex].playIng = true
    })

  }
  //暂停播放
  const pauseVideo = (ind?: number) => {
    if (ind !== undefined) {
      uni.createVideoContext(returnID(ind)).pause();
      VideoStore.videoList[ind].state = 'pause'
      VideoStore.videoList[ind].playIng = false
    } else {
      uni.createVideoContext(returnID()).pause();
      VideoStore.videoList[VideoStore.VideocurrentIndex].state = 'pause'
      VideoStore.videoList[VideoStore.VideocurrentIndex].playIng = false
    }
  }

  const returnID = (ind?: number) => {
    if (ind !== undefined) {
      return `video_${VideoStore.videoList[ind].video_id}`
    } else {
      return `video_${VideoStore.videoList[VideoStore.VideocurrentIndex].video_id}`
    }
  }

  const changeVideo = (event: any) => {
    VideoStore.VideocurrentIndex = event.detail.current
  }


  return {
    VideoStore,
    videoTimeUpdateEvent,
    playVideo,
    pauseVideo,
    getPoints,
    tapVideoHover,
    animationfinish,
    changeVideo,
    receNum,
    receshow
  }
}


//counter.ts
import { defineStore } from 'pinia'
import { videoIndex } from '@api/home'
import type { Video } from "@api/home.d"
export const useVideoStore = defineStore('video', {
  state: () => {
    return {
      videoList: [] as Video[],
      VideocurrentIndex: 0,
      videoCurrentPage: 1,
      videoCurrentTime: 0, // 当前进度，作为两个页面共同查看同一个视频时的进度，也可以把进度做到列表中
      videoFlag: false
    }
  },

  actions: {
    increment() {
      if (!this.videoFlag) {
        return new Promise(async (resolve, reject) => {
          const { code, data } = await videoIndex({
            page: this.videoCurrentPage,
            list_rows: 5,
          })
          if (code == 1) {
            this.videoCurrentPage++
            data.data.data.forEach(item => {
              item.state = 'play';
              item.playIng = false
            })
            this.videoList.push(...data.data.data)
            this.videoFlag = (data.data.total === this.videoList.length)
            resolve(true)
          } else {
            reject();
          }
        })
      }else{
        return Promise.resolve(false)
      }
    },
  },
})

两个vue文件，可交互

//视频列表
<template>
	<view class="pageBg">
		<view class="videoListBox">
			<view
				v-for="(item, index) in videoEd.VideoStore.videoList"
				:key="index"
				:class="['videoItem', { Videocurrent: videoEd.VideoStore.VideocurrentIndex == index }]">
				<video
					:id="`video_${item.video_id}`"
					class="videoValue"
					:src="item.video_url"
					@error="videoErrorCallback"
					enable-danmu
					:direction="0"
					:show-fullscreen-btn="false"
					:enable-progress-gesture="false"
					:vslide-gesture-in-fullscreen="false"
					:controls="false"
					:show-center-play-btn="false"
					loop
					@click="seeDetail(index)"
         			@ended="videoEd.getPoints(item.video_id)"
					@timeupdate="videoEd.videoTimeUpdateEvent($event, index)">
					<view
						class="Videocover"
						v-if="videoEd.VideoStore.VideocurrentIndex !== index"
						@click.prevent="videoEd.playVideo(index)">
						<image :src="item.video_logo" class="img" />
						<image src="@img/homeEntry/play.png" class="playIcon"></image>
					</view>
					<view class="videoContent">
						<view class="tips f_s_c">
							<image src="@img/homeEntry/pointsIcon.png" class="poinsIcon"></image>
							<view class="fs24 white difference">{{ item.DrawDown }}秒后可得奖励</view>
						</view>
						<view class="videoTime" v-if="item.remainingSecondsInMinute">
							{{ item.remainingMinutes }}:{{ item.remainingSecondsInMinute }}
						</view>
					</view>
				</video>
				<view class="f_bet_c videoInfo">
					<view class="ellipsis fs30 flex1">{{ item.video_name }}</view>
					<button open-type="share" class="shareBtn">
						<image src="@img/homeEntry/share.png" class="m_l_35 shareIcon"></image>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { navigateToPage, showToast } from '@/utils/init'
import { UseVideo } from './UseVideo'
import received from "@components/received.vue"
const videoEd = UseVideo()
let onceLoad = true; //记录是不是第一次
let inddsa: number; // 记录旧视频，如果不是第一次播放静止。 出现过疑难杂症才加的。

onLoad(() => {
	videoEd.VideoStore.increment().then(() => {
		videoEd.playVideo()
		onceLoad = false
	})
})

onShow(() => {
	if (!onceLoad) {
		videoEd.pauseVideo(inddsa)
		videoEd.playVideo()
	}
})

onHide(() => {
	videoEd.pauseVideo()
	videoEd.pauseVideo(inddsa)
})

const seeDetail = (ind: number) => {
	if (videoEd.VideoStore.VideocurrentIndex == ind) {
		inddsa = ind
		navigateToPage(`/pages/index/videoInfo?option=${ind}`)
	}
}
const videoErrorCallback = (err: any) => {
	console.log(err)
	showToast('视频加载错误')
}

onReachBottom(() => {
	videoEd.VideoStore.increment()
})
</script>

<style lang="scss" scoped>
.videoListBox {
	padding: 0 38rpx;
	.videoItem {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(201, 201, 201, 0.75);
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 30rpx;
		&.Videocurrent {
			position: sticky;
			top: 0;
			// bottom: 0;
			z-index: 999;
		}
		&:nth-child(1) {
			margin-top: 0;
		}
		.videoValue {
			width: 100%;
			height: 316rpx;
			position: relative;
			.Videocover {
				.img {
					width: 100%;
					height: 316rpx;
				}
				.playIcon {
					width: 54rpx;
					height: 54rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.videoContent {
				padding: 15rpx;
				.difference {
					mix-blend-mode: lighten;
				}
				.tips {
					.poinsIcon {
						width: 40rpx;
						height: 40rpx;
					}
				}
				.videoTime {
					position: absolute;
					right: 30rpx;
					bottom: 20rpx;
					width: 86rpx;
					height: 30rpx;
					background: rgba($color: #000000, $alpha: 0.5);
					border-radius: 15rpx;
					text-align: center;
					line-height: 30rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #fefefe;
				}
			}
		}

		.videoInfo {
			padding: 20rpx;
			.shareBtn {
				background: transparent;
				border: none;
				flex-shrink: 0;
				padding: 0;
				&:after {
					border: none;
				}
				.shareIcon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
}
</style>


// 全屏视频， a.vue
<template>
	<view class="topBack" :style="{ 'padding-top': `${TopHeight?.statusBarHeight}` }">
		<uni-icons type="back" size="30" color="#ffffff" @click="backPage"></uni-icons>
	</view>
	<swiper
		class="pageAll"
		:vertical="true"
		@animationfinish="videoEd.animationfinish"
		@change="videoEd.changeVideo"
		:current="VideoStore.VideocurrentIndex"
		:indicator-dots="false"
		:duration="300"
		@touchstart="mpTouchstart"
		@touchend="mpTouchend">
		<swiper-item v-for="(item, index) in VideoStore.videoList" :key="index">
			<view v-if="Math.abs(VideoStore.VideocurrentIndex - index) <= 1" class="VideoItem">
				<view>
					<video
						:id="`video_${item.video_id}`"
						:loop="true"
						:controls="false"
						:page-gesture="false"
						:show-fullscreen-btn="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						:src="item.video_url"
						@click="videoEd.tapVideoHover(item.state)"
						class="pageAll"
						@ended="videoEd.getPoints(item.video_id)"
						@timeupdate="videoEd.videoTimeUpdateEvent($event, index)"
						:poster="item.video_logo"></video>
					<image
						v-if="!item.playIng"
						:src="item.video_logo"
						class="pageAll poa"
						mode="aspectFit"></image>
				</view>

				<view class="tips f_s_c">
					<image src="@img/homeEntry/pointsIcon.png" class="poinsIcon"></image>
					<view class="fs24 white difference">{{ item.DrawDown }}秒后可得奖励</view>
				</view>

				<view
					class="videoHover pageAll"
					@click="videoEd.tapVideoHover(item.state)"
					v-if="item.state !== 'continue' && item.state !== 'play'">
					<image class="playState" src="@img/homeEntry/play.png"></image>
				</view>
				<button open-type="share" class="shareIcon">
					<image src="@img/homeEntry/radioShare.png"></image>
				</button>

				<view class="BottomTitle">
					<text class="white fs28 twoLine">
						{{ item.video_name }}
					</text>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
import { useVideoStore } from '@stores/counter'
import { backPage } from '@/utils/init'
import { UseVideo } from './UseVideo'
let TopHeight = reactive({
	statusBarHeight:0,
	titleBarHeight :0,
})
const GetStatusBarHeight = () => {
	// #ifndef H5 || APP-PLUS || MP-ALIPAY
	let v = uni.getMenuButtonBoundingClientRect()
	TopHeight.statusBarHeight =  v.top + 'px',
	TopHeight.titleBarHeight =  v.height + 'px'
	// #endif
}
GetStatusBarHeight();


const VideoStore = useVideoStore()
const videoEd = UseVideo()

let mptime: number, mpstartTime: number, changeTimeout: any
onLoad(() => {})
watch(
	() => VideoStore.VideocurrentIndex,
	async (k, old_k) => {
		videoEd.pauseVideo(old_k)
		VideoStore.videoList[k].state = 'play'
		clearTimeout(changeTimeout)
		setTimeout(() => {
			VideoStore.videoList[k].playIng = true
		}, 250)

		if (mptime < 0.2) {
			changeTimeout = setTimeout(() => {
				videoEd.playVideo()
			}, 1400)
		} else {
			videoEd.playVideo()
		}
	}
)

const mpTouchstart = () => {
	mpstartTime = Number(new Date()) / 1000
}

const mpTouchend = () => {
	mptime = Number(new Date()) / 1000 - mpstartTime
}
onShow(() => {
	videoEd.playVideo()
})

onHide(() => {
	videoEd.pauseVideo()
})
</script>

<style scoped lang="scss">
.topBack {
	position: fixed;
	// top: 0;
	left: 40rpx;
	z-index: 999;
}
.pageAll {
	width: 100vw;
	height: 100vh;
}
.VideoItem {
	position: relative;

	.tips {
		position: absolute;
		z-index: 10;

		top: 15vh;
		left: 30rpx;
		.poinsIcon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
		.playState {
			position: absolute;
			width: 160rpx;
			height: 160rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0.2;
		}
	}

	.shareIcon {
		position: absolute;
		right: 30rpx;
		bottom: 200rpx;
		background-color: transparent;
		&:after {
			border: none;
		}
		image {
			width: 91rpx;
			height: 91rpx;
		}
	}
}

.BottomTitle {
	width: 80vw;
	z-index: 99;
	position: absolute;
	bottom: 30px;
	padding: 15rpx;
	flex-direction: column;
	justify-content: flex-start;
	color: #ffffff;
}
</style>
zxlB
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp实现app-nvue的快手抖音的视频上下滑动功能
m0_63262511的博客
11-22 777
【代码】uniapp实现app-nvue的快手抖音的视频上下滑动功能。
仿抖音短视频小程序APP开源前后端源码，UNIAPP前端即时通讯源码学习分享前端下载源码
最新发布
05-26
在当今数字化时代，仿抖音短视频小程序APP开源前后端源码和UNIAPP前端即时通讯源码的学习与分享成为了许多开发者关注的焦点。这些源码不仅能够帮助开发者快速搭建起一个功能完善的短视频平台，还能通过学习和实践，...
uniapp仿抖音滑动视频
07-15
uniapp仿抖音
uniapp小程序模仿抖音视频
09-11
uniapp小程序模仿抖音视频
uniapp 仿抖音上下滑动视频.zip
03-12
uniapp 仿抖音上下滑动视频
uniapp小视频项目：滑动播放视频
Errol's Blog
03-10 8950
1、监听视频滑动 2、播放和暂停 3、增加播放、暂停视频功能 4、增加双击点赞 5、控制首个视频自动播 6、动态渲染视频信息
uniapp实现视频上下滑动功能
weixin_46319117的博客
07-15 4849
一开始是拿到所有视频的数据，根据点击的当前视频对象中的id获得swiper需要的current（就是当前下标），正确定位到当前点击的视频，然后自己去控制自动播放视频。问题遇到的最主要的问题就是当我使用官方的autoplay属性实现自动播放，会导致我切换下一个视频的时候出现声音播放还停留在上一个视频，或者多个视频的声音同时播放。注意这个地方是没有手动关闭的，所以就肯定会导致我上面所说的那种画面变了但是声音还停留在上一个视频的问题。这是最主要的swiper的两个事件。............
uni-app上下滑动播放视频（类抖音）
qq_52244923的博客
05-19 1484
uni-app上下滑动播放视频（类抖音）
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
而uni-app则是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 ...
uni-app 视频滑动+适配ios底部安全区域
E的小小地方
05-17 277
uni-app 视频列表滑动，开箱即用
uniapp 开发之仿抖音，上下滑动切换视频、点击小爱心效果
weixin_52479803的博客
08-29 3783
uniapp 开发之仿抖音，上下滑动切换视频、点击小爱心效果
利用uniapp中模仿抖音、滑动视频组件、双击点赞、首个视频自动播放
热门推荐
weixin_42125732的博客
05-08 1万+
前言 仿抖音截图 基于uniapp模仿抖音的视频播放，其核心就是播放器，因此记录一下实现该功能的组件，我喜欢组件化开发，就放重点的一些组件，可以在下面的代码中学到父组件调用子组件的方法，父组件向子组件传值，子组件向父组件传值等操作 组件化开发 videoList.vue //主要组件 <template> <view class="videoList"> <view class="swiper-box"> <swiper class="swi
uniapp 视频播放（点播、直播、悬浮窗、重力感应、滑动调节）组件 Ba-Video
三杯五岳
05-16 1872
Ba-Video 是原生视频播放组件。支持点播、直播；支持悬浮窗、全屏、小屏；支持封面、显示比例；支持滑动调节播放进度、声音、亮度（全屏）；支持快进、回退、倍速播放；支持重力感应、视频截图；支持无缝衔接播放等。
uni-app实现小程序上下滑动播放视频【跨平台开发教程uniapp教程（米饭科技-app小程序h5源码）】
weixin_42317757的博客
05-25 1539
您可以通过以下步骤实现在uni-app小程序中上下滑动播放视频：1.在页面中引入video组件，并设置宽高及src属性。 2.在页面的onLoad生命周期方法中获取video组件并添加上下滑动事件。 3.在上下滑动事件中获取触摸开始和结束的Y坐标，并根据Y坐标的差值控制视频的播放和暂停。4.如果向下滑动距离大于100px，将视频的播放速率设置为1.5倍，并播放视频；如果向上滑动距离大于100px，暂停视频。这样就可以在uni-app小程序中实现上下滑动播放视频的功能了。
【uniapp】仿抖音上下滑动视频-微信小程序
Minions_Fatman的博客
03-11 4389
<template> <view> <view class="swiper"> <swiper class="swiper" :current="1" :circular="true" :vertical="true" @change="changefun" @animationfinish="animationfinishfun" > <swiper-item v-for="(item,index) in PayVideo">
利用uniapp中模仿抖音、滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能
u012941592的博客
09-20 3402
前言：最近在做短剧，于是就在网上找了很多不错的例子，但是不是很完美，基本上都比较卡顿，我也是在站在巨人的肩膀上优化了一下。本内容主要实现了滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能，主要组件：代码里逻辑很清晰，就不再赘述了。以上测试逻辑都是基于小程序测试的，希望对于您有所帮助。
uniapp中swiper的大坑，在swiper-item中嵌套video在移动端无法实现上下滑动的，要用nvue代替，从而实现抖音滑视频效果
07-25 8348
在移动端的时候，就会出现虽然切换到第二个视频了，声音也出来了，但是画面就是没有动。研究了一天，发现在swiper-item中嵌套视频时，移动端只能滑动切换背景，视频在原位置是不会动的。那就只能这么写了，为什么不动态设置宽度呢？为移动端创建单独的页面包括视频组件也是要单独创建一个nvue的。想做一个抖音滑屏切换视频的效果，结果。为什么要动态设置这个高度呢？使用nvue的教程；......
uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
heavenz19的博客
04-11 2406
【代码】uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
用代码实现uniapp小程序上下滑动播放视频
03-24
可以使用uni-app提供的video组件和scroll-view组件来实现上下滑动播放视频的效果。具体代码如下： ;"> <video src="your_video_url" controls></video> export default { name: 'VideoPlayer', } 其中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值