Expo React Native自定义播放器拖动滑块时实时渲染报错问题

问题背景 #

基于Expo React Native开发自定义视频播放器，使用expo-av包的setPositionAsync方法，在拖动自定义滑块控件时更新视频播放位置，目标是实现流畅的实时帧渲染，以便精准定位视频特定位置。此前使用Redux管理播放器状态时无此问题，切换为本地状态管理播放位置后，拖动滑块进行实时帧更新时持续报错。

报错信息 #

拖动滑块时，控制台快速重复输出以下错误：

ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]
ERROR  Error setting video position: [Error]

错误详情：

Error setting video position: 
Object
code: "E_AV_SEEKING"
jsEngine: "hermes"
message: ""
stack: "Error\n    at construct (native)\n    at apply (native)\n    at _construct (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4485:28)\n    at Wrapper (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4443:25)\n    at construct (native)\n    at _createSuperInternal (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123803:322)\n    at call (native)\n    at CodedError (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123816:26)"
__proto__: Object
constructor: ƒ ()
jsEngine: "hermes"
__proto__: Object
constructor: ƒ ()
jsEngine: "hermes"
__proto__: Object

相关代码片段 #

// 节流函数，限制setPositionAsync的调用频率
const throttledSetPosition = useCallback(_.throttle(async (value) => {
  if (!isSeeking) {
    setIsSeeking(true); // 标记正在进行定位操作
    try {
      await videoRef.current.setPositionAsync(value * 1000);
    } catch (error) {
      console.error("Error setting video position:", error);
    } finally {
      setIsSeeking(false); // 重置定位状态
    }
  }
}, 500), [isSeeking]); // 节流时长设为500ms

// 滑块变化事件处理器
const handleSliderChange = (value) => {
  setLocalPlaybackPosition(value); // 立即更新本地状态保证UI响应性
  throttledSetPosition(value); // 调用节流函数更新视频位置
};

已尝试的解决方案 #

• 将播放位置的状态管理从Redux切换为本地状态
• 对setPositionAsync调用实现防抖和节流（时长覆盖250ms至500ms及以上）
• 调整防抖/节流的时长参数

预期与实际结果 #

• 预期：切换为本地状态管理后，保持或提升拖动滑块时实时视频帧渲染的响应性
• 实际：无论防抖/节流参数如何设置，拖动滑块时均持续触发报错

代码核心要点 #

• 使用Expo的expo-av包开发视频播放器
• 采用本地状态管理播放位置
• 通过setPositionAsync方法更新视频播放位置
• 已对setPositionAsync调用应用节流/防抖处理

内容的提问来源于stack exchange，提问作者Shay Singh