用标签嵌入视频需确保路径可访问、格式为H.264+AAC的MP4或WebM，添加controls和preload="metadata"，移动端注意autoplay muted组合及object-fit适配。
怎么用 <video></video> 标签直接嵌入视频
不用“制作”，HTML5 本身不负责剪辑或转码，它只负责播放。你真正要做的，是把已有的视频文件（比如 MP4）用 <video></video> 标签正确加载出来。
常见错误是直接丢个本地路径进去，结果点开空白、没声音、或者报 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或BaselineProfile，不能是High 10；音频采样率建议 44.1kHz 或 48kHz，位深 16bit - 移动端特别注意：iOS Safari 不支持自播放带声音的视频，必须加
muted才能自动播放
autoplay 和 muted 必须一起用吗
是的，现代浏览器强制要求。单独写 autoplay 会被静音拦截，甚至直接不触发播放。
- 想自动播放且有声？不行。除非用户已与页面交互过（比如点过按钮），才能后续调用
play() -
autoplay muted是唯一稳妥的自动播放组合，适用于背景视频、开屏动效等场景 - 别信“加了
playsinline就能 iOS 自动有声”——iOS 仍会强制静音，且playsinline只影响是否全屏，不改声音策略
怎么让视频在手机上正常撑满宽度
默认 <video></video> 在移动端会按原始宽高比渲染，左右留黑边很常见。这不是 bug，是浏览器对 width/height 属性的保守处理。
- 用 CSS 覆盖更可靠：
video { width: 100%; height: auto; }，但要注意父容器不能有固定高度限制 - 如果想裁剪适配（比如封面图效果），得加
object-fit: cover，否则用contain会留白 - 避免设
height: 100%—— 它依赖父级高度，而<video></video>默认是 inline 元素，父级高度常为 0
容易被忽略的是：某些安卓 WebView（尤其旧版）不支持 object-fit，得用 position: absolute + transform: scale() 回退方案，但优先测真机。
