如何实现响应式视频预加载器并自动切换页面内容-html教程-PHP中文网

如何实现响应式视频预加载器并自动切换页面内容

本文详解如何让 mp4 视频预加载器在任意屏幕尺寸下保持全屏自适应，并在播放完毕后无缝显示主页面内容（如 header），解决常见布局错位与 dom 显示异常问题。

本文详解如何让 mp4 视频预加载器在任意屏幕尺寸下保持全屏自适应，并在播放完毕后无缝显示主页面内容（如 header），解决常见布局错位与 dom 显示异常问题。

在构建现代网页时，使用视频作为首屏预加载器（preloader）能显著提升用户体验和品牌表现力。但实践中常遇到两大痛点：视频无法随视口缩放而自适应（非响应式），以及视频播放结束后主内容（如

）未正确显示

。根本原因在于 CSS 布局约束不当与 JavaScript 事件监听不完整。下面将提供一套经过验证的、生产就绪的解决方案。

✅ 核心修复点解析

1. 让视频真正响应式：关键在 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: cover 是响应式视频的黄金属性——它类似背景图的 background-size: cover，确保视频始终填满容器且不失真。

2. 确保主内容在预加载器隐藏后立即可见

原逻辑仅监听 ended 事件，但若视频设置了 loop（循环播放），该事件永远不会触发！而示例代码中

极简智能王

一款集合AI聊天、绘画、写作、翻译和编程等能力的综合型AI助手，帮助用户处理多种日常学习与工作任务。

下载

✅ 正确策略：移除 loop 属性，改用单次播放 + ended 监听；或若需循环预览效果，则改用 timeupdate + currentTime 判断临界点。推荐前者，更简洁可靠：

<!-- 移除 loop，确保视频只播一遍 -->
<video autoplay muted id="preloader-video"><source src="preloader.mp4" type="video/mp4">
  Your browser does not support the video tag.
</source></video>

对应 JS 保持不变，但语义更清晰：

// script.js
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.display = "none";
      // 可选：恢复 body 滚动（若之前禁用）
      document.body.style.overflow = "";
    });
  }
});

3. 补充健壮性优化

移除 body { overflow: hidden } —— 它虽防止滚动，但可能干扰后续交互；建议在 preloader 显示时动态控制：
```
preloader.style.display = "flex"; // 显示时禁用滚动
document.body.style.overflow = "hidden";
```
为
添加基础样式（如居中、背景色），避免因预加载器 z-index: 9999 导致其被意外压在底层（尽管默认文档流已足够）。

? 完整可运行示例（精简版）

<!-- index.html -->



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Video Preloader</title><link rel="stylesheet" href="styles.css"><div id="preloader-container">
    <video autoplay muted id="preloader-video"><source src="preloader.mp4" type="video/mp4"></source>
      Your browser does not support video.
    </video>
</div>

  <header style="text-align:center; padding:2rem; background:#2c3e50; color:white;">
    ✅ Main Content Loaded!
  </header><script src="script.js"></script>

/* styles.css */
* { margin: 0; padding: 0; box-sizing: border-box; }

#preloader-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#preloader-container video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}