如何使用JavaScript通过Cookie存储视频观看时长，无需依赖jwplayer

核心逻辑 #

• 监听视频播放进度，在用户切走标签页、刷新/关闭页面前将当前播放时长写入Cookie
• 页面首次加载时读取Cookie中存储的时长，自动将视频跳转到对应位置继续播放

1. 封装Cookie读写工具方法 #

// 写入Cookie
function setCookie(name, value, days = 7) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires="+ date.toUTCString();
  // path设为/保证全站同源页面都能读取，可根据需求调整作用范围
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

// 读取Cookie
function getCookie(name) {
  const cname = name + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(cname) == 0) {
      return c.substring(cname.length, c.length);
    }
  }
  return "";
}

2. 基础HTML结构 #

<video id="videoPlayer" controls width="800">
  <source src="你的视频地址.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频播放
</video>

3. 核心播放进度同步逻辑 #

window.addEventListener('DOMContentLoaded', () => {
  const video = document.getElementById('videoPlayer');
  const COOKIE_NAME = 'video_watch_progress';

  // 视频元数据加载完成后恢复播放进度
  video.addEventListener('loadedmetadata', () => {
    const savedProgress = getCookie(COOKIE_NAME);
    // 校验存储的进度是否在合法时长范围内
    if (savedProgress && !isNaN(savedProgress) && Number(savedProgress) < video.duration) {
      video.currentTime = Number(savedProgress);
    }
  });

  // 监听页面可见性变化，切走标签页时存储进度
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      setCookie(COOKIE_NAME, video.currentTime, 7);
    }
  });

  // 监听页面卸载前事件，刷新/关闭页面时存储进度
  window.addEventListener('beforeunload', () => {
    setCookie(COOKIE_NAME, video.currentTime, 7);
  });

  // 可选：播放过程中每3秒同步一次进度，避免极端情况进度丢失
  let timer = null;
  video.addEventListener('play', () => {
    timer = setInterval(() => {
      setCookie(COOKIE_NAME, video.currentTime, 7);
    }, 3000);
  });

  // 暂停/停止播放时清除定时器并立即同步进度
  video.addEventListener('pause', () => {
    clearInterval(timer);
    setCookie(COOKIE_NAME, video.currentTime, 7);
  });

  video.addEventListener('ended', () => {
    clearInterval(timer);
    // 视频播放完成后可删除进度Cookie
    // document.cookie = `${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  });
});

注意事项 #

• Cookie单条存储容量上限为4KB，仅存储时长数值完全够用，若有多视频需求可给不同视频分配独立Cookie名称，或者把多个视频的进度序列化后存入同一个Cookie
• 可根据需求调整Cookie的有效期、作用域（domain、path）、安全策略（secure、SameSite）
• 如果视频地址是跨域资源，需要服务端配置CORS允许读取视频元数据，否则无法正常设置播放进度

内容的提问来源于stack exchange，提问作者James