HTML5 视频在 iOS 设备（如 iPhone）上无法自动播放的解决方案

ios 系统对 html5 视频的自动播放有严格限制，需同时满足 `muted`、`playsinline`、正确的 mime 类型（如 `video/mp4`）及格式兼容性，否则视频将静音失败或完全不加载。

在 ios 设备（包括 iphone 和 ipad）上，html5

✅ 正确写法如下（关键修正已加粗）：

? 补充关键要点：

• type 属性必须真实反映文件编码格式：.mp4 文件应使用 type=”video/mp4″；WebM 文件才用 video/webm。浏览器依赖此属性快速判断是否支持，错误类型会导致资源被忽略。
• 推荐添加 preload=”auto”：提升 iOS 下的加载可靠性，尤其对背景视频场景。
• 确保视频编码兼容 iOS：使用 H.264（AVC）编码 + AAC 音频，容器为 MP4。可用 ffmpeg 检查或转码：

  ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output_ios.mp4

• css 辅助建议：为 .video-bg 添加 Object-fit: cover; width: 100%; height: 100%; 并确保父容器 .video-container 设置 position: relative; overflow: hidden;，避免拉伸或裁剪异常。

⚠️ 注意：iOS Safari 不支持 autoplay 与 muted 同时缺失，也不支持 background-video 的 CSS background: url(video.mp4) 方式——必须使用

立即学习“前端免费学习笔记（深入）”；

综上，修正 type 属性是第一步，但完整兼容还需兼顾编码格式、属性组合与加载策略。测试时请务必在真机 Safari 中验证，模拟器行为可能与实际不符。