iOS H5视频播放需同时设置playsinline和webkit-playsinline属性，并配置WKWebView允许内联播放；自动播放须用户手势触发，推荐静音预加载；视频资源须HTTPS、支持CORS与byte-range，编码用H.264+MP4。
video 标签必须加 playsinline 和 webkit-playsinline
iOS Safari 和微信 WebView 默认强制全屏播放，不加这两个属性，视频一点击就跳转全屏，且无法内嵌在页面里——这是最常被忽略的硬性门槛。
-
playsinline是 HTML5 标准属性，iOS 10+ 支持 -
webkit-playsinline是 Safari 私有前缀，iOS 9–10 必须带，否则直接失效 - 二者要同时写，缺一不可：
- 仅加属性还不够：WKWebView 加载时需显式开启内联播放能力（
configuration.allowsInlineMediaPlayback = true）
自动播放必须由用户手势触发，但可“预加载+静音+立即暂停”绕过限制
iOS 禁止无交互的自动播放，哪怕加了 autoplay 属性也无效。强行调用 play() 会抛出 NotAllowedError 错误。
- 可行方案：等页面加载完成 + 用户任意点击/触摸后，立刻执行
video.play() - 微信环境可用
WeixinJSBridgeReady事件兜底，但注意它只触发一次，且 iOS 下仍需用户手势配合 - 若想“视觉上像自动播”，可先静音（
video.muted = true）、调用play()、立刻pause()，再等用户点播放按钮时从头开始——这样缓冲已就绪，点击即播 - 别依赖
canplaythrough：iOS 上该事件可能永不触发，改用loadeddata或canplay更稳妥
src 必须是 HTTPS，且服务器支持 CORS 和 byte-range 请求
即使页面走 HTTPS，视频地址若为 HTTP，iOS 会直接拒绝加载；更隐蔽的问题是：部分 Nginx/Apache 配置默认不返回 Accept-Ranges: bytes，导致 iOS 拖动进度条失败或卡在 loading 状态。
- 检查响应头：
curl -I your-video.mp4，确认含Accept-Ranges: bytes和Content-Type: video/mp4 - MP4 文件推荐用 H.264 + AAC 编码，封装为 MP4（不是 MOV），关键帧间隔 ≤ 2s
- 避免使用 base64 或 blob URL：iOS WKWebView 对它们的兼容性极差，容易报
VIDEO_ERR_SRC_NOT_SUPPORTED - 微信中若用 CDN，确保域名已配置在公众号 JS 安全域名列表里，否则
video.src赋值会静默失败
全屏控制和 UI 适配要区分平台，不能只靠 CSS
iOS 的全屏行为是系统级接管，CSS 的 object-fit、width/height 在全屏状态下基本失效；而 Android 需手动处理 x5 内核的全屏 API。
- 监听
webkitbeginfullscreen/webkitendfullscreen事件做 UI 切换（如隐藏顶部导航栏） - 不要用
video.webkitEnterFullscreen()主动唤起全屏——微信和部分 iOS 版本会拦截并报错 - 内嵌播放时，建议设
width="100%" height="auto"，配合object-fit: contain防拉伸；全屏时靠系统原生控件，别自己画 - 测试务必真机：模拟器对 media playback 行为模拟不准，尤其涉及手势、音频焦点、后台暂停等场景
真正卡住人的从来不是“怎么放出来”，而是“为什么点一下没反应”“为什么拖不了进度”“为什么微信里黑屏”。这些问题背后几乎都指向三个点：属性漏写、协议不合规、事件时机错乱。把 playsinline、HTTPS 头、用户手势链这三件事钉死，80% 的 iOS H5 视频问题就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
