React Native Video 组件在 iOS 平台广告播放问题的解决方案

问题背景

在使用 React Native Video 组件（版本 6.10.2）开发视频播放应用时，开发者遇到了一个平台差异性问题：当尝试通过 setSource 方法动态切换视频源并插入中插广告时，Android 平台表现正常，而 iOS 平台则会出现广告被跳过、直接播放主内容的情况。

核心问题分析

这个问题主要涉及以下几个方面：

1. 平台差异性：iOS 和 Android 在视频播放器实现上的差异导致广告处理逻辑不一致
2. 状态管理：视频播放器在切换源时的内部状态处理
3. 广告触发时机：中插广告的精准触发与播放控制

技术细节

原始方案的问题

开发者最初尝试使用统一的 setSource 方法处理广告插入：

videoRef?.current?.setSource({
  uri: videoURL,
  ad: {
    adTagUrl: midRollAdUrl
  },
  startPosition: currentTime
});

这种方法在 Android 上工作正常，但在 iOS 上会出现：

1. 广告被跳过
2. 直接播放主内容
3. 播放位置不准确

iOS 平台的解决方案

经过多次尝试，开发者找到了一个针对 iOS 的有效解决方案：

1. 重置视频引用：先将 videoRef.current 设为 null
2. 强制重新渲染：通过修改组件 key 触发重新渲染
3. 设置新属性：更新广告 URL 和开始位置

关键代码实现：

if (Platform.OS === "ios") {
  videoRef.current = null;
  setPlayerKey(prevKey => prevKey + 1);
  setAdUrl(midRollAdUrl);
  setVideoStartPosition(Math.floor(currentTime) * 1000);
}

完整实现方案

广告触发逻辑

const triggerMidRollAd = (cuePoint) => {
  setShowMidRollAds(true);
  setShowControls(false);

  if (Platform.OS === "ios") {
    videoRef.current = null;
    setPlayerKey(prevKey => prevKey + 1);
    setAdUrl(midRollAdUrl);
    setVideoStartPosition(Math.floor(currentTime) * 1000);
  } else {
    videoRef?.current?.setSource({
      uri: videoURL,
      ad: { adTagUrl: midRollAdUrl },
      startPosition: Math.floor(currentTime) * 1000
    });
  }
  
  // 更新其他状态...
};

广告事件处理

const OnReceiveAdEvent = useCallback((event) => {
  if (event.event === "LOADED" || event.event === "CONTENT_PAUSE_REQUESTED") {
    setIsAdLoaded(true);
    videoRef?.current?.resume();
  }

  if (event.event === "STARTED") {
    setIsLoading(false);
  }

  if (AD_PLAY_TYPES.includes(event.event)) {
    setIsAdPlay(true);
  }

  if (AD_STOP_TYPES.includes(event.event)) {
    setIsAdPlay(false);
    if (showPostRollAds) {
      handleVideoEnd();
    } else {
      setShowMidRollAds(false);
    }
  }
}, [dependencies]);

性能优化考虑

虽然修改 key 的方案解决了问题，但需要注意：

1. 组件重新挂载：每次修改 key 会导致组件完全重新加载
2. 加载时间：可能会增加视频重新加载的时间
3. 状态保持：需要手动维护播放位置等状态

替代方案探讨

如果对性能有更高要求，可以考虑：

1. 预加载广告：提前加载广告内容，减少切换时的等待时间
2. 双播放器方案：使用两个播放器实例交替播放内容和广告
3. 原生模块扩展：针对 iOS 平台开发专门的原生模块处理广告插入

总结

React Native Video 组件在 iOS 平台上处理动态广告插入时确实存在一些特殊行为。通过重置引用和强制重新渲染的方案虽然不够优雅，但在当前版本下是一个有效的解决方案。开发者需要根据实际应用场景，在功能实现和性能表现之间找到平衡点。

对于长期维护的项目，建议关注 React Native Video 的版本更新，或者考虑向社区提交 PR 修复这个平台差异性问题。