react-native-video是否支持Android端HLS格式？如何播放AWS S3中的HLS视频？

1. Android平台HLS支持情况 #

react-native-video在Android平台完全支持HLS（.m3u8）视频格式。默认使用Android系统自带的MediaPlayer（API 19及以上原生支持HLS），若需要更好的兼容性、自适应码率等进阶功能，可配置使用ExoPlayer作为底层播放器，它对HLS的支持更完善，能覆盖更多低版本Android设备。

2. 播放AWS S3中HLS视频的步骤 #

步骤1：安装react-native-video #

在项目中安装依赖：

npm install react-native-video
# 或使用yarn
yarn add react-native-video

新版本的react-native-video会自动完成Android端的链接配置，无需手动操作。

步骤2：配置AWS S3权限与CORS #

• 文件访问权限：若S3存储桶为私有，需为HLS主文件（.m3u8）和分片文件（.ts等）生成预签名URL（在有效期内可直接访问）；若为公开存储，直接将文件设置为公开可读即可。
• CORS规则配置：在S3存储桶的权限设置中添加CORS规则，允许跨域访问，示例规则：

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

步骤3：编写播放代码 #

在React Native组件中使用Video组件加载S3的HLS视频：

import React from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';

const S3HLSPlayer = () => {
  // 替换为你的S3 HLS视频URL（公开地址或预签名URL）
  const hlsUrl = 'https://your-bucket-name.s3.region.amazonaws.com/path/to/your/video.m3u8';

  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{ uri: hlsUrl }}
        style={{ flex: 1 }}
        controls={true} // 显示原生播放控件
        resizeMode="contain" // 视频缩放适配模式
        // 强制使用ExoPlayer提升兼容性（可选）
        player="exoplayer"
      />
    </View>
  );
};

export default S3HLSPlayer;

步骤4：测试与排查 #

• 先验证URL有效性：在浏览器中打开HLS链接，确认能正常加载.m3u8文件。
• 若出现跨域错误，检查S3的CORS配置是否生效。
• 低版本Android设备建议启用ExoPlayer，解决兼容性问题。

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