视频续播功能实现：从前端到 Spring Boot 后端 | 极客日志

Java大前端java

视频续播功能实现：从前端到 Spring Boot 后端

综述由AI生成视频续播功能的实现方案。通过前端监听播放进度并结合本地存储或后端数据库记录观看位置，解决用户中断后需从头观看的问题。内容涵盖纯前端 localStorage 实现及基于 Spring Boot 的后端持久化方案，包括数据库设计、API 接口、Service 层逻辑及前端调用示例。同时提供了测试优化建议，如节流防抖、数据校验等，旨在提升用户体验并支持多设备同步。

星辰大海发布于 2026/4/5更新于 2026/5/2230 浏览

在这里插入图片描述

1. 前言

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

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

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

2. 为什么要做视频续播

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

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

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

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

3. 续播功能原理

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

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

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

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

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

在这里插入图片描述

3.2 常见的触发记录时机

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

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

4. 纯前端实现方案

下面演示基于原生 HTML5 Video + JavaScript 的示例，使用做本地保存。

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

localStorage

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频续播示例</title>
    <style>
        video { width: 100%; max-width: 600px; margin: 20px auto; display: block; }
    </style>
</head>
<body>
    <h2>视频续播示例</h2>
    <!-- 视频播放地址 -->
    <video id="myVideo" controls>
        <source src="https://你的视频地址.mp4" type="video/mp4">
    </video>
    <!-- 视频播放监听 -->
    <script>
        const video = document.getElementById('myVideo');
        const VIDEO_ID = 'movie-123'; // 视频标识
        const STORAGE_KEY = `video-progress-${VIDEO_ID}`;

        // 初始化播放位置
        const savedTime = localStorage.getItem(STORAGE_KEY);
        if (savedTime) video.currentTime = parseFloat(savedTime);

        // 进度记录函数
        function saveProgress() {
            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);

        // 节流函数
        function throttle(func, delay) {
            let lastCall = 0;
            return function (...args) {
                const now = Date.now();
                if (now - lastCall >= delay) {
                    func.apply(this, args);
                    lastCall = now;
                }
            };
        }
    </script>
</body>
</html>

// 存储完整观看记录
function savePlaybackState() {
    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());
}

CREATE TABLE video_progress (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id BIGINT NOT NULL,
    video_id VARCHAR(255) NOT NULL,
    watched_time DOUBLE NOT NULL,
    update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    UNIQUE KEY idx_user_video (user_id, video_id)
);

@RestController
@RequestMapping("/api/video")
public class VideoProgressController {
    @Autowired
    private VideoProgressService progressService;

    // 保存或更新进度
    @PostMapping("/progress")
    public ResponseEntity<?> saveProgress(@RequestBody ProgressRequest req, @RequestHeader("X-User-Id") Long userId) {
        progressService.saveOrUpdate(userId, req.getVideoId(), req.getCurrentTime());
        return ResponseEntity.ok().build();
    }

    // 获取进度
    @GetMapping("/progress")
    public ResponseEntity<Double> getProgress(@RequestParam String videoId, @RequestHeader("X-User-Id") Long userId) {
        Double time = progressService.getProgress(userId, videoId);
        return ResponseEntity.ok(time != null ? time : 0.0);
    }

    // 请求 DTO
    public static class ProgressRequest {
        private String videoId;
        private Double currentTime;
        // getters/setters...
    }
}

@Mapper
public interface VideoProgressMapper {
    @Select("SELECT * FROM video_progress WHERE user_id=#{userId} AND video_id=#{videoId}")
    VideoProgress findByUserAndVideo(@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()")
    void upsert(VideoProgress record);
}

@Service
public class VideoProgressService {
    @Autowired
    private VideoProgressMapper mapper;

    public void saveOrUpdate(Long userId, String videoId, Double time) {
        VideoProgress record = new VideoProgress(userId, videoId, time);
        mapper.upsert(record);
    }

    public Double getProgress(Long userId, String videoId) {
        VideoProgress rec = mapper.findByUserAndVideo(userId, videoId);
        return rec != null ? rec.getWatchedTime() : null;
    }
}

<video id="myVideo" controls>
    <source src="movie.mp4" type="video/mp4">
</video>
<script>
    const API_BASE = '/api/video';
    const video = document.getElementById('myVideo');
    const VIDEO_ID = 'movie-123';
    const userId = 42; // 假设已登录并拿到 userId
    const STORAGE_KEY = `video-progress-${VIDEO_ID}`;

    // 恢复进度 初始化播放位置
    async function loadProgress() {
        const res = await fetch(`${API_BASE}/progress?videoId=${videoId}`, {
            headers: {'X-User-Id': userId}
        });
        const time = await res.json();
        if (time > 0 && time < video.duration) {
            video.currentTime = time;
        }
    }

    // 进度记录函数
    function saveProgress() {
        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);

    // 节流函数
    function throttle(func, delay) {
        let lastCall = 0;
        return function (...args) {
            const now = Date.now();
            if (now - lastCall >= delay) {
                func.apply(this, args);
                lastCall = now;
            }
        };
    }
</script>

视频续播功能实现：从前端到 Spring Boot 后端

1. 前言

2. 为什么要做视频续播

3. 续播功能原理

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

3.2 常见的触发记录时机

4. 纯前端实现方案

更多推荐文章

相关免费在线工具

4.1 基础实现代码

4.2 增强版本地存储

5. 后端（Spring Boot）实现

5.1 数据库表

5.2 后端接口

5.3 Service 服务及 Mapper

5.4 前端调用示例

6. 测试与优化

7. 结语

更多推荐文章

相关免费在线工具

视频续播功能实现：从前端到 Spring Boot 后端

1. 前言

2. 为什么要做视频续播

3. 续播功能原理

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

3.2 常见的触发记录时机

4. 纯前端实现方案

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

4.1 基础实现代码

4.2 增强版本地存储

5. 后端（Spring Boot）实现

5.1 数据库表

5.2 后端接口

5.3 Service 服务及 Mapper

5.4 前端调用示例

6. 测试与优化

7. 结语

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具