React Native Video 在 iOS 平台播放速率切换冻结问题解析

问题现象

在 React Native Video 组件中，当动态调整播放速率（rate 属性）时，iOS 平台会出现视频画面冻结的现象。具体表现为：视频仍在后台播放（可以听到声音），但画面停止更新，直到用户再次点击播放/暂停按钮或切换其他速率。

问题复现条件

1. 使用 React Native Video 组件（v5 稳定版或 v6 beta 版均存在此问题）
2. 在 iOS 设备上运行
3. 动态修改 rate 属性值
4. 视频处于播放状态时进行速率切换

技术背景分析

这个问题与 iOS 底层的 AVPlayer 实现机制有关。AVPlayer 在速率切换时需要进行一系列内部状态调整，特别是从低速（如 0.25x、0.5x）切换到其他速率时，容易出现画面渲染不同步的情况。

解决方案

经过社区验证，目前有以下两种可行的解决方案：

方案一：延迟重置速率

// 先将速率重置为1，稍后再设置目标速率
setRate(1);
setTimeout(() => {
    setRate(目标速率);
}, 100);

这种方法通过给 AVPlayer 一个缓冲时间，让播放器能够正确处理速率切换。

方案二：利用播放事件触发速率设置

const [currentRate, setCurrentRate] = useState(1);

<Video
  onLoadStart={() => {
    setCurrentRate(1);
  }}
  onProgress={(e) => {
    if (e.playableDuration) {
      setCurrentRate(目标速率);
    }
  }}
  rate={currentRate}
/>

这种方法利用视频加载和进度事件来触发速率设置，确保在播放器准备就绪后再调整速率。

最佳实践建议

1. 对于需要频繁切换速率的场景，推荐使用方案一
2. 对于初始化时设置速率的情况，方案二更为合适
3. 避免在短时间内连续切换不同速率
4. 对于极端低速（如 0.25x），建议先暂停视频，设置速率后再恢复播放

底层原理

这个问题本质上是因为 AVPlayer 的速率切换机制在特定条件下会导致渲染管线不同步。当从低速切换到高速时，播放器需要重新计算帧显示时间，而 React Native 的桥接机制可能导致这个过程的同步性出现问题。通过引入延迟或等待播放器就绪事件，可以确保状态转换的正确完成。

兼容性说明

此问题主要影响 iOS 平台，Android 平台不存在此限制。测试覆盖了从 iPhone 12（iOS 17.5.1）到各种模拟器环境，现象一致。React Native 版本从 0.74 到最新版本均可能遇到此问题。