React Native Video组件播放直播URL时视频无法显示

以下是针对该问题的排查和解决步骤：

• 检查视频组件样式
  确保styles.video设置了明确的尺寸，无宽高时视频组件会处于不可见状态。示例样式：

  const styles = StyleSheet.create({
    video: {
      flex: 1,
      width: '100%',
      height: '100%',
    },
  });
  

• 调整resizeMode参数
  尝试将resizeMode从"cover"改为"contain"或"stretch"，部分设备或流格式对cover模式兼容性较差。

• 验证流编码兼容性
  底层播放器（iOS AVPlayer/Android ExoPlayer）要求HLS流视频编码为H.264、音频为AAC。可使用ffprobe工具查看流信息：

  ffprobe https://www.cbsnews.com/common/video/cbsn_header_prod.m3u8
  

  若编码不符合要求，需调整流的编码格式。

• 平台特定配置检查

  • Android：确认AndroidManifest.xml已添加网络权限（虽音频能播放大概率已有，但仍需确认）：

    <uses-permission android:name="android.permission.INTERNET"/>
    

    若手动集成，确保ExoPlayer的HLS依赖已正确引入。
  • iOS：检查Info.plist的App Transport Security配置，若流存在HTTP跳转，需添加例外（示例URL为HTTPS，此步骤可能非必需）。

• 测试其他HLS流
  换用标准测试流验证组件功能，比如：

  source={{ uri: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'}}
  

  若该流能正常显示视频，说明原流本身存在问题。

• 升级react-native-video版本
  旧版本可能存在HLS播放bug，执行命令升级到最新稳定版：

  npm install react-native-video@latest
  # 或 yarn add react-native-video@latest
  

内容的提问来源于stack exchange，提问作者Kiran Vani