video标签合法子元素仅有<source>、<track>和fallback纯文本；<source>须按格式兼容优先级排列且type属性必须准确；<track>需设kind、src、srclang；fallback文本在不支持或所有source失败时显示。
video 标签里能嵌套哪些元素？
只有 <source>、<track> 和纯文本（fallback content）是合法子元素，其他任何标签（比如 <div>、<span>、甚至 <img>）都会被浏览器忽略或导致解析异常。
常见错误是把控制按钮、封面图容器或加载提示塞进 <video> 里面——这些必须放在外部，用 CSS 定位或 JS 动态插入，不能作为子节点。
-
<source>必须在<video>开始标签之后、其他内容之前，顺序影响格式选择优先级 -
<track>用于字幕/描述，需设置kind、src、srclang，否则无效 - fallback 文本（如“您的浏览器不支持 video 标签”）只在不支持该元素或所有
<source>都失败时显示
为什么 必须写在 video 内部而不是用 src 属性？
单靠 src 属性只能指定一个视频源，而不同浏览器对编码格式的支持差异很大。比如 Safari 基本不支持 video/webm，IE9+ 只认 video/mp4；靠 <source> 列出多个选项，浏览器会按顺序尝试，选第一个能解码的。
如果同时写了 src 属性和 <source> 子元素，浏览器会忽略 src，只处理 <source> ——这是规范行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- MP4（H.264 + AAC）覆盖最广，建议放第一个
- WebM（VP9 + Opus）体积小、开源，适合 Chrome/Firefox
- Ogg（Theora + Vorbis）已基本淘汰，可省略
- 每个
<source>必须带type属性，否则浏览器要发起额外请求才能判断格式
poster 图片和 preload 的配合逻辑
poster 是静态封面，在视频元数据加载完成前显示；preload 控制元数据加载时机，两者协同但不等价。设 preload="none" 时，poster 仍会显示，但点击播放后才开始加载视频——这能减少首屏流量，但用户首次交互延迟变高。
-
preload="metadata"是平衡点：只加载时长、宽高、第一帧，poster可立即渲染，用户点击后秒开 -
preload="auto"在移动端常被忽略（尤其 iOS），即使写了也可能不预加载 - 如果没设
poster，且preload="none"或视频尚未加载，播放器区域就是空白或黑块
autoplay 和 muted 的强制绑定关系
现代浏览器（Chrome 66+、Safari 11+、Firefox 70+）几乎全部要求 autoplay 必须搭配 muted 才能生效，否则静音状态下也不触发自动播放。单独写 autoplay 等同于无效。
- 正确写法是：
<video autoplay muted controls> - 如果需要自动播放并有声，必须由用户手势（如 click/tap）触发
play()方法 - iOS Safari 还额外要求
playsinline，否则会在全屏播放器中打开 - 即使满足所有条件，部分 Android 浏览器仍可能拦截，不能当作可靠交互起点
<video controls width="640" height="360" poster="cover.jpg" preload="metadata"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <track kind="subtitles" srclang="zh" label="中文" src="sub.vtt" default> 您的浏览器不支持 video 标签。 </video>真正容易被忽略的是：所有
<source> 的 type 值必须与服务器返回的 MIME 类型严格一致，哪怕多一个空格或大小写错误，浏览器就当它不存在。 
