用video标签需配合多个source、controls、muted（尤其autoplay时），并设置aspect-ratio和object-fit，否则手机变形、Safari静音失败、Firefox无法播放；单src因格式兼容性差大概率失效。
直接说结论：用 <video></video> 标签 + 多个 <source></source> + controls 和 muted（尤其带 autoplay 时），再加 aspect-ratio 和 object-fit 控制尺寸——否则在手机上拉伸变形、在 Safari 里静音失败、在 Firefox 里根本播不了。
为什么单写 src 属性大概率失效
浏览器对视频编码格式的支持差异极大：MP4（H.264+AAC）在 iOS/macOS 全兼容，但 Firefox 默认不认；WebM（VP9+Opus）在 Chrome/Firefox 播放更省资源，Safari 却长期不支持。只写一个 src="demo.mp4"，等于把所有用户赌在一种格式上。
- 必须用
<source></source>显式声明多个格式，浏览器按顺序取第一个canPlayType()返回非""的 -
type属性不能省或写错，比如video/mpeg会被跳过，必须是video/mp4、video/webm - 推荐顺序：
MP4 → WebM → OGG（后者仅需兜底老 Firefox）
autoplay 在 Chrome/Safari 里不响？检查这三件事
现代浏览器（Chrome 66+、Safari 11+、Edge 79+）默认拦截带声音的自动播放，控制台可能不报错，但 JS 调用 play() 会抛 NotAllowedError。
- 加
muted属性是硬性前提，autoplay muted才能触发静音自动播 - 如果必须带声自动播，得等用户真实点击（不是
setTimeout模拟）后，再调用video.play() -
preload="metadata"可减少首屏加载量，但不等于自动播；preload="none"更适合长视频或低带宽场景
怎么让视频在手机和桌面都保持 16:9 不拉伸
设 width="100%" 或 style="width: 100%" 会导致画面压扁，因为浏览器不会自动维持宽高比。
立即学习“前端免费学习笔记（深入）”；
- 现代方案：给
<video></video>加style="aspect-ratio: 16/9; width: 100%; object-fit: cover;" -
object-fit: cover适合封面/背景类视频（裁剪边缘保比例）；contain适合教学类（完整显示不裁剪） - 兼容旧版 Safari（padding-top: 56.25% + 绝对定位 fallback，但没必要为 2% 用户加整套 hack
表格里塞多个视频怎么对齐不打架
表格单元格默认 vertical-align: middle，而 <video></video> 是内联元素，基线对齐会导致上下错位；移动端还容易被强制缩成窄条。
<td> 加 <code>style="vertical-align: top;"统一对齐起点- 每个
<video></video>加style="display: block; margin: 0 auto; max-width: 100%; height: auto;" - 别用
width="100%"，它会强制拉伸；max-width: 100%才能自适应容器又不溢出
真正容易被忽略的是服务器 MIME 类型配置——哪怕 HTML 写得再标准，如果 Nginx/Apache 没把 .mp4 映射到 video/mp4，Firefox 就会拒绝加载该 <source></source>，且不提示任何错误。
