利用HTML和CSS制作全屏背景视频（视觉冲击）-html教程-PHP中文网

根本原因是视频原始宽高比与屏幕不一致，浏览器默认等比缩放留黑边；解决需用object-fit: cover配合position: absolute、父容器overflow: hidden及居中变换，并注意autoplay/muted、pointer-events、preload策略、playsinline及用户手势触发播放等约束。

利用html和css制作全屏背景视频（视觉冲击）

为什么`video`设了`width: 100vw; height: 100vh;`还是留黑边？

根本原因是视频原始宽高比和屏幕不一致，浏览器默认按比例缩放，宁可留空隙也不拉伸变形。直接写object-fit: cover;能解决，但必须配合position: absolute;和父容器overflow: hidden;——否则超出部分会溢出、滚动条或遮挡其他元素。

父容器（比如）必须设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;一招鲜——它会让整个视频层完全“透明”，但若你后面还叠加了文字或CTA按钮，这些元素又需要点击，就得精细控制层级。

给video加pointer-events: none;，确保它不拦截任何操作
文字/按钮等覆盖层必须放在video同级、且z-index更高（比如z-index: 10;），不能嵌套在video内部
如果要用poster图做加载占位，记得poster属性只在未播放时生效；加载失败时它不会 fallback，得靠 JS 监听error事件手动替换


preload="auto"真能加快首屏视频加载吗？
不一定，尤其在移动端或弱网下，preload="auto"可能提前下载大量数据却没播完，反而拖慢首屏渲染。更稳妥的做法是设preload="metadata"——只加载时长、尺寸等元信息，等canplaythrough事件触发后再真正开始播放。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										


preload="none"最省流量，但用户滚动到视频区域时会有明显延迟

preload="metadata"平衡较好：足够支撑object-fit计算、显示poster，又不预载画面帧
务必加playsinline（iOS Safari必需）和webkit-playsinline，否则全屏控件会弹出、破坏沉浸感

移动端视频自动播放被禁用怎么办？
这是硬性限制，不是 bug。iOS 和 Android Chrome 都要求用户至少一次交互（如点击、触摸）后才能调用play()。纯靠 HTML 属性无法绕过，必须用 JS 拦截首次交互并主动触发播放。

监听document的touchstart或click（注意：click在 iOS 上有 300ms 延迟，优先用touchstart）
在回调里调用video.play().catch(e => console.warn("Autoplay prevented:", e));，捕获拒绝错误但不中断流程
别在window.onload或DOMContentLoaded里直接play()——此时无用户手势上下文，必失败

实际效果取决于视频编码（推荐 H.264 + MP4）、CDN 缓存策略和是否开启crossorigin（跨域视频需此属性才能触发canplaythrough）。黑边、卡顿、静音失效……往往不是代码写错，而是忽略了这些底层约束。