应显式声明type="video/mp4"并确保服务器返回正确content-type，编码须为h.264+aac，加controls和preload="metadata"，修复moov atom位置，ios需muted+playsinline+用户手势触发。
用 <video></video> 标签直接播放 MP4，但得带 type 属性
MP4 本身不是浏览器原生支持的“万能格式”，真正起作用的是里面封装的编码——H.264 + AAC 组合才被所有主流浏览器默认支持。所以光写 <video src="a.mp4"></video> 可能静音、卡顿甚至不加载，尤其在 Safari 或旧版 Edge 上。
实操建议：
- 显式声明
type="video/mp4"，让浏览器提前知道 MIME 类型，避免试探性请求失败 - 确保服务器对
.mp4文件返回正确的Content-Type: video/mp4，否则 Chrome 会静默拒绝解码 - 优先用 H.264（Baseline/Main/High Profile）编码，别用 HEVC（H.265），它在 Windows 和部分安卓设备上没硬解支持
加 controls 和 preload 才算可用
没控件的 <video></video> 对用户等于不存在；不设 preload 则首次点击播放前可能白屏 1–3 秒——这不是 bug，是浏览器默认懒加载策略。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
html5动态显示媒体视频播放器代码
下载
html5动态显示媒体视频播放器代码,这个我们在企业网站或者教学网站会用到，教学网站，有一些视频要播放，那么就会用到播放器，可以参考源码，看看播放器的效果是如何实现的，php中文网推荐下载！
- 视频黑屏、进度条不动，但控制台无报错 → 很可能是
preload="none"或没设属性 - 移动端点一下没反应 → 缺少
controls，且 iOS 要求用户手势触发播放
推荐写法：
<video controls preload="metadata" width="640" height="360"> <source src="demo.mp4" type="video/mp4"> </video>其中
preload="metadata" 是平衡体验和流量的合理值：只加载时长、尺寸、首帧，不下载全部视频。
遇到 DOMException: The element has no supported sources 怎么办
这个错误几乎全是路径或编码问题导致的，和 JS 逻辑无关。
排查顺序：
- 检查
src路径是否 404 —— 打开开发者工具 Network 面板，看 MP4 请求状态码 - 用
ffprobe demo.mp4确认编码：输出里必须含codec_name=h264和codec_name=ac3或aac - 如果用 Nginx，确认配置里有
types { video/mp4 mp4; }，否则返回text/plain会被拒 - 本地双击打开 MP4 正常 ≠ 浏览器能播：文件系统和 HTTP 服务的 MIME 处理逻辑完全不同
Safari 和 iOS 上自动播放失败不是代码问题
这是 Apple 的硬性限制：没有用户手势（如 click/tap）的前提下，autoplay 仅允许静音视频。加了 muted 也不代表一定能播——iOS 还要看是否在可视区、是否被其他标签页抢占音频焦点。
实操建议：
- 放弃「进页面就响」的想法，用按钮触发
play()最稳妥 - 如果真要 autoplay，必须同时加
autoplay muted playsinline，且 JS 中捕获play().catch(...)做降级 -
playsinline不是可选：iOS 默认全屏播放，没它视频会跳转到原生播放器，UI 就断了
最易被忽略的一点：MP4 文件头（moov atom）位置。如果它在文件末尾（常见于剪辑软件直出），浏览器无法边下边播，Safari 会卡在 loading 状态。用 ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4 重排即可——这事不发生在开发机上，而是在部署后才暴露。
