手机浏览器原生支持标签播放h.264+aac编码的mp4，需确保src路径有效、加controls或js控制、设playsinline/autoplay/muted，并配置服务端支持range请求和正确content-type。
用 <video></video> 标签直接播放 MP4，别绕路
手机浏览器（Chrome、Safari、Edge 等）原生支持 <video></video> 播放 MP4，只要格式合规，不用调外部播放器、不需 JS 触发也能点开即播。关键不是“怎么调”，而是“怎么写对”。
常见错误是加了多余属性或路径不对：比如用了 type="video/mp4" 却没配对的 src，或者 MP4 实际是 HEVC 编码（iOS 11+ 支持，但 Android 大量旧机型不认）。
-
src必须是可访问的绝对路径或相对路径（如./movie.mp4），不能是本地file://路径（iOS Safari 直接拒绝） - 加
controls才有播放控件；不加的话得用 JS 调play()，且 iOS 要求用户手势触发 - 推荐加上
playsinline（iOS Safari 防止全屏跳转）、webkit-playsinline（兼容老版）
MP4 播放失败？先查编码和容器是否被支持
不是所有 .mp4 文件都能播。手机浏览器只认 H.264 + AAC 的组合，HEVC（H.265）、AV1、VP9 基本不支持（除部分新版 Safari）。用 ffprobe 或在线工具看下流信息：
ffprobe -v quiet -show_entries stream=codec_name,width,height,codec_type -of default video.mp4
输出里 codec_name=h264 和 codec_name=aac 才稳。如果看到 hevc 或 av1，得重编码：
立即学习“前端免费学习笔记（深入）”；
- 用
ffmpeg转成标准 MP4：ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 -
-movflags +faststart很重要——把元数据移到文件头，否则手机要下载完才开始播 - 分辨率别超 1920×1080，码率建议 ≤5 Mbps；否则低端机解码卡顿甚至报
MediaError.MEDIA_ERR_DECODE
自动播放被拦截？iOS 和 Android 处理方式不同
所有现代手机浏览器都禁止无用户交互的自动播放（尤其带声音的）。想“一打开就播”，得按平台区分处理：
- iOS Safari：必须等
touchstart或click后才能调video.play()，且不能带muted以外的音频设置 - Android Chrome：允许
muted+autoplay，但若用户之前关闭过媒体自动播放权限，照样失败 - 稳妥做法：加
muted和autoplay，再监听canplay后手动play()，失败时 fallback 到显示播放按钮
示例片段：
<video muted autoplay playsinline webkit-playsinline> <source src="video.mp4" type="video/mp4"> </video>
为什么加了 src 还是黑屏或报错？检查服务端响应头
手机浏览器对视频流的 HTTP 响应头更敏感。如果服务器没返回 Accept-Ranges: bytes 或 Content-Range，拖动进度条会失败；如果 Content-Type 不是 video/mp4，某些安卓浏览器直接不加载。
用浏览器开发者工具的 Network 面板看请求响应：
- 确认
Content-Type是video/mp4（Nginx/Apache 需配置 MIME 类型） - 确认返回状态码是
200或支持分片的206（尤其是大文件） - 如果走 CDN，关掉“压缩视频”或“智能转码”类功能——它们可能悄悄改编码
本地测试可用 Python 快速起一个带正确头的服务器：python3 -m http.server 8000 --bind 127.0.0.1，它默认返回正确类型。
最常被忽略的是：MP4 文件本身损坏、HTTP 服务没配 range 请求支持、iOS 上忘了加 playsinline ——这三点占了真机播放失败的八成以上。
