XgPlayer 记忆播放功能失效问题分析与解决方案

问题背景

在视频播放器开发中，记忆播放功能是一个常见的需求，它能够让用户在下次观看视频时从上次中断的位置继续播放。XgPlayer作为一款优秀的开源播放器，提供了lastPlayTime配置项来实现这一功能。然而，在3.0.16版本中，开发者反馈该功能存在失效问题。

问题现象

开发者在使用XgPlayer 3.0.16版本时，按照官方文档配置了lastPlayTime参数（设置为10秒），期望视频能够从第10秒开始播放。但实际运行时，视频仍然从头开始播放。通过打印播放器实例可以确认配置确实被正确设置，但功能未生效。

技术分析

预期工作原理

正常情况下，lastPlayTime配置项应该：

1. 在播放器初始化时读取该值
2. 在视频元数据加载完成后（loadedmetadata事件触发时）
3. 将播放器的currentTime设置为指定值

可能的原因

1. 初始化时机问题：视频元数据加载完成前尝试设置时间点可能导致失败
2. 异步加载问题：URL视频源加载是异步过程，可能在设置时间点前已经开始播放
3. 销毁重建问题：开发者代码中先销毁再重建播放器，可能影响状态保存
4. 浏览器兼容性问题：某些浏览器对currentTime的设置有限制

解决方案

临时解决方案

可以使用播放器的currentTime属性直接设置播放位置：

player.value.currentTime = 起始时间;

这种方法简单直接，但需要在确保视频已加载完成的适当时机调用。

推荐解决方案

1. 使用事件监听确保设置时机正确：

this.player = new Player({
  id: 'xPlayer',
  url: this.showWorks.video,
  fluid: true,
  videoInit: true,
  autoplay,
});

this.player.on('ready', () => {
  this.player.currentTime = 10; // 设置记忆播放时间点
});

2. 结合本地存储实现更可靠的记忆播放：

// 保存播放位置
player.on('timeupdate', () => {
  localStorage.setItem('lastPlayTime_'+videoId, player.currentTime);
});

// 初始化时读取
const lastTime = localStorage.getItem('lastPlayTime_'+videoId) || 0;
player.currentTime = parseFloat(lastTime);

3. 检查播放器版本： 升级到最新稳定版本，确保没有已知的bug影响功能

最佳实践建议

1. 对于重要功能点，建议结合事件监听和直接属性设置双重保障
2. 考虑添加错误处理，当设置时间点失败时提供备用方案
3. 对于长视频，可以定期保存播放位置，避免意外中断导致进度丢失
4. 在移动端使用时，注意处理页面生命周期事件，及时保存播放状态

总结

XgPlayer的记忆播放功能虽然提供了便捷的配置方式，但在实际应用中需要考虑视频加载的异步性和浏览器兼容性问题。通过理解播放器的工作原理，结合事件监听和直接属性操作，可以构建更可靠的记忆播放功能。对于关键业务场景，建议实现本地存储方案作为补充，确保用户体验的一致性。