react-native-video动态URL加载问题：视频无法显示如何解决？

我来帮你梳理一下这个问题，react-native-video加载远程视频和本地资源确实有不少细节需要注意，咱们一步步排查解决：

1. 先确认拼接后的URL是否有效 #

这是最基础的一步，别着急看组件：

• 把${this.state.base_url}${item.video}拼接后的完整URL复制到浏览器或者Postman里，看看能不能直接播放视频。如果打不开，那问题出在URL本身——可能是拼接错误（比如多了斜杠//）、视频资源不存在，或者需要携带身份令牌（比如请求头里的token）才能访问。
• 推荐用new URL(item.video, this.state.base_url).href来拼接URL，它会自动处理斜杠的问题，避免手动拼接的错误：

  const videoUrl = new URL(item.video, this.state.base_url).href;
  

2. 检查平台权限配置 #

远程视频需要网络权限，不同平台的配置不一样：

• Android：在AndroidManifest.xml里确保添加了网络权限，Android 9及以上如果用HTTP URL的话，还要允许明文流量：

  <!-- 网络权限 -->
  <uses-permission android:name="android.permission.INTERNET" />
  
  <!-- 在application标签里添加（如果用HTTP的话） -->
  <application
    ...
    android:usesCleartextTraffic="true">
  

• iOS：在Info.plist里处理App Transport Security（ATS），如果是HTTP URL，需要添加例外；HTTPS的话一般不需要额外配置，但如果视频是HLS流媒体，可能需要确保ATS允许：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

3. 调整组件属性与样式，添加错误监听 #

有时候空白是组件没渲染空间或者加载出错没捕获到：

• 确保styles.backgroundVideo有明确的宽高，比如设置全屏样式：

  const styles = StyleSheet.create({
    backgroundVideo: {
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      flex: 1
    }
  });
  

• 添加onError和onLoad回调，捕获加载过程中的问题，方便排查：

  <Video
    repeat
    resizeMode='cover'
    source={{ uri: videoUrl }}
    style={styles.backgroundVideo}
    onError={(error) => console.error('视频加载失败:', error)}
    onLoad={() => console.log('视频开始加载')}
  />
  

4. 检查视频格式兼容性 #

react-native-video对不同平台支持的格式有差异：

• iOS 支持：MP4（H.264编码）、MOV、HLS等
• Android 支持：MP4（H.264）、WebM、HLS等
  如果视频格式不兼容，也会出现空白的情况，可以转成对应平台支持的格式再测试。

最后给你一个修改后的完整示例 #

// 假设在类组件里
componentDidMount() {
  // 这里是你用fetch获取数据的逻辑，确保state更新后再渲染视频
}

render() {
  const { item } = this.props; // 或者从state里取
  const videoUrl = new URL(item.video, this.state.base_url).href;
  
  return (
    <View style={{flex:1}}>
      <Video
        repeat
        resizeMode='cover'
        source={{ uri: videoUrl }}
        style={styles.backgroundVideo}
        onError={(err) => console.error('视频错误:', err)}
        onLoad={() => console.log('视频加载成功')}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

另外还要注意：如果你的视频URL是临时的（比如有过期时间），要确保渲染组件时URL还在有效期内；如果是fetch获取的URL，要等state更新完成后再渲染Video组件，避免渲染时URL还没准备好。

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