最稳方案是原生<video>标签：必加controls和playsinline，MP4 H.264编码（baseline/level 3.0），分辨率≤1280×720，微信/QQ需额外加x5-video-player-type等四属性。
用 <video> 标签直接嵌入，别套第三方播放器
手机网站加视频，最稳的方式就是原生 <video> 标签。iOS 和 Android 现代浏览器都支持，不需要引入 video.js 或 plyr 这类库——除非你真需要自定义控件或字幕轨道。
常见错误是把 PC 端写法照搬过来：比如加 width="100%" 却不设 height，导致 iOS Safari 里视频区域塌陷；或者漏掉 playsinline，结果在 iPhone 上点播放就全屏，关不回来。
-
controls必须加，不然用户找不到播放按钮（Android 很多 WebView 默认不显示手势操作） -
playsinline必须加，否则 iOS 强制全屏，且无法通过 JS 拦截 -
preload="metadata"比"auto"更省流量，尤其对 4G/5G 用户友好 - 避免用
autoplay+muted试图静音自动播——安卓部分浏览器仍会拦截，iOS 则要求用户手势触发后才能播
MP4 H.264 编码是唯一稳妥选择
别信“WebM 更小”这种说法。在手机端，.mp4（H.264 + AAC）是兼容性底线。Android 4.1+、iOS 所有版本、微信内置浏览器、QQ 浏览器都认它；而 .webm 在 iOS 全系不支持，很多国产安卓浏览器也直接忽略 <source> 的第二选项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
ffmpeg转码时固定参数：-c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k -
baseline和level 3.0是关键，保证老机型（如 iPhone 5s、红米 Note 3）也能解码 - 分辨率别超
1280x720，否则低端机解码卡顿，且多数手机屏幕根本显示不完 - 别依赖
<source>多格式 fallback——移动端浏览器基本只读第一个<source>，后面的根本不试
点击播放失败？大概率是没触发用户手势上下文
错误现象：video.play() 报错 NotAllowedError: play() can only be initiated by user gesture。这不是 bug，是浏览器策略——所有现代移动浏览器都要求播放必须由真实点击/触摸触发，不能 onload 自动调、不能 setTimeout 延迟调、不能靠 scroll 或 visibilitychange 触发。
解决办法很直接：
- 把
video.play()放进button.onclick或div.ontouchstart里，且该事件监听器必须是用户首次交互后立即绑定的（不能提前绑好再等 click） - 如果想“模拟点击即播”，可以用一个半透明
<div>盖在视频上，ontouchstart时移除它并立刻video.play() - 别在
iframe里试图绕过限制——同源也不行，策略是 per-frame enforce 的
微信和 QQ 内置浏览器要额外加 x5-video-player-type
微信 Android、QQ 浏览器默认用 X5 内核，它对 <video> 有私有行为：不加特定属性时，即使写了 playsinline 也会强制全屏。必须显式声明：
<video x5-video-player-type="h5-page" x5-video-player-fullscreen="false">
注意两点：
-
x5-video-player-type="h5-page"是关键，设成"h5"或空值无效 -
x5-video-player-fullscreen="false"配合playsinline才真正禁用全屏 - 这两个属性只影响 X5 内核，其他浏览器直接忽略，无副作用
复杂点在于：X5 的行为在不同版本间有差异，比如某些 8.x 版本要求同时存在 webkit-playsinline 和 x5-video-player-type 才生效。所以最保险的做法是四个属性全写：playsinline、webkit-playsinline、x5-video-player-type、x5-video-player-fullscreen——少一个，就可能在某个机型上突然全屏。
