本文详解如何修复预加载视频不响应、无法自动隐藏及后续内容不可见的问题，通过优化 CSS 的 height 和 object-fit 属性，并配合 JavaScript 精确控制播放生命周期，实现全屏自适应视频预加载与平滑过渡。
本文详解如何修复预加载视频不响应、无法自动隐藏及后续内容不可见的问题，通过优化 css 的 `height` 和 `object-fit` 属性，并配合 javascript 精确控制播放生命周期，实现全屏自适应视频预加载与平滑过渡。
在构建现代网页时，使用 MP4 视频作为页面预加载器（preloader）能显著提升用户体验，但常因布局失控和生命周期管理不当导致两大典型问题：视频非响应式缩放与主内容（如 <header>）无法正常显示。根本原因在于原始 CSS 中对 <video> 元素设置了 height: 100%，强制拉伸破坏了固有宽高比；同时 overflow: hidden 遮盖了后续 DOM 内容，而 ended 事件监听未覆盖首次加载完成场景。
✅ 正确的响应式视频预加载方案
1. CSS：用 height: auto + max-height 维持比例
将 .css 中的视频样式修正为：
#preloader-container video {
width: 100%;
height: auto; /* 关键：放弃固定高度，交由浏览器按比例计算 */
max-height: 100vh; /* 防止在窄高屏幕（如手机竖屏）中溢出 */
object-fit: cover; /* 覆盖容器，裁剪多余区域，避免变形 */
}⚠️ 注意：object-fit: cover 要求父容器（#preloader-container）明确尺寸（已通过 100vw/100vh 满足），否则无效。
2. HTML：移除干扰性全局样式
删除 body { overflow: hidden } —— 它会隐藏所有超出视口的内容（包括 <header>），即使预加载器被隐藏后，页面仍无法滚动或显示后续元素。仅需确保预加载器自身 z-index: 9999 即可覆盖内容，无需锁死整个 body。
3. JavaScript：增强健壮性（推荐升级版）
原始脚本仅监听 ended 事件，但若视频因网络延迟未加载完成，或用户刷新页面时视频已缓冲完毕，ended 可能不会触发。建议补充 canplaythrough 和播放状态校验：
document.addEventListener("DOMContentLoaded", () => {
const video = document.getElementById("preloader-video");
const preloader = document.getElementById("preloader-container");
if (!video || !preloader) return;
// 重置播放位置
video.currentTime = 0;
// 方案1：视频自然播完后隐藏
video.addEventListener("ended", () => {
preloader.style.display = "none";
});
// 方案2（兜底）：若视频已就绪且未播放，立即播放并监听
if (video.readyState >= video.HAVE_FUTURE_DATA) {
video.play().catch(e => console.warn("Auto-play prevented:", e));
}
// 方案3（超时保护）：5秒后强制隐藏，避免卡死
setTimeout(() => {
if (preloader.style.display !== "none") {
preloader.style.display = "none";
}
}, 5000);
});4. 验证与调试建议
- 使用 Chrome DevTools → Device Toolbar 模拟不同设备尺寸，观察视频是否始终填满容器且无黑边/拉伸；
- 在 <video> 标签中添加 controls 属性临时调试（上线前移除），确认视频本身可正常播放；
- 若视频首帧空白，可在 CSS 中为 #preloader-container 添加 background: #000，避免白屏闪烁。
通过以上三步协同优化，MP4 预加载器即可真正实现：
- ✅ 全设备响应式铺满（宽高自适应，保持原始比例）
- ✅ 播放结束后自动隐藏，无缝展示 <header> 等主体内容
- ✅ 兼容主流浏览器（Chrome/Firefox/Safari/Edge），支持静音自动播放策略
最终效果：用户打开页面即全屏沉浸式观看预加载视频，播放完毕后立即呈现完整网页结构，专业且零感知卡顿。
