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

在 React Native 视频播放应用开发中，许多开发者都遇到过视频进度控制相关的挑战。本文将深入分析 react-native-video 组件中一个常见的计时不一致问题，并提供专业的解决方案。

问题现象

当使用 react-native-video 组件播放视频时，开发者通常会依赖 onProgress 回调来获取视频播放进度。该回调提供三个关键参数：

• currentTime：当前播放位置
• playableDuration：可播放时长
• seekableDuration：可寻址时长

在理想情况下，当视频播放结束时，currentTime 应该等于 playableDuration。然而实际测试发现，两者之间存在微小差异（通常为几毫秒），这种差异在短视频（<10秒）中尤为明显。

技术原理分析

这种不一致性源于视频播放器的内部工作机制：

1. 时间戳精度问题：视频解码和渲染过程中存在微小的时序差异
2. 回调触发机制：onProgress 是周期性触发的，可能错过精确的结束点
3. 平台差异：iOS 和 Android 底层播放器实现不同，但都表现出类似行为

解决方案比较

临时解决方案（不推荐）

1. 使用 Math.floor 取整：会损失精度，可能导致进度跳变
2. 手动同步：在 onEnd 回调中强制设置进度

推荐解决方案

最新版本的 react-native-video (6.2+) 已通过以下方式修复该问题：

1. 在视频结束前强制触发一次 onProgress 回调
2. 确保结束时的 currentTime 精确匹配 playableDuration
3. 仍然保留 onEnd 回调作为播放结束的主通知机制

最佳实践建议

对于需要精确进度控制的场景（如自定义进度条），建议：

1. 同时监听 onProgress 和 onEnd 事件
2. 在 onEnd 中做最终状态同步
3. 对于关键业务逻辑，考虑添加容错机制

总结

视频播放中的时间同步是一个复杂的系统工程问题。react-native-video 组件通过持续优化，正在逐步完善这些细节问题。开发者理解这些底层机制后，可以构建出更稳定、用户体验更好的视频播放功能。