能，但前提是MP4封装的H.264+AAC编码被浏览器支持；需用<video controls><source src="demo.mp4" type="video/mp4"></video>写法，确保服务器返回Content-Type: video/mp4，并避免HEVC等不兼容编码。

video 标签能直接播放 MP4 吗？

能，但前提是 MP4 封装的视频流编码符合浏览器支持范围。不是所有 .mp4 文件都能播——关键看里面的视频编码（如 H.264、H.265）和音频编码（如 AAC）。Chrome、Edge、Safari 默认只认 H.264 + AAC 组合；Firefox 对 H.265 支持有限，且需系统级解码器配合。

最简可用的 video 标签写法

去掉多余属性，只保留播放必需项，避免兼容性陷阱：

<video controls>
  <source src="demo.mp4" type="video/mp4">
</video>

• controls 属性必须加，否则用户无法操作（即使自动播放也建议留着）
• <source> 标签比直接写 src 属性更可靠，能显式声明 type，帮助浏览器快速判断是否支持
• 不要省略 type="video/mp4" —— 即使后缀是 .mp4，不声明 MIME 类型时，某些 Safari 版本会静默失败
• 避免用 autoplay 配合 mute 以外的设置，现代浏览器普遍拦截有声音的自动播放

MP4 播不了的常见报错和排查点

打开开发者工具 → Console 或 Network 标签页，重点关注这几类信号：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• Network 中 demo.mp4 返回 404 或 403：路径写错、服务器没配 MIME 类型（需确保响应头含 Content-Type: video/mp4）
• Console 出现 DOMException: The element has no supported sources：MP4 实际用了 H.265 编码，而当前浏览器不支持（可拖进 VLC 看编码信息）
• 视频画面卡住、只有声音：可能是关键帧间隔太长，或 MP4 的 moov box 在文件末尾（需用 ffmpeg -c copy -movflags +faststart demo.mp4 修复）
• 部分安卓 WebView 白屏：确认没用 preload="metadata" 之外的值，某些旧版 Webview 对 preload="auto" 处理异常

需要兼容老设备或特殊场景时的补充策略

纯 MP4 并非万能解法，尤其面对 iOS 10 以下、国产安卓浏览器或企业内网老旧环境：

立即学习“前端免费学习笔记（深入）”；

• 加一个 poster 属性提供封面图，避免加载中空白：poster="cover.jpg"
• 准备 fallback 方案：在 </video> 后加提示文字或链接，例如 <p>您的浏览器不支持视频播放，请<a href="demo.mp4">下载观看</a></p>
• 如果必须支持 H.265，得搭配 JavaScript 库（如 hls.js 转 HLS，或 mp4box.js 做客户端解码），但这会显著增加首屏时间和内存占用
• 服务端注意：Nginx 默认不识别 .mp4，需在配置中加入 types { video/mp4 mp4; }

实际部署时，别只信本地双击能播——不同设备、不同网络条件、不同浏览器内核对 MP4 的容忍度差异很大。最稳妥的做法：用 FFmpeg 检查编码参数，再在真机上测三款主流浏览器。