video标签在现代浏览器中已全支持，但需注意：autoplay必须配合muted才能生效，否则被拦截；src适用于单格式内网环境，公网必须用提供mp4/webm等多格式fallback；width/height是防布局抖动的锚点而非缩放工具；poster和正确mime类型不可或缺。
video 标签在现代浏览器中已无兼容性障碍（IE9+、Chrome、Firefox、Safari 17.4+、Edge 全支持），但直接写 <video src="xxx.mp4" controls></video> 很容易踩坑——不是播不出，就是自动播放被拦截、布局跳动、首屏加载慢或格式不兼容。
为什么加了 autoplay 却不自动播放
现代浏览器（Chrome 66+、Firefox 66+、Safari 17.4+）强制要求：含 autoplay 的 video 必须同时带 muted，否则静音策略会阻止播放。即使你手动调用 play()，也会抛出 NotAllowedError。
- 正确写法：
<video src="intro.mp4" autoplay muted loop></video> - 若需有声自动播放，必须由用户手势触发（如点击按钮后调用
play()） -
preload="auto"不等于自动播放，它只影响预加载行为；preload="metadata"更省流量，适合封面图+时长显示场景
src 和 <source></source> 到底该用哪个
单文件确定、格式无争议（比如仅用于内部管理后台且统一 Chrome 环境），用 src 简洁直接；但面向公众的页面，必须用 <source></source> 提供多格式 fallback，否则 Safari 可能拒播 WebM，Firefox 旧版本可能跳过 MP4。
- MP4（H.264 + AAC）是保底首选，全平台支持
- WebM（VP9 + Opus）体积更小、压缩率高，Chrome/Firefox/Edge 原生支持，Safari 自 17.4 起支持 VP9
- OGG（Theora）已基本淘汰，无需再配
- 服务器必须返回正确的 MIME 类型，例如
video/mp4，否则 Safari 会静默失败
width 和 height 不是缩放工具，而是布局锚点
这两个属性唯一作用是告诉浏览器“这个视频容器初始占多大空间”，防止页面加载时因尺寸未定导致布局抖动（layout shift）。它们不改变视频原始分辨率，也不压缩文件体积。
- 推荐显式设置：
width="640" height="360"，哪怕实际用 CSS 覆盖，也能预留空间 - 只设
width会按原始宽高比自动推算height，安全；但只设height不会反推width，结果不可控 - 切勿靠
width="320"强行把 4K 视频压成小图——用户仍要下载完整文件。真要小尺寸，先用 FFmpeg 或 HandBrake 压缩源文件
poster 和 controls 是用户体验分水岭
poster 是视频第一帧未加载完成前的占位图，不是可有可无的装饰。缺失时，iOS Safari 会显示黑块，部分安卓 WebView 显示空白，用户无法判断内容是否存在。
-
poster图片建议与视频关键帧一致，尺寸匹配容器宽高比，避免拉伸 -
controls开启后，各浏览器控件样式不一致，但功能完备；若关闭，必须用 JS 实现播放/暂停/进度条等，且要处理移动端 touch 事件兼容 - 移动端注意：
controlslist="nodownload nofullscreen"可隐藏下载和全屏按钮（Chrome/Edge 支持，Safari 不支持该属性）
最常被忽略的是服务器配置——video/mp4 文件若被 Nginx/Apache 错误返回 text/plain，Safari 直接拒绝解析；还有人把 poster 路径写错却只在本地测试，上线后才发现黑屏。这些都不是代码问题，而是部署链路上的断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
