本文详解如何修复预加载视频不响应、无法自动隐藏及后续内容不显示的问题，通过 CSS object-fit 与 height: auto 配合 JS 监听 ended 事件，实现全屏自适应播放 + 播放完毕后无缝展示主页面内容。
本文详解如何修复预加载视频不响应、无法自动隐藏及后续内容不显示的问题，通过 css `object-fit` 与 `height: auto` 配合 js 监听 `ended` 事件，实现全屏自适应播放 + 播放完毕后无缝展示主页面内容。
在构建现代网页时，使用视频作为预加载（preloader）能显著提升用户体验——但若视频无法随屏幕缩放自适应，或播放结束后主内容（如 <header>）仍被遮挡，则会适得其反。核心问题通常源于两个方面：CSS 布局未正确维持视频固有宽高比，以及JavaScript 未可靠触发预加载结束后的 DOM 切换逻辑。
✅ 正确的响应式视频样式关键点
原代码中将 video 的 height 设为 100%，强制拉伸导致变形；应改为：
#preloader-container video {
width: 100%;
height: auto; /* 让浏览器按原始宽高比计算高度 */
max-height: 100vh; /* 防止超出视口高度 */
object-fit: cover; /* 全屏覆盖且不畸变，裁剪多余部分 */
display: block; /* 移除默认内联元素的底部空白 */
}⚠️ 注意：object-fit: cover 要求父容器（#preloader-container）明确设置宽高（已用 100vw/100vh 实现），否则无效。同时务必移除 body { overflow: hidden } ——它虽防止滚动，但可能干扰移动端渲染或焦点行为，建议改用 #preloader-container { overflow: hidden } 局部控制。
✅ 可靠的内容切换逻辑
原 JS 仅监听 ended 事件，但存在隐患：
- 若视频因网络延迟未加载完成，ended 永不触发；
- 若视频设置了 loop（当前代码中存在），则永远不会触发 ended。
✅ 修正方案：
- 移除 loop 属性（预加载只需播放一次）；
- 增加 canplaythrough 事件确保可流畅播放后才开始计时；
- 使用 setTimeout 作为兜底机制（防极端异常）：
document.addEventListener("DOMContentLoaded", () => {
const video = document.getElementById("preloader-video");
if (!video) return;
video.currentTime = 0;
video.removeAttribute("loop"); // 关键：禁用循环
const hidePreloader = () => {
document.getElementById("preloader-container").style.display = "none";
};
// 主要触发：播放完成
video.addEventListener("ended", hidePreloader);
// 兜底触发：5秒后强制隐藏（假设视频最长5秒）
setTimeout(hidePreloader, 5000);
// 可选增强：确保视频就绪后再播放（避免黑屏）
video.addEventListener("canplaythrough", () => {
video.play().catch(e => console.warn("Auto-play prevented:", e));
});
});✅ 完整 HTML 结构建议
确保 <header> 等主内容不被 z-index 过高的预加载层永久遮挡，且默认可见：
<body>
<!-- 预加载层始终置顶 -->
<div id="preloader-container">
<video autoplay muted id="preloader-video">
<source src="preloader.mp4" type="video/mp4">
Your browser does not support video.
</video>
</div>
<!-- 主内容：默认显示，预加载结束时自然呈现 -->
<header style="position: relative; z-index: 1;">Hello World</header>
<!-- 其他内容... -->
</body>? 总结要点
- 响应式本质是“比例优先”：用 width: 100%; height: auto; object-fit: cover 替代固定宽高；
- loop 是预加载的大忌：必须移除，否则 ended 永不触发；
- 防御性编程不可少：ended + timeout 双保险，保障用户体验一致性；
- 避免全局 overflow: hidden：改用局部容器控制，兼顾可访问性与兼容性。
按此方案调整后，MP4 预加载视频将在所有设备上全屏自适应播放，并在播放完毕后精准、稳定地展示后续页面内容。
