React使用video标签无法播放AWS HTTPS链接视频应如何处理？

播放AWS HTTPS的视频不需要和普通链接不一样的实现方案，问题基本出在资源配置或者兼容设置上，按以下步骤排查即可：

• 排查跨域配置：如果你的视频存放在AWS S3桶中，需要在S3桶的CORS规则中添加你当前站点的域名作为允许来源，同时开放GET请求权限，并且明确暴露Content-Range响应头，这个响应头是浏览器实现视频流式加载、拖拽进度的必要配置，缺失会直接导致视频加载卡住。
• 验证链接有效性：先将你用的AWS视频链接单独复制到浏览器无痕窗口打开，确认可以正常播放。如果是私有桶的资源，需要确认链接的签名参数有效、未过期，权限不足会返回403错误导致无法加载。
• 检查响应头与编码：确认AWS返回的视频资源Content-Type响应头为video/mp4，同时视频本身采用H.264编码，编码不兼容的话原生video标签无法解码。
• 补充兼容属性：部分移动端浏览器对原生video标签有默认限制，添加playsInline、muted属性可以避免兼容问题，调整后的参考代码如下：

<video style={{width:'100%', height:'100%'}} controls playsInline muted>
    <source src="你的AWS HTTPS视频链接" 
        type="video/mp4" 
    />
</video>

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