video加object-fit: cover仍留黑边，根本原因是video默认宽高比约束使父容器未铺满视口，须设固定定位父容器并清除body默认margin。
video元素加object-fit: cover后仍留黑边？
根本原因是video默认有宽高比约束，而object-fit: cover只控制裁剪方式，不改变容器尺寸逻辑。浏览器会先按video自身宽高比撑开父容器（比如body），再裁剪——如果父容器没强制铺满视口，黑边必然出现。
- 必须给
video的直接父容器设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能依赖body或html的高度继承 -
video自身要设width: 100%; height: 100%; object-fit: cover;，且去掉所有外边距和内边距（包括body默认的margin） - 移动端Safari对
object-fit支持良好，但iOS 12以下需加-webkit-object-fit: cover;
全屏视频在不同设备上拉伸变形怎么办？
变形不是object-fit的问题，而是视频源分辨率与视口比例严重不匹配时，cover被迫裁剪过多导致关键内容被切掉。这不是bug，是预期行为。
- 优先选横屏拍摄的视频（16:9 或 21:9），竖屏视频（9:16）在桌面端无论如何都会被大幅裁剪
- 若必须用竖屏素材，可改用
object-fit: contain+background-color填充背景色，但会留白 - 避免用
width: 100vw; height: 100vh;直接写在video上——这会破坏object-fit的计算基准，必须通过父容器控制尺寸
autoplay和muted在Chrome/Firefox里被阻止？
现代浏览器强制要求带声音的自动播放必须由用户手势触发，否则静音+自动播放是唯一合法组合。
- 必须同时加
autoplay、muted、playsinline三个属性：<video autoplay muted playsinline></video> - Firefox还要求
loop，否则可能只播一帧就暂停；Chrome 95+允许无loop但建议加上 - 不要依赖
video.play()在DOMContentLoaded里调用——没有用户交互上下文，会抛DOMException: play() failed because the user didn't interact with the document first.
性能和兼容性要注意什么？
全屏背景视频本质是持续解码+渲染，比图片消耗高得多，尤其低端安卓机容易卡顿或发热。
- 视频格式优先用
.mp4（H.264编码），.webm作为备选；避免.mov或未压缩AVI - 分辨率别超过1920×1080，手机端可单独提供720p版本，用
srcset或媒体查询切换source - IE11完全不支持
object-fit，如需兼容，得用transform: scale()+ 负margin模拟，但维护成本高，建议直接降级为背景图
最常被忽略的是video加载策略：不加preload="auto"可能导致首帧延迟，但加了又会提前占用带宽。折中方案是preload="metadata"，只加载头信息，等canplay事件再显式play()——不过这就绕不开用户交互限制了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
