直接给 video 加 opacity 淡入会闪烁，因 gpu 合成策略切换导致图层重绘抖动或首帧黑屏；正确做法是用同尺寸遮罩层控制 opacity，video 本身保持不透明并预加载。
为什么直接给 video 加 opacity 淡入会闪烁
因为浏览器对 video 元素的硬件加速渲染和合成层处理很敏感。直接在 video 上用 opacity 动画，尤其配合 object-fit: cover 时，容易触发图层重绘抖动或首帧黑屏闪一下——这不是 bug，是 GPU 合成策略切换导致的视觉残留。
正确做法是把 video 当作底层内容，用一个同尺寸的 div 覆盖其上，控制这个遮罩层的 opacity 来实现“视觉淡入”效果，而 video 本身保持不透明、持续播放。
- 确保
video设置preload="auto"和autoplay（必要时加muted）以减少加载空白期 - 用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;确保全屏定位，避免滚动偏移 -
object-fit: cover必须搭配width: 100%; height: 100%;才生效，否则可能拉伸或留白
如何让 object-fit: cover 在全屏下真正“居中裁切”
object-fit: cover 本身不控制对齐方式，默认按 object-position: center center，但很多场景下视频关键区域（比如人脸）会被意外裁掉——这是因为原始宽高比和视口比例差异太大，且没有显式声明对齐基准。
解决方法是显式设置 object-position，并用媒体查询适配横竖屏：
video {
object-fit: cover;
object-position: center center; /* 可改为 top, bottom, 50% 20% 等 */
width: 100%;
height: 100%;
}
<p>@media (orientation: portrait) {
video {
object-position: center 30%; /<em> 竖屏时上移焦点区域 </em>/
}
}</p>
- 不要依赖父容器的
text-align或flex对齐来控制video内容位置——object-position才是唯一有效手段 - 若视频源是横向拍摄但要在手机竖屏展示，
object-position: center 10%比默认值更能保留头部信息 -
object-fit在 Safari 旧版本（iOS 12.5 之前）有兼容问题，需加-webkit-object-fit: cover;
淡入动画必须用 transition 还是 @keyframes
用 transition 更稳妥。因为 @keyframes 定义的动画在 video 加载完成前就可能开始，导致从透明跳到不透明的突兀感；而 transition 可绑定在 JS 控制的 class 切换上，确保只在 canplaythrough 事件后触发。
示例结构：
<div class="video-container"> <video muted autoplay playsinline></video><div class="fade-overlay"></div> </div>
CSS 中：
.fade-overlay {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: #000;
opacity: 1;
transition: opacity 1.2s ease-out;
}
<p>.video-container.loaded .fade-overlay {
opacity: 0;
}</p>
- JS 监听
video.canplaythrough后给.video-container加loaded类，触发过渡 - 避免对
video本身设transition: opacity，哪怕只是临时测试——它会在某些 Android WebView 中卡住首帧 - 时间设为
1.2s是权衡：太短（2s）让用户误以为没加载成功
移动端自动播放失败时的降级处理
iOS 和部分 Android 浏览器强制要求用户手势触发播放，autoplay 会静音失败，此时 canplaythrough 可能永不触发，淡入永远卡在黑色遮罩上。
必须加 fallback 逻辑：
- 设置
video的poster属性为第一帧截图，确保未播放时显示静态封面 - 监听
video.error和超时（如 3s 后仍无playing事件），主动移除.loaded类并隐藏遮罩 - 对无法自动播放的设备，可改用
background-image降级为 GIF 或静态图，用@supports (animation-name: test)隔离 CSS 支持检测
最易忽略的一点：别在 video 外层用 overflow: hidden ——某些安卓机型会因此截断 object-fit 的渲染区域，导致右边/下边被意外裁掉一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
