Expo项目中expo-av的Video组件无法加载Django服务器视频

可能的原因及对应解决方案 #

1. 验证视频格式与编码兼容性 #

Expo Video组件依赖系统原生播放器，部分编码格式兼容性较差。优先使用H.264编码的MP4格式（移动端通用兼容格式），若视频格式不符，可通过工具转换：

ffmpeg -i input_video.mov -c:v libx264 -c:a aac output_video.mp4

2. 配置Django服务器CORS策略 #

若Expo应用与Django服务器域名不同，需开启跨域访问权限：

• 安装依赖：

pip install django-cors-headers

• 修改settings.py配置：

INSTALLED_APPS = [
    # 其他应用
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件
]

# 开发环境可临时允许所有来源，生产环境需指定具体域名
CORS_ALLOW_ALL_ORIGINS = True

3. 确认视频URL的有效性 #

检查拼接后的URL是否完整（需包含http://或https://前缀），可在代码中打印验证：

console.log("视频完整URL:", server + "media/" + media.uri);

4. 添加错误监听定位问题 #

给Video组件绑定onError回调，获取具体错误信息：

<Video
  style={{width: window.width * .93, height: window.width * .93 * 1.05}} 
  source={{uri: server + "media/" + media.uri}}  
  shouldPlay
  usePoster
  onError={(error) => console.log("视频加载错误:", error)}
/>

5. 检查Django媒体文件服务配置 #

• 开发环境：确保settings.py中配置了MEDIA_URL和MEDIA_ROOT，并在urls.py添加媒体路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 其他路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 生产环境：建议用Nginx等反向代理直接服务媒体文件，避免Django处理带来的性能和兼容性问题。

6. 配置Expo应用网络权限 #

若使用HTTP协议访问视频，需在app.json中开启明文流量权限：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
        }
      }
    },
    "android": {
      "usesCleartextTraffic": true
    }
  }
}

生产环境建议切换为HTTPS协议，提升安全性。

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