本文详解如何修复 HTML 页面中预加载视频不响应、无法自动隐藏及后续内容不显示的问题，通过优化 CSS 的 object-fit 与尺寸控制、修正 JavaScript 的播放逻辑，实现全屏自适应视频预加载与平滑内容过渡。
本文详解如何修复 html 页面中预加载视频不响应、无法自动隐藏及后续内容不显示的问题，通过优化 css 的 `object-fit` 与尺寸控制、修正 javascript 的播放逻辑，实现全屏自适应视频预加载与平滑内容过渡。
要让预加载 MP4 视频在网页中既真正响应式（随视口缩放自动适配，保持宽高比），又能在播放完毕后无缝显示主内容（如 <header>），关键在于三处协同优化：HTML 结构语义清晰、CSS 精准控制尺寸与裁剪行为、JavaScript 可靠监听播放完成事件。
✅ 响应式视频的核心：width: 100% + height: auto + object-fit: cover
原始代码中 #preloader-container video { width: 100%; height: 100%; } 是问题根源——强制拉伸高度会破坏视频原始宽高比，导致变形或黑边。正确做法是：
#preloader-container video {
width: 100%;
height: auto; /* 让浏览器按原始比例自动计算高度 */
max-height: 100vh; /* 防止在极窄屏幕下高度溢出 */
object-fit: cover; /* 覆盖整个容器，居中裁剪多余部分（推荐） */
/* 可选：若需完整显示无裁剪，改用 object-fit: contain; */
}object-fit: cover 确保视频始终填满容器且不失真，是全屏预加载的黄金组合；而 height: auto 是响应式的基础，它让视频高度随宽度动态调整，避免硬编码导致的错位。
✅ 内容显示逻辑：移除 loop 并监听 ended，而非依赖 autoplay 循环
原代码中 <video autoplay muted loop> 的 loop 属性会导致视频无限循环，ended 事件永不触发，因此 <header> 永远被遮挡。必须移除 loop，确保视频仅播放一次：
<video autoplay muted id="preloader-video"> <source src="preloader.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
同时，JavaScript 应确保在视频结束时移除遮罩层（非仅 display: none，更推荐 opacity + transition 提升体验）：
document.addEventListener("DOMContentLoaded", () => {
const video = document.getElementById("preloader-video");
const preloader = document.getElementById("preloader-container");
if (video && preloader) {
// 重置时间点（兼容刷新）
video.currentTime = 0;
// 播放结束后隐藏预加载器
video.addEventListener("ended", () => {
preloader.style.transition = "opacity 0.5s ease-out";
preloader.style.opacity = "0";
setTimeout(() => {
preloader.style.display = "none";
}, 500);
});
// 可选：处理加载失败兜底
video.addEventListener("error", () => {
console.warn("Preloader video failed to load — showing content immediately.");
preloader.style.display = "none";
});
}
});✅ 注意事项与增强建议
- 性能优先：预加载视频建议压缩至 ≤2MB，时长控制在 3–5 秒内，避免阻塞首屏渲染；
- 无障碍支持：为 <video> 添加 aria-hidden="true"，并确保 #preloader-container 不影响屏幕阅读器焦点流；
- 移动端兼容性：iOS Safari 对 autoplay muted 支持良好，但需确保 <video> 在 DOM 加载后才绑定事件（DOMContentLoaded 已满足）；
- 回退方案：可添加 GIF 或静态图作为 .mp4 加载失败时的备用占位符；
- SEO 友好：预加载视频无需 <title> 或 <figcaption>，但建议在 <source> 后保留简洁的 alt 文本提示（通过 aria-label 实现）。
最终效果：页面加载即全屏播放高清 MP4，视频按设备尺寸智能缩放无变形，播放完毕后淡出，主 <header> 自然浮现——兼顾视觉表现力与用户体验一致性。
