iOS 设备中 HTML Video 元素强制全屏播放的解决方案

在 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 中，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 写法（完整、健壮）：

? 补充提示：

• iOS 模拟器有时行为与真机不一致，务必在真实设备（如 iPhone 13+ iOS 17.5）上测试；
• 若使用 poster 图片，确保其尺寸与视频宽高比一致，避免渲染抖动引发全屏 fallback；
• 对于 Lighthouse 或 SEO 场景，可结合 onCanPlayThrough 延迟展示，但内联播放逻辑不受影响。

遵循以上配置后，视频将在所有现代 iOS 设备中稳定内联播放，彻底告别意外全屏弹窗。