ArtPlayer 视频播放器：如何定时保存播放进度到 Cookies

在视频播放应用中，保存用户的观看进度是一个常见的需求。本文将介绍如何基于 ArtPlayer 播放器实现每 5 秒自动保存当前播放时间到 Cookies 的功能。

实现原理

ArtPlayer 提供了丰富的事件监听机制，我们可以利用 video:timeupdate 事件来监听视频播放进度的变化。该事件会在视频播放过程中不断触发，我们需要从中筛选出符合条件的时间点进行保存。

核心代码实现

// 初始化播放器
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

// 记录上次保存的时间点
let lastSavedTime = 0;

// 监听时间更新事件
art.on('video:timeupdate', () => {
    // 检查是否达到5秒间隔
    if (art.currentTime - lastSavedTime >= 5) {
        // 保存当前时间到Cookies
        console.log('保存播放进度到Cookies:', art.currentTime);
        document.cookie = `video_progress=${art.currentTime}; path=/`;
        
        // 更新最后保存时间
        lastSavedTime = art.currentTime;
    }
});

代码解析

1. 初始化播放器：首先创建一个 ArtPlayer 实例，配置容器和视频源。

2. 时间记录变量：lastSavedTime 变量用于记录上次保存的时间点，初始值为0。

3. 事件监听：通过 art.on('video:timeupdate', ...) 监听视频时间更新事件。

4. 时间间隔检查：每次事件触发时，检查当前时间与上次保存时间的差值是否达到5秒。

5. 保存到Cookies：当满足条件时，将当前播放时间保存到Cookies中，并更新 lastSavedTime。

实际应用建议

1. 恢复播放进度：可以在播放器初始化后读取Cookies中的进度值，并设置初始播放位置：

   const progress = getCookie('video_progress');
   if (progress) {
       art.seek = parseFloat(progress);
   }
   

2. 优化性能：对于长时间视频，可以考虑增加间隔时间（如10秒）以减少保存频率。

3. 数据持久化：除了Cookies，也可以考虑使用localStorage或IndexedDB进行存储，特别是对于需要长期保存的进度数据。

4. 错误处理：添加适当的错误处理，确保保存操作不会影响正常播放。

总结

通过ArtPlayer的事件系统和简单的JavaScript逻辑，我们可以轻松实现视频播放进度的定时保存功能。这种实现方式既不会影响播放性能，又能为用户提供良好的观看体验，确保他们下次继续观看时可以从上次离开的位置开始。