React Native Video 组件中 currentTime 与 playableDuration 不一致问题解析

问题现象

在使用 React Native Video 组件时，开发者发现当视频播放到结尾时，onProgress 回调中的 currentTime 和 playableDuration 参数存在不一致的情况。具体表现为：

• currentTime 略小于 playableDuration（通常相差几毫秒）
• 视频时长越短，这个差异越明显
• 这种不一致性导致自定义进度条无法准确显示视频已播放完毕的状态

技术背景

React Native Video 是一个流行的视频播放组件，它提供了丰富的回调函数来监控视频播放状态：

• onProgress：在视频播放过程中定期触发，提供当前播放位置信息
• onLoad：视频加载完成后触发，提供视频元数据
• onEnd：视频播放结束时触发

问题根源分析

经过技术团队分析，这个问题源于底层播放器实现的一个时序问题：

1. 当视频播放到结尾时，播放器会先触发最后一个 onProgress 回调
2. 然后才会触发 onEnd 回调
3. 在这两个事件之间，currentTime 尚未完全同步到视频的实际结束时间

这种实现方式导致了进度信息与结束状态之间的微小不一致，特别是在短视频中更为明显。

解决方案

针对这个问题，React Native Video 团队提供了两种解决方案：

临时解决方案

开发者可以在 onEnd 回调中手动将进度条设置为最大值：

const handleEnd = useCallback(() => {
  // 手动将进度设置为视频总时长
  setCurrentTime(videoDuration);
}, [videoDuration]);

永久解决方案

React Native Video 6.2 版本将修复此问题，具体改进包括：

1. 在触发 onEnd 回调前强制发送最后一个 onProgress 更新
2. 确保最后一个进度更新中的 currentTime 精确等于 playableDuration
3. 保持 API 行为的一致性

最佳实践建议

对于需要精确控制视频进度的开发者，建议：

1. 同时监听 onProgress 和 onEnd 事件
2. 在 onEnd 中做最终状态确认
3. 对于关键业务逻辑，不要完全依赖 onProgress 的精度
4. 考虑使用四舍五入比较时间值，避免严格的相等判断

总结

视频播放时序问题是多媒体开发中的常见挑战。React Native Video 团队通过改进事件触发机制解决了这个精度问题，同时也为开发者提供了临时解决方案。理解这些底层行为有助于开发者构建更稳定、更精确的视频播放体验。