video标签必须加muted和preload="metadata"，否则现代浏览器拒绝自动播放或导致首屏卡顿；应使用object-fit: cover替代transform缩放，避免gpu负担；移动端需降级为webp静态图；须结合intersectionobserver和visibilitychange懒加载。
video标签必须加muted和preload="metadata"
不加muted，现代浏览器（Chrome、Safari、Edge）会直接拒绝自动播放，页面一打开就是黑屏；不设preload="metadata"，浏览器默认可能加载整段视频，首屏卡顿、流量暴涨。这两个属性不是“可选”，是硬性前提。
-
autoplay必须搭配muted，否则play()调用会抛出NotAllowedError错误 -
preload="metadata"只加载时长、宽高、关键帧等元数据，跳过视频帧解码，大幅缩短首帧渲染时间 - 绝对不要用
preload="auto"——尤其在移动端或弱网环境下，它等于主动触发全量下载
用object-fit: cover替代transform缩放
很多人习惯给video加transform: scale(1.2)来“填满”，但这会强制浏览器创建额外合成层，GPU负担陡增，低端安卓机或旧iPad直接掉帧。正确做法是用object-fit原生控制裁剪行为。
-
object-fit: cover保持宽高比并铺满容器，多余部分裁剪——适合背景场景 - 必须配合
width: 100%; height: 100%，且父容器需有明确尺寸（如position: fixed; top: 0; left: 0; width: 100vw; height: 100vh） - 避免同时设
opacity、filter或backdrop-filter，这些也会触发合成，叠加后更容易卡顿
移动端必须降级为静态图
iOS Safari 和多数安卓 WebView 对视频解码能力有限，即使静音+loop，也可能因内存不足中途崩溃，或触发系统级限频。靠JS检测UA再替换，不如用CSS媒体查询直接切。
- 用
@media (max-width: 768px), (max-device-width: 768px)直接隐藏video，显示background-image - 静态图推荐WebP格式，体积比JPEG小30%~50%，加载更快
- 别依赖JS判断
navigator.userAgent——有些WebView UA伪造严重，CSS方案更可靠、更早生效
懒加载要监听visibilitychange + IntersectionObserver
用户还没滚动到视频区域就播，纯属浪费CPU、内存和电量。尤其当页面有多个视频模块时，必须按需激活。
- 初始状态设
poster占位，src为空，autoplay不写死在HTML里 - 用
IntersectionObserver监听是否进入视口，进入后再赋值src并调用play() - 监听
document.visibilityState：切到其他标签页时pause()，切回再play()，防止后台持续解码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
