在 ios safari 中,`
要彻底解决 iOS 设备(尤其是 iOS 10+ 及较新 iPhone/iPad)中
✅ 正确的 video 标签应包含以下 全部五个关键属性(缺一不可):
- auto

Play:触发自动播放(iOS 要求静音前提下才允许)
- muted:强制静音(iOS 硬性要求,否则 autoPlay 被忽略)
- playsInline:明确告知 Safari 在页面内播放(非全屏)
- loop:循环播放(增强内联稳定性,部分 iOS 版本依赖此属性触发内联策略)
- controls:必须显式设置(即使你不想显示控件,也建议设为 controls={false} 或保留但用 CSS 隐藏;实测中省略 controls 会导致某些 iOS 16+/17 设备回退至全屏模式)
⚠️ 注意事项:
? 推荐的 React 写法(完整、健壮):
? 补充提示:
- iOS 模拟器有时行为与真机不一致,务必在真实设备(如 iPhone 13+ iOS 17.5)上测试;
- 若使用 poster 图片,确保其尺寸与视频宽高比一致,避免渲染抖动引发全屏 fallback;
- 对于 Lighthouse 或 SEO 场景,可结合 onCanPlayThrough 延迟展示,但内联播放逻辑不受影响。
遵循以上配置后,视频将在所有现代 iOS 设备中稳定内联播放,彻底告别意外全屏弹窗。