手机浏览器中video标签需同时设置autoplay、muted、playsinline三属性才能正常播放，且javascript调用play()必须由用户手势触发，推荐使用h.264编码mp4格式并确保视频真静音或无音频流。
手机浏览器直接打开含 <video></video> 标签的 HTML 页面，大概率播不了——不是代码写错了，是默认策略拦住了。
为什么 <video></video> 在手机上点不动、没画面、甚至报错
移动端浏览器（尤其是 iOS Safari 和 Android Chrome）对自动播放、静音控制、资源加载有强限制。最常见现象：页面一打开视频黑屏、控制栏灰掉、点击无反应；或者控制台出现 NotAllowedError: play() can only be initiated by user gesture。
根本原因不是 HTML 写得不对，而是浏览器拒绝非用户主动触发的播放行为，且默认禁用音频自动播放（哪怕你加了 muted，某些安卓机型仍要显式声明）。
- iOS Safari 要求：
playsinline+muted+ 用户点击后才能调play() - Android Chrome 大部分版本允许静音自动播放，但需显式设置
muted和autoplay，且视频不能有音频轨道（或必须真静音） -
controls属性只是显示控件，不解决底层播放权限问题
<video></video> 标签必须加的 3 个属性
缺一不可，否则在多数真机上就是“看起来写了，实际动不了”。
立即学习“前端免费学习笔记（深入）”；
-
autoplay：告诉浏览器“我想自动开始”，但仅声明没用，得配合其他条件 -
muted：强制静音，绕过音频策略限制（即使视频本身没声音，也得加） -
playsinline：防止 iOS Safari 全屏跳转，让视频在页面内播放（否则点开就进原生播放器）
正确写法示例：
<video autoplay muted playsinline> <source src="demo.mp4" type="video/mp4"> </video>
JavaScript 播放必须等用户手势触发
想用 video.play() 控制播放？别在 DOMContentLoaded 或 load 里直接调。浏览器只认“真实点击/触摸”，比如按钮点击、touchstart、click 事件回调。
- 错误做法：
document.addEventListener('DOMContentLoaded', () => video.play())→ 必报NotAllowedError - 正确做法：绑定到用户可交互元素，例如
button.addEventListener('click', () => video.play()) - iOS 上
touchstart有时比click更可靠（click 有 300ms 延迟，且可能被拦截） - 播放失败时记得捕获 Promise 拒绝：
video.play().catch(e => console.log(e))，否则静默失败
MP4 格式和 H.264 编码仍是手机最稳组合
别为了“现代”去用 webm 或 av1。iOS 全系、老款安卓机对 VP9/AV1 支持极差，webm 在微信内置浏览器里基本不认。
- 编码用 H.264（AVC），不要 H.265（HEVC）——iOS 仅部分新机型支持，旧机直接白屏
- 容器用 MP4，不要 MOV 或 AVI（浏览器不解析）
- 推荐 FFmpeg 命令转码：
ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -ar 44100 output.mp4（baseline 级别兼容性最好） - 检查视频是否真静音：
ffprobe -v quiet -show_entries stream=codec_type:stream_tags=language -of default demo.mp4，确认没有 audio 流，或 audio 流已-an移除
最容易被忽略的其实是视频文件本身：路径 404、跨域没配 CORS、服务器没返回 Content-Range（影响拖拽），这些都会让 <video></video> 表现为“加载中”或黑屏，但控制台未必报错。真机调试时，先用 Safari 的「开发 > 响应式设计模式」模拟 iPhone，再连真机看 Network 面板里视频请求状态码和响应头。
