必须用<video>标签叠加并设pointer-events: none透传点击，配合position: absolute/inset: 0、object-fit: cover、z-index层级控制及autoplay muted loop playsinline等属性确保正常播放与交互。
background-image 不支持视频，硬写 background: url(video.mp4) 会被浏览器静默忽略——按钮背景不能直接用视频。
必须用 <video> 标签叠加在按钮上，再通过 CSS 层级和透明控制实现“视频背景”效果。
<video> 叠加在按钮上时，怎么避免遮挡点击？
按钮是交互元素，<video> 默认会拦截鼠标事件，导致按钮点不动：
- 必须给
<video>加pointer-events: none，让它“透传”点击 - 视频父容器需设
position: relative，按钮自身设position: relative+z-index: 2 - 视频元素用
position: absolute+inset: 0贴满父容器，再加z-index: 1 - 别用
width: 100%; height: 100%做尺寸控制，它依赖父容器有明确宽高；按钮若无显式width/height或padding，视频会塌陷
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="btn-video-wrapper">
<video autoplay muted loop playsinline poster="btn-poster.jpg">
<source src="btn-bg.mp4" type="video/mp4">
</video>
<button type="button">点击我</button>
</div>按钮尺寸变化时，视频怎么始终居中且不拉伸？
object-fit: cover 是唯一可靠方案：
-
cover等比缩放并裁剪，填满整个按钮区域，焦点区域居中（默认） - 别用
fill（强制拉伸变形）、contain（留白难看）、none（只显示左上角） - 若按钮是圆角矩形，加
border-radius: inherit到<video>上，否则圆角会被视频内容撑破 -
object-position: center可省略（默认就是居中），但若视频主体偏左/偏上，可手动调如object-position: 30% 50%
移动端点不动、iOS黑屏、安卓跳全屏？关键属性漏了哪些？
不是所有设备都允许视频自动播放，尤其嵌套在按钮里更敏感：
-
autoplay和muted必须同时出现在 HTML 标签里，JS 后续赋值无效 - iOS Safari 必须加
playsinline+webkit-playsinline，否则点按钮瞬间跳全屏 - 安卓部分 WebView 对
playsinline支持差，建议加webkit-playsinline="true"属性（字符串值） - 如果按钮首次点击才触发播放，得用 JS 调
video.play()，且必须在用户手势回调里执行（click/touchstart）
常见错误写法：
-
<video muted>（缺autoplay，不会播） -
<video autoplay>（缺muted，iOS/Chrome 直接拒绝） -
<video autoplay muted playsinline>（漏loop，播完就停，按钮“动效”中断）
视频文件和加载策略怎么选，才不拖慢按钮响应？
按钮区域小，但视频仍可能卡顿或延迟渲染：
- 分辨率控制在 640×360 内，码率压到 800–1200 kbps，用 FFmpeg 加
-crf 28 -preset fast -
preload="metadata"比"auto"更稳妥，避免首帧前加载整段视频 - 不要用
loading="lazy"——<video>不支持该属性 - 提供 MP4（H.264）为主，WebM 为辅；但按钮场景下 WebM 几乎没必要，MP4 兼容性已覆盖全部主流环境
-
poster图必须提供，且尺寸与按钮一致（如 200×60px），否则加载中显示模糊或错位
按钮视频本质是“微型背景视频”，复杂度和风险都比页面级背景更高：它更易被 DOM 重排打断、更依赖精准的层叠控制、更容易因尺寸计算误差导致裁剪异常。别为了动效牺牲可访问性和首帧响应。
