要彻底解决 iOS 设备（尤其是 iOS 10+ 及较新 iPhone/iPad）中
✅ 正确的 video 标签应包含以下 全部五个关键属性（缺一不可）：
- autoPlay：触发自动播放（iOS 要求静音前提下才允许）
- muted：强制静音（iOS 硬性要求，否则 autoPlay 被忽略）
- playsInline：明确告知 Safari 在页面内播放（非全屏）
- loop：循环播放（增强内联稳定性，部分 iOS 版本依赖此属性触发内联策略）
- controls：必须显式设置（即使你不想显示控件，也建议设为 controls={false} 或保留但用 CSS 隐藏；实测中省略 controls 会导致某些 iOS 16+/17 设备回退至全屏模式）
⚠️ 注意事项：
- 在 React 中，playsinline 应写作 playsInline（PascalCase），但最终渲染的 DOM 属性仍是小写 playsinline —— React 会自动转换，无需手动 dangerouslySetInnerHTML。
- autoPlay 必须与 muted 同时存在，否则 iOS Safari 直接禁用自动播放。
- 视频格式优先使用 H.264 编码的 MP4（.mp4），避免 WebM 或未优化的 HEVC，以保证 iOS 兼容性。
- 若仍异常，可添加 CSS 强制约束尺寸与层级：
.ourstory-video { width: 100%; height: auto; object-fit: cover; display: block; /* 防止 Safari 意外提升 z-index 导致浮层 */ position: relative; z-index: 0; }
? 推荐的 React 写法（完整、健壮）：
立即学习“前端免费学习笔记（深入）”；
<video
src="/assets/videos/Our-Story.mp4"
className="ourstory-video"
autoPlay
muted
playsInline
loop
controls={false} // 显式关闭控件，更安全
preload="auto"
/>? 补充提示：
- iOS 模拟器有时行为与真机不一致，务必在真实设备（如 iPhone 13+ iOS 17.5）上测试；
- 若使用 poster 图片，确保其尺寸与视频宽高比一致，避免渲染抖动引发全屏 fallback；
- 对于 Lighthouse 或 SEO 场景，可结合 onCanPlayThrough 延迟展示，但内联播放逻辑不受影响。
遵循以上配置后，视频将在所有现代 iOS 设备中稳定内联播放，彻底告别意外全屏弹窗。
