HTML5视频制作教程【速学版】

本文详解HTML5视频标签的正确嵌入方法，直击开发者常踩的“视频不播放、无声音、移动端适配失败”等高频坑点：强调视频必须使用H.264+AAC编码的MP4或WebM格式，路径需通过HTTP服务访问而非本地file协议，务必添加controls和preload="metadata"提升体验；明确指出autoplay必须与muted强制搭配才能在现代浏览器（尤其iOS Safari）中自动播放；并提供移动端自适应方案——用CSS的width:100%配合object-fit:cover精准控制显示效果，同时提醒兼容性回退策略。不讲虚的“制作”，只教你怎么让已有的视频真正在网页里稳稳跑起来。

怎么用 标签直接嵌入视频

不用“制作”，HTML5 本身不负责剪辑或转码，它只负责播放。你真正要做的，是把已有的视频文件（比如 MP4）用 标签正确加载出来。

常见错误是直接丢个本地路径进去，结果点开空白、没声音、或者报 Media resource failed to load —— 大概率是格式或路径问题。

• 必须提供至少一个 src 属性，且路径需可被浏览器访问（不能是 file:/// 协议下的本地绝对路径，开发时要用本地服务器）
• 推荐同时提供 controls 属性，否则用户没法播/暂停/调音量
• MP4（H.264 + AAC）兼容性最好；WebM 适合需要免版权编码的场景；不要只放 .avi 或 .mov，浏览器根本不认
• 加上 preload="metadata" 可减少首帧等待时间，尤其对大视频有用

示例：

<video controls preload="metadata" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

为什么加了 src 还是播不了

不是代码写错了，而是视频文件本身没过浏览器这关。Chrome/Firefox/Safari 对编码参数极其敏感，哪怕后缀是 .mp4，里面用 H.265 编码也大概率白屏。

• 检查编码：用 ffprobe video.mp4 看输出里是否含 h264（或 avc1）和 aac；出现 hevc 或 mp3 就得重转
• 关键参数：H.264 应为 Main 或 Baseline Profile，不能是 High 10；音频采样率建议 44.1kHz 或 48kHz，位深 16bit
• 移动端特别注意：iOS Safari 不支持自播放带声音的视频，必须加 muted 才能自动播放

autoplay 和 muted 必须一起用吗

是的，现代浏览器强制要求。单独写 autoplay 会被静音拦截，甚至直接不触发播放。

• 想自动播放且有声？不行。除非用户已与页面交互过（比如点过按钮），才能后续调用 play()
• autoplay muted 是唯一稳妥的自动播放组合，适用于背景视频、开屏动效等场景
• 别信“加了 playsinline 就能 iOS 自动有声”——iOS 仍会强制静音，且 playsinline 只影响是否全屏，不改声音策略

怎么让视频在手机上正常撑满宽度

默认 在移动端会按原始宽高比渲染，左右留黑边很常见。这不是 bug，是浏览器对 width/height 属性的保守处理。

• 用 CSS 覆盖更可靠：video { width: 100%; height: auto; }，但要注意父容器不能有固定高度限制
• 如果想裁剪适配（比如封面图效果），得加 object-fit: cover，否则用 contain 会留白
• 避免设 height: 100% —— 它依赖父级高度，而 默认是 inline 元素，父级高度常为 0

容易被忽略的是：某些安卓 WebView（尤其旧版）不支持 object-fit，得用 position: absolute + transform: scale() 回退方案，但优先测真机。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~