React网站Amazon S3视频无法在iPhone浏览器播放的问题求助

排查步骤及修复方案 #

1. 修复代码中的错误逻辑 #

你的onLoadedData回调存在两处明显问题：

• catch块里调用了muted()方法，实际上muted是video元素的属性，应赋值为true
• 成功回调里重复调用play()完全没必要

修改后的代码：

<video
    ref={videoRef}
    playsInline={true}
    controls={false}
    className={style.videoPlayer}
    loop={true}
    muted={true}
    autoPlay={true} // 直接添加autoPlay属性，符合标准自动播放逻辑
    onLoadedData={() => {
        const video = videoRef.current;
        if (!video) return;
        const promise = video.play();
        if (promise) {
            promise.catch(() => {
                // 兜底确保静音（兼容旧版本iOS）
                video.muted = true;
                video.play();
            });
        }
    }}
>
    <source
        src="https://ibeng.s3.ap-south-1.amazonaws.com/ibEngHeroVideo+(1).mp4"
        type="video/mp4"
    />
    Your browser does not support the video tag.
</video>

2. 验证视频编码兼容性 #

iPhone Safari对MP4视频编码有严格要求：

• 视频编码：H.264（Baseline、Main或High Profile）
• 音频编码：AAC-LC

可以用FFmpeg检查视频编码：

ffmpeg -i "ibEngHeroVideo+(1).mp4"

若编码不符合，重新转码：

ffmpeg -i 原视频.mp4 -c:v libx264 -profile:v main -c:a aac -b:a 128k 兼容视频.mp4

3. 检查S3桶的CORS配置 #

确保S3桶的CORS规则允许你的网站域名发起跨域请求，示例配置：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>https://你的网站域名.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

开发环境可临时设置<AllowedOrigin>*</AllowedOrigin>测试，生产环境需限制具体域名。

4. 确认视频URL的正确性 #

检查S3对象的实际名称是否与URL匹配：

• URL中的+是空格的转义字符，若S3对象名是ibEngHeroVideo (1).mp4（带空格），可将URL改为ibEngHeroVideo%20(1).mp4，避免解析异常。

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