React Native播放Castr的HLS直播流失败，求解决方案

针对react-native-video无法打开URL的问题 #

• 校验依赖与原生配置
  1. 安装最新版依赖：npm install react-native-video 或 yarn add react-native-video
  2. iOS端：在Podfile中确保引入react-native-video，执行pod install；同时在Info.plist中添加网络权限例外（若HLS为HTTP协议）：

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

  3. Android端：在AndroidManifest.xml中添加网络权限：

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

• 验证HLS URL有效性
  用ffmpeg命令或浏览器测试流地址：ffmpeg -i [你的Castr HLS URL]，若返回流详情则URL正常，否则联系Castr确认地址正确性与访问权限。
• 正确配置Video组件
  指定HLS格式并添加错误监听：

  import Video from 'react-native-video';
  
  <Video
    source={{ uri: '你的Castr HLS流地址' }}
    style={{ width: '100%', height: 300 }}
    controls={true}
    resizeMode="contain"
    onError={(err) => console.log('播放错误:', err)}
    ios={{ allowsAirPlay: true, useNativeControls: true }}
    android={{ useNativeControls: true }}
  />
  

针对WebView iOS黑屏的问题 #

• 开启媒体播放支持属性
  配置WebView的媒体相关参数：

  import { WebView } from 'react-native-webview';
  
  <WebView
    source={{ uri: 'Castr提供的嵌入页面URL' }}
    style={{ flex: 1 }}
    allowsInlineMediaPlayback={true}
    mediaPlaybackRequiresUserAction={false}
    javaScriptEnabled={true}
    domStorageEnabled={true}
  />
  

• 使用官方嵌入HTML
  直接加载Castr生成的嵌入代码，而非裸流URL：

  const castrEmbedHtml = `
    <html>
      <body style="margin:0">
        <iframe src="Castr官方嵌入地址" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
      </body>
    </html>
  `;
  
  <WebView
    source={{ html: castrEmbedHtml }}
    style={{ flex: 1 }}
    allowsInlineMediaPlayback={true}
    mediaPlaybackRequiresUserAction={false}
  />
  

• 排查HTTPS证书问题
  若使用HTTPS流，确认证书为iOS信任的有效证书，避免因证书验证失败导致媒体加载失败。

通用排查步骤 #

• 测试公开HLS流（如https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8），区分是Castr流问题还是播放器配置问题。
• 查看Xcode/Android Studio的日志输出，定位具体错误（如网络请求失败、解码错误）。

内容的提问来源于stack exchange，提问作者Alp Emre Ozturk