根本原因是视频原始宽高比与屏幕不一致，浏览器默认等比缩放留黑边；解决需用object-fit: cover配合position: absolute、父容器overflow: hidden及居中变换，并注意autoplay/muted、pointer-events、preload策略、playsinline及用户手势触发播放等约束。
为什么video设了width: 100vw; height: 100vh;还是留黑边？
根本原因是视频原始宽高比和屏幕不一致，浏览器默认按比例缩放，宁可留空隙也不拉伸变形。直接写object-fit: cover;能解决，但必须配合position: absolute;和父容器overflow: hidden;——否则超出部分会溢出、滚动条或遮挡其他元素。
- 父容器（比如
<div class="hero">）必须设<code>position: relative;且overflow: hidden; -
video自身要设position: absolute;、top: 50%; left: 50%; transform: translate(-50%, -50%);居中，再加min-width: 100%; min-height: 100%; object-fit: cover; - 别忘了
autoplay和muted——现代浏览器强制要求静音才能自动播放，否则video卡在首帧不动 - 给
video加pointer-events: none;，确保它不拦截任何操作 - 文字/按钮等覆盖层必须放在
video同级、且z-index更高（比如z-index: 10;），不能嵌套在video内部 - 如果要用
poster图做加载占位，记得poster属性只在未播放时生效；加载失败时它不会 fallback，得靠 JS 监听error事件手动替换 -
preload="none"最省流量，但用户滚动到视频区域时会有明显延迟 -
preload="metadata"平衡较好：足够支撑object-fit计算、显示poster，又不预载画面帧 - 务必加
playsinline（iOS Safari必需）和webkit-playsinline，否则全屏控件会弹出、破坏沉浸感 - 监听
document的touchstart或click（注意：click在 iOS 上有 300ms 延迟，优先用touchstart） - 在回调里调用
video.play().catch(e => console.warn("Autoplay prevented:", e));，捕获拒绝错误但不中断流程 - 别在
window.onload或DOMContentLoaded里直接play()——此时无用户手势上下文，必失败
如何让背景视频不抢焦点、不影响页面交互？
默认video会捕获鼠标事件（比如滚轮误触发快进），还会挡住下方按钮或链接。关键不是用pointer-events: none;一招鲜——它会让整个视频层完全“透明”，但若你后面还叠加了文字或CTA按钮，这些元素又需要点击，就得精细控制层级。
preload="auto"真能加快首屏视频加载吗？
不一定，尤其在移动端或弱网下，preload="auto"可能提前下载大量数据却没播完，反而拖慢首屏渲染。更稳妥的做法是设preload="metadata"——只加载时长、尺寸等元信息，等canplaythrough事件触发后再真正开始播放。
移动端视频自动播放被禁用怎么办？
这是硬性限制，不是 bug。iOS 和 Android Chrome 都要求用户至少一次交互（如点击、触摸）后才能调用play()。纯靠 HTML 属性无法绕过，必须用 JS 拦截首次交互并主动触发播放。
立即学习“前端免费学习笔记（深入）”；
实际效果取决于视频编码（推荐 H.264 + MP4）、CDN 缓存策略和是否开启crossorigin（跨域视频需此属性才能触发canplaythrough）。黑边、卡顿、静音失效……往往不是代码写错，而是忽略了这些底层约束。
