如何让网页中的预加载 MP4 视频真正响应式并自动切换内容

本文详解如何修复 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> 自然浮现——兼顾视觉表现力与用户体验一致性。