视频自动续播功能，是指播放器默认会记录视频上次观看到的时间点，在同一浏览器中再次打开播放页面，会自动从上一次观看的时间点继续播放，实现流畅、不间断的观看体验，尤其适用于教学培训课程的观看场景。

<div id="player"></div>
  <script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
  <script>
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为'on'时会禁用续播功能
});
</script>

<div id="player"></div>
  <script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
  <script>
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  vid: '88083abbf5bcf1356e05d39666be527a_8',
  history_video_duration: 3, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
  ban_history_time: 'off' //当值为'on'时会禁用续播功能
});
</script>

以下为视频自动续播的截图：

视频自动续播(视频从上一次中断的时间点03:50，自动续播)

视频自动续播(视频从上一次中断的时间点05:15，自动续播)

演示：https://tony.89525.com/continue-playing.phphttps://tony.89525.com/continue-playing.php

实现思路概述

1. 记录时间: 监听视频的特定事件（如 timeupdate 或 pause），获取当前的 currentTime。

2. 存储时间: 使用 localStorage（或 sessionStorage）将视频ID和对应的播放时间保存到浏览器。

3. 读取时间: 在页面加载和视频准备播放时，从存储中读取上次保存的时间。

4. 设置时间: 将读取到的时间值赋给视频的 currentTime 属性。

const video = document.getElementById('myVideo');
// ⚠️ 建议使用视频的唯一标识（例如：文件路径或自定义ID）作为 localStorage 的键
// 为了简化示例，我们直接使用视频元素的ID。
const videoId = 'myVideo'; 
const storageKey = `video_playback_time_${videoId}`;

// --- 1. 读取并设置播放时间（页面加载时） ---
function loadPlaybackTime() {
    const storedTime = localStorage.getItem(storageKey);
    
    if (storedTime) {
        // 确保视频元数据加载完成后再设置 currentTime
        video.addEventListener('loadedmetadata', function() {
            // 将存储的时间（字符串）转换回浮点数并设置
            video.currentTime = parseFloat(storedTime);
            console.log(`已加载上次播放时间: ${storedTime} 秒`);
            // 可选：设置 muted 为 true 并尝试播放，以绕过浏览器自动播放限制
            // video.muted = true;
            // video.play().catch(e => console.log('自动播放失败:', e));
        }, { once: true }); // 确保只执行一次
    } else {
        console.log('未找到上次播放记录。');
    }
}

// --- 2. 实时记录播放时间（播放/暂停时） ---
function savePlaybackTime() {
    // 检查视频是否已播放
    if (video.currentTime > 0) {
        // 将当前的播放时间保存为字符串
        // 使用 toFixed(1) 保留一位小数以减少存储开销，精确度足够
        const currentTime = video.currentTime.toFixed(1); 
        localStorage.setItem(storageKey, currentTime);
        // console.log(`已保存当前播放时间: ${currentTime} 秒`); // 实时记录可能会过于频繁
    }
}

// --- 3. 绑定事件监听器 ---

// 在视频播放时，定期（例如每 5 秒）记录一次时间，避免过于频繁的存储操作。
// 使用 timeupdate 事件，并结合一个计时器来控制频率。
let saveTimer = null;
video.addEventListener('timeupdate', function() {
    if (saveTimer === null) {
        saveTimer = setTimeout(() => {
            savePlaybackTime();
            saveTimer = null; // 重置计时器，等待下次触发
        }, 5000); // 间隔 5 秒保存一次
    }
});


// 在视频暂停、结束或用户关闭页面时也保存一次，确保记录了最后的时间点。
video.addEventListener('pause', savePlaybackTime);

// 监听页面卸载事件，在用户关闭或跳转页面前保存最后的时间
window.addEventListener('beforeunload', savePlaybackTime);

// 视频播放完毕时，可以清除记录，以便下次从头开始
video.addEventListener('ended', function() {
    localStorage.removeItem(storageKey);
    console.log('视频播放完毕，已清除记录。');
});


// 启动：加载上次的播放时间
loadPlaybackTime();

  [ 视频安全 ] 相关原创文章

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• Html5视频video标签中使用blob实现视频播放加密