当前位置: 首页 > news >正文

从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换

从零用java实现 小红书 springboot vue uniapp(13)实战:用Swiper+Video打造抖音式丝滑视频流

移动端演示 http://8.146.211.120:8081/#/

管理端演示 http://8.146.211.120:8088/#/

项目整体介绍及演示

前言

在上一篇文章中我们实现了视频笔记的发布功能,现在,我们将攻克一个更核心的体验功能:创建一个像抖音、快手那样的全屏、可上下滑动切换的视频信息流。这不仅仅是UI的堆砌,背后涉及到 swipervideo 组件的深度联动、视频生命周期的精细化管理、以及数据预加载等关键技术。本文将详细拆解其实现过程。


在这里插入图片描述

核心技术实现

我们的目标是当用户向上或向下滑动时,上一个视频能自动暂停,下一个视频能自动播放,并且列表能无限滚动加载。我们将围绕 videoDetail.vue 文件来展开。

1. 基础布局:Swiper 与 Video 的结合

首先,我们搭建页面的骨架。外层使用 swiper 组件作为滑动容器,并设置其 vertical="true" 来实现垂直滚动。内部通过 v-for 循环渲染 swiper-item,每个 swiper-item 中放置一个全屏的 video 组件。

<template><swiper class="swiper-container" :vertical="true" @change="handleSwiperChange" :current="currentIndex"><swiper-item v-for="(video, index) in videoData" :key="video.noteId"><view class="video-container"><video class="video" :src="video.videoUrl":id="`video_${index}`" :loop="true":controls="false"@timeupdate="handleTimeUpdate"></video><!-- 其他UI元素,如点赞、评论按钮等 --></view></swiper-item></swiper>
</template>
  • @change="handleSwiperChange":这是实现功能的核心,每当滑动切换视频时,该事件会被触发。
  • :id="'video_' + index":为每个video组件设置一个唯一的ID,这是后续通过代码精确控制视频播放/暂停的关键。
2. 视频播放控制:uni.createVideoContext

要用代码控制视频,我们必须先获取到每个视频的实例,即 VideoContext

我们在 data 中创建一个数组 videoContexts: [] 用于存储这些实例。然后,在页面数据加载并渲染完成后,初始化它们。

// script
export default {data() {return {videoData: [],currentIndex: 0,videoContexts: []};},onReady() {// onReady生命周期确保了组件已渲染this.initVideoContexts();},methods: {initVideoContexts() {this.videoContexts = []; // 清空旧实例this.videoData.forEach((item, index) => {// 通过 video 的 id 创建并存储 contextthis.videoContexts[index] = uni.createVideoContext(`video_${index}`, this);});// 自动播放第一个视频if (this.videoContexts[this.currentIndex]) {this.videoContexts[this.currentIndex].play();}}}
}
3. 核心交互:滑动切换与自动播放

所有的关键都发生在 handleSwiperChange 方法中。当用户滑动 swiper 时,我们需要:

  1. 暂停上一个正在播放的视频。
  2. 播放当前显示的新视频。
methods: {handleSwiperChange(event) {const { current } = event.detail;// 记录上一个视频的索引const previousIndex = this.currentIndex;// 暂停上一个视频if (this.videoContexts[previousIndex]) {this.videoContexts[previousIndex].pause();}// 更新当前视频的索引this.currentIndex = current;this.paused = false; // 重置手动暂停状态// 延时播放当前视频,确保滑动手势完成setTimeout(() => {if (this.videoContexts[this.currentIndex]) {this.videoContexts[this.currentIndex].play();}}, 250);},
}
4. 数据流:无限滚动与预加载

为了实现“刷不完”的效果,我们需要在用户快要滑到底部时,提前加载下一页的数据。

数据加载:
我们封装一个 loadVideos 方法,通过分页参数(page, pageSize)从后端获取视频列表,并追加到 videoData 数组中。

触发加载:
我们在 swiper 组件上监听 @scrolltolower 事件(在uniapp中,需要自己根据 currentIndex 模拟)。当用户滑动到倒数N个视频时(例如 preloadThreshold = 2),就调用 loadVideos

// 在 handleSwiperChange 方法的最后调用
handleSwiperChange(event) {// ...上面的播放/暂停逻辑...// 检查是否需要加载更多视频this.checkAndLoadMore();
},methods: {checkAndLoadMore() {// 当滑动到倒数第 preloadThreshold 个视频时,加载更多const isNearEnd = this.currentIndex >= this.videoData.length - this.preloadThreshold;if (isNearEnd && this.hasMore && !this.loading) {this.loadVideos(); // 该方法内部会请求API并追加数据}},loadVideos() {if(this.loading || !this.hasMore) return;this.loading = true;uni.app.get('/auth/getVideoNotes', { page: this.page, limit: this.pageSize }, '', (res => {// ...处理返回的数据...const newVideos = res.data.records || [];this.videoData = [...this.videoData, ...newVideos];this.hasMore = newVideos.length >= this.pageSize;this.page++;this.loading = false;// !! 关键:数据更新后,需要重新初始化新增的 video contextthis.$nextTick(() => {this.initVideoContexts();});}));}
}

注意: 每次加载新数据后,videoData 数组都变了,因此需要重新调用 initVideoContexts 来为新加入的视频创建 VideoContext 实例。


在这里插入图片描述

通过以上四步,我们就完整地实现了一个功能强大且体验流畅的抖音式视频流。

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

http://www.lryc.cn/news/583448.html

相关文章:

  • uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
  • scp:上传大型数据集到实验室服务器
  • linux-用户和组
  • 家庭网络中的服务器怎么对外提供服务?
  • linux-进程信号的产生与发送
  • Redis分布式锁从入门到放弃:Redisson源码解密
  • 玛哈特网板矫平机:精密矫平金属开平板的利器
  • 掌握 Winget 安装:从 Microsoft Store 到 winget-install 脚本的完整方案
  • 虚幻引擎5 GAS开发俯视角RPG游戏 #5-8:倾听属性变化
  • 基于Matlab多特征融合的可视化指纹识别系统
  • 141-CEEMDAN-VMD-Transformer-BiLSTM-ABKDE多变量区间预测模型!
  • 让AI绘图更可控!ComfyUI-Cosmos-Predict2基础使用指南
  • Fluent许可配置常见问题
  • Android网络层架构:统一错误处理的问题分析到解决方案与设计实现
  • 编写产品需求文档:黄历日历小程序
  • 暑假读书笔记第五天
  • 自然语言处理中probe探测是什么意思。
  • Oracle 数据库升级踩坑:DBLink ORA-02019 问题解决思路
  • 编写Shell脚本开放端口
  • 函数-3-日期函数
  • 【Linux | 网络】socket编程 - 使用TCP实现服务端向客户端提供简单的服务
  • 记忆管理框架MemOS——在时序推理上较OpenAI提升159%
  • [IMX][UBoot] 13.Linux 内核源码目录分析
  • 脑电分析入门指南:信号处理、特征提取与机器学习
  • 【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
  • 暑假的挣扎与自我梳理
  • 【计算机三级网络】——IP校园网大题(第二道):路由代码填空
  • 【HarmonyOS6】获取华为用户信息
  • 【Linux】·C++缺陷和思考
  • 【05】MFC入门到精通——MFC 为对话框中的控件添加变量 和 数据交换和检验