如何在Expo React Native中显示S3受保护存储桶的MOV视频？

看起来你遇到的核心问题是拿到了有效的S3签名URL但视频无法在Expo Video组件中播放，同时还存在QuickTime打不开该MOV文件的情况，我来一步步帮你排查和解决：

1. 优先排查视频编码兼容性（最可能的原因） #

Expo的Video组件基于原生播放器，对视频编码有严格要求——很多MOV文件可能使用了ProRes、AV1这类原生播放器不支持的编码，这也是QuickTime打不开的关键原因（QuickTime对编码支持也有局限）。

解决办法：

• 把视频转码为Expo支持的编码格式，推荐：
  • 封装格式用MP4（兼容性最好），编码采用H.264/AVC + AAC
  • 如果坚持用MOV，确保编码是H.264/AVC（而非ProRes）
• 可以用FFmpeg工具快速转码，示例命令：

  ffmpeg -i input.mov -c:v libx264 -c:a aac output.mp4
  

2. 验证S3签名URL的有效性 #

Amplify获取的Protected级别的URL是带临时签名的，存在有效期（默认可能是15分钟），如果URL过期了，Video组件会加载失败，但浏览器可能仍能触发下载（部分CDN或S3的缓存行为）。

检查方式：

• 重新调用Storage.get获取最新的URL，替换到Video组件中测试
• 查看URL中的X-Amz-Expires参数，确认过期时间是否在有效期内

3. 完善Expo Video组件的配置 #

确保你的Video组件配置正确，尤其是错误捕获和基础属性：

import { Video } from 'expo-av';

// 你的组件内
return (
  <Video
    source={{ uri: organizerVideo }}
    style={{ width: '100%', height: 300 }}
    resizeMode="contain"
    shouldPlay={false}
    isLooping={false}
    onError={(error) => {
      console.error('Video playback error:', error);
      // 这里能拿到具体的错误信息，比如编码不支持、URL无效等
    }}
  />
);

• 一定要加上onError回调，它会告诉你具体的失败原因（比如编码不支持、网络错误）
• 确保设置了明确的width和height，否则组件可能显示为空

4. 检查S3存储桶的CORS配置 #

虽然你能下载视频，但如果CORS规则不允许Expo应用的来源访问，也可能导致Video组件加载失败。

S3 CORS规则参考（开发环境）：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

生产环境建议把AllowedOrigin改为你的应用域名。

5. 真机测试排除模拟器限制 #

iOS模拟器对某些视频编码的支持不如真机，建议直接用iOS或Android真机测试，很多时候模拟器无法播放的视频，真机可以正常播放。

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