React Native搭配Express后端HTTP视频流无法播放的解决办法

先确认后端的字节范围请求支持 #

React Native的视频播放器（react-native-video、expo-av）依赖服务器支持HTTP Range请求才能实现流式播放，你用的后端实现需要确保：

• 响应头包含Accept-Ranges: bytes，表明服务器支持部分内容请求
• 收到Range请求时，返回206 Partial Content状态码，同时携带Content-Range头指定返回的字节范围
• 可以用curl验证后端是否正常工作：

  curl -H "Range: bytes=0-1023" https://www.apiurl.tld/video/video_id -I
  

  检查返回状态码是否为206，且存在Content-Range字段。

前端组件配置调整 #

1. react-native-video 配置 #

因为你的URI没有文件后缀，播放器无法自动识别格式，必须手动指定type属性，同时完善基础配置：

import Video from 'react-native-video';

// 组件内使用
<Video
  source={{
    uri: `https://www.apiurl.tld/video/video_id`,
    type: 'mp4' // 替换为你实际的视频格式，如mov、mkv等
  }}
  controls={true}
  resizeMode="contain"
  style={{ width: '100%', height: 300 }}
/>

额外配置：

• iOS：若使用HTTP地址，需在Info.plist中添加NSAppTransportSecurity允许明文传输；HTTPS无需特殊配置，自签证书需额外处理
• Android：确保AndroidManifest.xml中添加了<uses-permission android:name="android.permission.INTERNET" />；Android 9及以上使用HTTP地址时，需在application标签内添加android:usesCleartextTraffic="true"

2. expo-av 配置 #

同样需要指定视频MIME类型，同时开启原生控制和自动播放：

import { Video } from 'expo-av';
import { useRef } from 'react';

export default function StreamVideoPlayer() {
  const videoRef = useRef(null);

  return (
    <Video
      ref={videoRef}
      source={{ uri: `https://www.apiurl.tld/video/video_id` }}
      rate={1.0}
      volume={1.0}
      isMuted={false}
      resizeMode="contain"
      shouldPlay={true}
      useNativeControls={true}
      style={{ width: '100%', height: 300 }}
      contentType="video/mp4" // 对应视频的MIME类型
    />
  );
}

注意：Expo managed项目需确保已执行expo install expo-av，裸项目需手动配置平台权限。

其他排查要点 #

• 后端需返回正确的Content-Type头，比如MP4对应video/mp4，避免返回application/octet-stream（播放器无法识别），可在Express路由中添加：

  res.setHeader('Content-Type', 'video/mp4');
  

• 先在浏览器中测试该URI能否播放：如果浏览器无法播放，说明后端流实现有问题（如文件路径错误、Range解析逻辑异常）；如果浏览器能播放但React Native不能，优先检查播放器的格式指定和平台权限配置。

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