视频续播功能实现 - 断点续看从前端到 Spring Boot 后端

优质文章学习记录

— 11 min read
视频续播功能实现 - 断点续看从前端到 Spring Boot 后端
在这里插入图片描述
🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
👍《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～

视频续播功能实现 - 断点续看从前端到 Spring Boot 后端

1. 前言

在视频网站或在线学习平台中，用户观看长视频（如课程、电影）时常会中途退出。若再次进入时不得不从头开始，体验大打折扣。视频续播（Resume Playback） 功能可以帮助用户保存上次观看位置，下次打开时自动跳转到该时间点继续观看，大幅提升用户体验。

比如我们常见的B站，当你播放中途退出，继续访问这个视频的时候，会提示已为您定位至XXXX的提示，如下图：

在这里插入图片描述


本文博主将从为什么要做续播、续播原理、前端实现、后端实现到测试与优化，逐步拆解整个流程，并给出完整代码示例，帮助小伙伴快速在项目中落地该功能。

2. 为什么要做视频续播

在如今的流媒体时代，用户平均每天观看视频时长超过 2.5 小时，但其中可能会出现观看会话会被中断（临时退出、电话、通知、设备切换等）。能否记住播放位置并提供无缝续播体验，已成为衡量视频平台专业度的重要指标！

在这里插入图片描述

提升用户体验
用户无需手动记忆上次进度，打开即看
长视频更易于分段观看，提高学习/观影效率

增加平台粘性
优质体验能让用户更愿意再次回访，延长平台使用时长

数据价值挖掘
记录观看进度，可分析用户活跃度、观看习惯，用于个性化推荐

3. 续播功能原理

前端监听
视频播放进度，将当前时间点（currentTime）在用户退出或定时时保存。

存储进度

简易方案：localStorage（针对单设备、单浏览器）
复杂方案：通过 REST 接口将进度保存到后端数据库（支持多设备、多浏览器）

恢复进度
页面加载时，读取存储的进度，将 <video> 的 currentTime 设置为该值

3.1 常见的续播记录系统架构

如上述所说，如果你仅针对单设备、单浏览器，可以直接使用本地存储，但如果需要多设备支持那么就需要有如下规划：

在这里插入图片描述

3.2 常见的触发记录时机

前端在出发播放进度记录，常见的有以下几种

事件类型记录策略用户行为
暂停播放立即记录主动暂停
离开页面最后位置记录关闭标签/切换应用
播放结束重置位置完整观看
进度拖拽延迟记录(防抖动)快速跳转

4. 纯前端实现方案

下面给小伙伴们演示基于原生 HTML5 Video + JavaScript 的示例，使用 localStorage 做本地保存

4.1 基础实现代码

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>视频续播示例</title><style>video{width: 100%;max-width: 600px;margin: 20px auto;display: block;}</style></head><body><h2>视频续播示例</h2><!-- 视频播放地址 --><videoid="myVideo"controls><sourcesrc="https://你的视频地址.mp4"type="video/mp4"></video><!-- 视频播放监听 --><script>const video = document.getElementById('myVideo');constVIDEO_ID='movie-123';//视频标识constSTORAGE_KEY=`video-progress-${VIDEO_ID}`;// 初始化播放位置const savedTime = localStorage.getItem(STORAGE_KEY);if(savedTime) video.currentTime =parseFloat(savedTime);// 进度记录函数functionsaveProgress(){ localStorage.setItem(STORAGE_KEY, video.currentTime.toString());}// 事件监听//拖动播放条或进度条播放变化 video.addEventListener('timeupdate',throttle(saveProgress,5000));//暂停 video.addEventListener('pause', saveProgress);//播放完成 video.addEventListener('ended',()=>{ localStorage.removeItem(STORAGE_KEY);});// 离开或刷新页面时立即保存 window.addEventListener('beforeunload', saveProgress);// 节流函数functionthrottle(func, delay){let lastCall =0;returnfunction(...args){const now = Date.now();if(now - lastCall >= delay){func.apply(this, args); lastCall = now;}};}</script></body></html>
STORAGE_KEY 基于视频 URL 唯一标识，每个视频分开保存

4.2 增强版本地存储

聪明的小伙伴们上述代码案例就能看出，仅仅只能记录并续播最后一次观看的视频，那么如果我希望记录5个之前观看中断的视频，那么就可以参考以下代码：

// 存储完整观看记录functionsavePlaybackState(){const state ={timestamp: Date.now(),progress: video.currentTime,duration: video.duration,videoId:VIDEO_ID,percentage:(video.currentTime / video.duration *100).toFixed(1)};// 保存最近5条记录const history =JSON.parse(localStorage.getItem('video-history')||'[]');const newHistory =[ state,...history.filter(item=> item.videoId !==VIDEO_ID)].slice(0,5); localStorage.setItem('video-history',JSON.stringify(newHistory)); localStorage.setItem(STORAGE_KEY, video.currentTime.toString());}

5. 后端（Spring Boot）实现

当需要跨设备同步或用户登录状态下保存进度时，可通过后端接口存储。下面示例用 Spring Boot＋MyBatis＋MySQL 做简易实现，供小伙伴们参考：

5.1 数据库表

对应的实体模型小伙伴们可以自己生成

CREATETABLE video_progress ( id BIGINTAUTO_INCREMENTPRIMARYKEY, user_id BIGINTNOTNULL, video_id VARCHAR(255)NOTNULL, watched_time DOUBLENOTNULL, update_time TIMESTAMPDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,UNIQUEKEY idx_user_video (user_id, video_id));

5.2 后端接口

这里仅仅演示后端记录视频进度的功能，相关用户鉴权等小伙伴们自行实现，可以参考博主的 《Spring Security》专栏进一步学习

@RestController@RequestMapping("/api/video")publicclassVideoProgressController{@AutowiredprivateVideoProgressService progressService;// 保存或更新进度@PostMapping("/progress")publicResponseEntity<?>saveProgress(@RequestBodyProgressRequest req,@RequestHeader("X-User-Id")Long userId){ progressService.saveOrUpdate(userId, req.getVideoId(), req.getCurrentTime());returnResponseEntity.ok().build();}// 获取进度@GetMapping("/progress")publicResponseEntity<Double>getProgress(@RequestParamString videoId,@RequestHeader("X-User-Id")Long userId){Double time = progressService.getProgress(userId, videoId);returnResponseEntity.ok(time !=null? time :0.0);}// 请求 DTOpublicstaticclassProgressRequest{privateString videoId;privateDouble currentTime;// getters/setters...}}

5.3 Service服务及Mapper

Mapper代码

@MapperpublicinterfaceVideoProgressMapper{@Select("SELECT * FROM video_progress WHERE user_id=#{userId} AND video_id=#{videoId}")VideoProgressfindByUserAndVideo(@Param("userId")Long userId,@Param("videoId")String videoId);@Insert("INSERT INTO video_progress(user_id,video_id,watched_time) VALUES(#{userId},#{videoId},#{watchedTime}) "+"ON DUPLICATE KEY UPDATE watched_time=#{watchedTime}, update_time=NOW()")voidupsert(VideoProgress record);}

Service代码

@ServicepublicclassVideoProgressService{@AutowiredprivateVideoProgressMapper mapper;publicvoidsaveOrUpdate(Long userId,String videoId,Double time){VideoProgress record =newVideoProgress(userId, videoId, time); mapper.upsert(record);}publicDoublegetProgress(Long userId,String videoId){VideoProgress rec = mapper.findByUserAndVideo(userId, videoId);return rec !=null? rec.getWatchedTime():null;}}

5.4. 前端调用示例

<videoid="myVideo"controls><sourcesrc="movie.mp4"type="video/mp4"></video><script>constAPI_BASE='/api/video';const video = document.getElementById('myVideo');constVIDEO_ID='movie-123';const userId =42;// 假设已登录并拿到 userIdconstSTORAGE_KEY=`video-progress-${VIDEO_ID}`;// 恢复进度 初始化播放位置asyncfunctionloadProgress(){const res =awaitfetch(`${API_BASE}/progress?videoId=${videoId}`,{headers:{'X-User-Id': userId }});const time =await res.json();if(time >0&& time < video.duration){ video.currentTime = time;}}// 进度记录函数functionsaveProgress(){fetch(`${API_BASE}/progress`,{method:'POST',headers:{'Content-Type':'application/json','X-User-Id': userId },body:JSON.stringify({ videoId,currentTime: video.currentTime })});}}// 事件监听 video.addEventListener('timeupdate',throttle(saveProgress,5000)); video.addEventListener('pause', saveProgress); video.addEventListener('ended',()=>{//TODO 后端删除API小伙伴们可自行实现});// 页面关闭前保存 window.addEventListener('beforeunload', saveProgress);// 节流函数functionthrottle(func, delay){let lastCall =0;returnfunction(...args){const now = Date.now();if(now - lastCall >= delay){func.apply(this, args); lastCall = now;}};}</script>

6. 测试与优化

测试
模拟网络抖动、断网重连，确保进度及时更新
跨设备登录测试：在不同设备/浏览器登录同一账号，验证进度同步

优化建议
数据校验：后端对 currentTime 做合法性校验（不超出视频总时长）
批量提交：可改为用户退出时一次性提交最后进度，减少请求次数
缓存 & 重试：前端调用失败时缓存到 IndexedDB，下次自动重试
并发合并：后端可结合消息队列异步写库，减小请求延迟

不同规模平台的实施建议：

在这里插入图片描述

7. 结语

通过本文示例，相信小伙伴已掌握了从本地存储到后端持久化的完整视频续播实现方案。无论是单设备场景下的 localStorage，还是支持多端同步的 Spring Boot + 数据库方案，都能灵活应用到你的项目中。

希望这篇文章能帮助你打造更友好的视频观看体验，如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家一键三连给博主一点点鼓励！

前端技术专栏回顾：

01【前端技术】 ES6 介绍及常用语法说明
02【前端技术】标签页通讯localStorage、BroadcastChannel、SharedWorker的技术详解
03 前端请求乱序问题分析与AbortController、async/await、Promise.all等解决方案
04 前端开发中深拷贝的循环引用问题：从问题复现到完美解决
05 前端AJAX请求上传下载进度监控指南详解与完整代码示例
06 TypeScript 进阶指南 - 使用泛型与keyof约束参数
07 前端实现视频文件动画帧图片提取全攻略 - 附完整代码样例
08 前端函数防抖（Debounce）完整讲解 - 从原理、应用到完整实现
09 JavaScript异步编程 Async/Await 使用详解：从原理到最佳实践
10 前端图片裁剪上传全流程详解：从预览到上传的完整流程
11 前端大文件分片上传详解 - Spring Boot 后端接口实现
12 前端实现图片防盗链技术详解 - 原理分析与SpringBoot解决方案

Read more

Local Moondream2实战案例：独立开发者用其构建AI绘画灵感助手App

Local Moondream2实战案例：独立开发者用其构建AI绘画灵感助手App 你有没有遇到过这样的创作瓶颈？脑子里有个模糊的画面，却怎么也找不到合适的词语来描述它，AI绘画工具生成的图片总是差那么点意思。或者，在网上看到一张惊艳的图片，想学习它的构图和风格，却不知从何分析起。 对于独立开发者或小型创意团队来说，聘请专业的设计师或购买昂贵的创意工具往往成本高昂。今天，我要分享一个实战案例：如何利用一个名为 Local Moondream2 的超轻量级工具，快速构建一个完全运行在你个人电脑上的“AI绘画灵感助手”，彻底解决上述痛点。 1. 为什么选择Local Moondream2？ 在开始动手之前，我们先搞清楚这个工具到底能做什么，以及它为何适合独立开发者。 简单来说，Local Moondream2 是一个给你的电脑装上“眼睛”的本地化应用。你上传任何图片，它都能“看懂”，并用英文告诉你图片里有什么。它的核心能力有三项，每一项都对创意工作者极具价值： * 详细描述图片：它能生成一段极其详尽的英文描述，远超简单的“一只猫在沙发上”。这段描述可以直接用作AI绘画（如S

芯片制造行业如何通过WebUploader+PHP加密传输工程文件的分片数据？

《一个码农的奇幻外包漂流记》 需求分析会：当甲方爸爸说出"简单"二字时… 各位老铁们好！我是辽宁沈阳一名"资深"前端码农（资深=头发少）。刚接到个外包需求，看完后我直接表演了个东北式懵逼： 甲方需求翻译大赛： * “要支持20G文件” → “希望你电脑硬盘够大” * “兼容IE9” → “希望你心态够好” * “1000+文件的文件夹结构” → “希望你记忆力超群” * “预算100元含3年维护” → “希望你家里有矿” * “7×24小时支持” → “希望你不需要睡觉” 技术选型：穷且益坚版解决方案 前端部分（Vue3+原生JS缝合怪版） // 文件夹上传器（贫困版）classDiaoSiFolderUploader{constructor(){this.chunkSize =5*1024*1024;// 5MB一片this.maxTry =99;// 最大重试次数（因为甲方网络是2G）this.
（附源码）基于Java web的在线考试系统的设计与实现-计算机毕设 33482

（附源码）基于Java web的在线考试系统的设计与实现-计算机毕设 33482

基于Java web的在线考试系统的设计与实现 摘  要 随着信息技术的迅速发展，教育行业对在线考试系统的需求不断增加，尤其是在数字化转型的背景下，传统的人工考试管理方式逐渐暴露出诸多问题，如效率低、资源浪费、信息滞后等。为了提升考试管理的效率和学生的学习体验，在线考试系统的开发显得尤为重要。 该系统的功能设计主要包括：学生在线报名、考试、成绩查询、错题管理等功能；教师可以发布、编辑试卷、批改作业、查看成绩分析等；管理员负责系统用户管理、考试资源调度、公告发布等。系统通过清晰的角色分配，确保各类用户能够高效使用系统，实现学习、教学和管理的数字化与智能化。 技术方案上，系统前端采用Vue.js框架构建，实现与用户的良好交互；后端使用SpringBoot框架，结合Java语言进行业务逻辑处理，确保系统的高性能和可扩展性；MySQL数据库用于存储用户数据、考试成绩、题库信息等，保障数据的高效管理和查询性能。 通过在线考试系统的实施能够大幅提升考试管理效率，减少人工干预，优化资源分配，增强学生的参与感和互动体验。该系统不仅能帮助教育机构实现信息化管理，还能为学生和教师提供便捷
微信小程序webview postmessage通信指南

微信小程序webview postmessage通信指南

需求概述 在微信小程序中使用 web-view 组件与内嵌网页进行双向通信，主要通过 postMessage 实现。以下是完整的配置和使用方法： 通信指南 微信小程序webview官方文档 1. 基础配置 小程序端配置 // app.json 或 page.json { "usingComponents": {}, "permission": { "scope.webView": { "desc": "用于网页和小程序通信" } } } 网页端配置 <!-- 内嵌网页需引入微信JS-SDK --> <script src="https://res.wx.qq.com/open/