移动端video标签需同时添加playsinline和webkit-playsinline以实现内联播放，配合preload="metadata"、H.264编码、baseline profile、GOP 30–60等参数优化首帧加载与兼容性。
移动端 playsinline 和 webkit-playsinline
iOS Safari 默认强制全屏播放视频，不加这两个属性，点击播放会跳转全屏、失去页面控制权，用户返回后经常卡在黑屏或静音状态。Android 部分浏览器（如微信内置 WebView）也依赖 playsinline 才能内联播放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
webkit-playsinline是 iOS 旧版必需，playsinline是 HTML5 标准属性，两者建议同时写，兼容性更稳 - 不要只靠 CSS 设置
width: 100%或height: auto就以为能自适应——需配合object-fit: cover或contain防止拉伸变形 - 如果用 Vue/React 动态渲染
，确保属性是原生 DOM 属性（不是 props），例如 Vue 中要用v-bind:playsinline或直接写在标签上
视频格式选 .mp4 + H.264 编码，避免 .webm 或 HEVC
移动端硬解能力差异大：Android 中低端机对 VP9 / AV1 支持弱，iOS 14 之前基本不支持 HEVC 在 中播放；而 H.264（AVC）是全平台默认支持的编码，软解 fallback 也最成熟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ffmpeg转码时明确指定编码器：ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4
-
-profile:v baseline和-level 3.0是关键：保证 iOS 6+ 和大部分 Android 4.1+ 设备可解码 - 避免用
-preset slow或高 bitrate（如 >5 Mbps），移动端带宽和解码能力有限，2–3 Mbps 已足够 720p - 不要在
.webm再写.mp4），某些安卓 WebView 会错误选择第一个但无法播放，导致静音/黑屏
首帧卡顿？预加载策略要设成 preload="metadata"，禁用 autoplay 除非静音
移动端浏览器普遍禁止有声 autoplay，强行加会失败且触发 play() rejected Promise，后续调用也容易被拦截。而 preload="auto" 会提前下载整个视频，在 4G/弱网下直接卡死加载进度条。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 默认设
preload="metadata"：只加载时长、尺寸、第一帧，够做封面和 UI 初始化 - 需要自动播放，必须同时满足：
autoplay+muted+playsinline，缺一不可 - 用户手势触发播放（如点击按钮）后再调用
video.play()，比依赖autoplay更可靠；注意捕获 rejected：video.play().catch(e => console.warn("Play failed:", e)); - 若首帧仍慢，检查视频是否含大量关键帧间隔（GOP 过大），用
ffprobe查看：ffprobe -v quiet -show_entries stream=codec_name,width,height,r_frame_rate,gop_size -of default input.mp4
，理想gop_size是 30–60（对应 1–2 秒）
微信/QQ 内置浏览器要额外加 x5-video-player-type="h5-page"
腾讯 X5 内核（微信、QQ、QQ 浏览器）有自己的视频播放策略，默认可能劫持 并替换成全屏播放器，导致样式错乱、事件丢失、无法监听 timeupdate。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加这个属性可强制走 H5 原生播放器：
x5-video-player-type="h5-page" - 同时推荐加上：
x5-video-player-fullscreen="false"，防止误触发全屏 - 注意：X5 内核对
object-fit支持不稳定，若封面图错位，可改用background-image+poster双保险 - 真机调试用微信开发者工具时，务必勾选「开启同层渲染」，否则 video 会盖住所有浮层（如弹窗、loading）
playsinline 导致反复全屏退出——这些细节一错，用户点十次都播不出第一帧。 
