直接用<video>标签插入视频，最小可用结构只需<video>标签和有效src地址；支持多格式需用<source>子标签并写明type属性；路径错误、编码不支持或MIME类型不对是常见失败原因。
直接用 <video> 标签就行，不用“嵌套”这种说法
很多人搜“嵌套视频”，其实是误用了术语——HTML 里视频不是靠“嵌套”进页面的，而是用 <video> 标签**直接插入**。它本身就是一个独立的多媒体元素，支持 src、controls、autoplay 等属性，浏览器原生解析，不需要额外 JS 或 iframe（除非你非要套 YouTube）。
常见误区是试图把视频像 div 一样层层包裹，结果加了多余 <div><video></video></div> 还以为“嵌套成功”，其实只是多套了一层容器，对播放毫无影响。
<video> 最小可用写法和必填项
能播起来的最简结构只有两样：标签本身 + 一个有效的 src 地址。其他都是可选增强。
-
src必须是同源或允许跨域的本地路径（如./videos/demo.mp4）或绝对 URL - 不加
controls属性，视频就黑屏无声，连播放按钮都没有 - 如果只写了
autoplay但没加muted，Chrome/Firefox 会静音且可能拒绝自动播放（尤其移动端） - 推荐至少带上
controls和preload="metadata"，兼顾可操作性与加载效率
示例：
立即学习“前端免费学习笔记（深入）”；
<video src="./myclip.mp4" controls preload="metadata" width="640" height="360"> 您的浏览器不支持 video 标签。 </video>
多个格式兼容：别只放 MP4，用 <source> 切换
MP4（H.264）虽通用，但 Safari 对 WebM 支持更好，Firefox 对 OGV 更友好。单靠 src 无法 fallback，必须用 <source> 子标签按顺序尝试。
- 浏览器从上到下读
<source>，第一个能解码的就用，其余忽略 -
type属性强烈建议写上，如type="video/mp4"，否则浏览器要下载部分文件头才能判断，拖慢首帧 - 本地开发时注意 MIME 类型是否被服务器正确返回（Apache/Nginx 默认通常 OK；VS Code Live Server 也支持）
示例：
立即学习“前端免费学习笔记（深入）”；
<video controls> <source src="clip.webm" type="video/webm"> <source src="clip.mp4" type="video/mp4"> 您的浏览器不支持该视频格式。 </video>
自托管 vs 第三方链接：路径错一个斜杠就 404
新手最常卡在路径问题：视频明明放在项目文件夹里，却一直显示“无法加载”。根本原因几乎全是相对路径写错。
-
./videos/abc.mp4表示“当前 HTML 所在目录下的 videos 文件夹” -
../assets/abc.mp4表示“上一级目录里的 assets 文件夹” - 浏览器控制台 Network 标签页里看
abc.mp4请求状态：404 就是路径错，200 但没画面可能是编码不支持或 CORS 限制 - 用 VS Code 打开文件树，右键视频文件 → “Copy Relative Path”，粘贴进
src，比手敲可靠得多
顺带一提：不要直接用百度网盘、迅雷离线等外链，它们返回的不是真实视频流，而是 HTML 页面，<video> 会直接失败。
真正麻烦的从来不是标签怎么写，而是视频编码参数是否被目标浏览器支持、路径是否拼对、服务端是否返回了正确的 Content-Type。这些地方一卡，整个视频就停在加载图标上不动——比写错标签难排查多了。
