iOS 设备（iPhone/iPad）因系统限制不支持 <embed> 标签及非标准视频格式，需改用语义化 <video> 标签并提供 MP4（H.264 + AAC）格式，配合 playsinline、webkit-playsinline 等属性确保内联播放。
ios 设备（iphone/ipad）因系统限制不支持 `
在 HTML5 和 Bootstrap 项目中，为确保视频在 iOS 设备上正常播放，必须弃用 <embed> 或 <iframe> 的非标准用法——正如原代码所示，<embed> 标签不支持多 src 属性（浏览器仅读取第一个），且 iOS 完全忽略 .avi、.mov、.webm 等非原生支持格式（尤其 .mov 未经 H.264 编码时无法解码）。iOS Safari 仅原生支持 MP4 容器 + H.264 视频编码 + AAC 音频编码 的组合，且要求视频元素具备明确的交互控制属性。
✅ 正确做法：使用语义化 <video> 标签，并按优先级提供多种格式（实际只需 MP4 即可覆盖 iOS/Android/桌面端），同时添加关键兼容性属性：
<div class="container bg-white">
<div class="row">
<div class="col-xl-8" style="padding-top: 25px">
<div class="embed-responsive embed-responsive-16by9 bg-secondary">
<video
class="embed-responsive-item"
controls
playsinline
webkit-playsinline
preload="metadata"
poster="video/poster.jpg">
<source src="video/IMG_6921_mp4.mp4" type="video/mp4">
<!-- 可选：为其他平台补充 WebM（如需支持旧版 Firefox/Chrome） -->
<source src="video/IMG_6921_webm.webm" type="video/webm">
您的浏览器不支持视频播放，请升级或更换浏览器。
</video>
</div>
</div>
</div>
</div>? 关键说明：
- playsinline 和 webkit-playsinline：强制 iOS 在页面内播放（而非全屏跳转），是 iOS 10+ 必需属性；
- preload="metadata"：仅预加载元数据（时长、尺寸等），避免 iOS 自动下载整个视频导致卡顿或失败；
- poster 属性：设置封面图，提升首屏体验与 SEO 可访问性；
- 移除所有 .avi、.mov 源：iOS 不支持 AVI 容器；MOV 文件即使能播放，也需确认其编码为 H.264/AAC（推荐统一转码为 MP4）；
- Bootstrap 4+ 中，.embed-responsive-item 类需作用于 <video>（而非 <embed>），才能正确继承响应式样式。
? 转码建议（使用 FFmpeg）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
ffmpeg -i IMG_6921.mov -vcodec libx264 -acodec aac -movflags +faststart -vf "scale=-2:720" IMG_6921_mp4.mp4
该命令确保输出符合 iOS 兼容规范（H.264 Baseline/Main Profile、AAC-LC、快速启动）。
⚠️ 注意事项：
- iOS 不允许自动播放含声音的视频（autoplay + muted 除外），若需静音自动播放，添加 autoplay muted loop；
- 确保服务器正确配置 MIME 类型：.mp4 对应 video/mp4，否则 iOS 可能拒绝加载；
- 避免在 <video> 外层包裹 <a> 标签或监听 click 触发播放——iOS 要求用户手势（如 touchstart）直接触发 play()。
遵循以上方案，即可彻底解决 iOS 视频不播放问题，同时保持跨平台一致性与现代 Web 最佳实践。
