本文详解如何让 mp4 视频预加载器在任意屏幕尺寸下保持全屏自适应，并在播放完毕后无缝显示主页面内容（如 header），解决常见布局错位与 dom 显示异常问题。
本文详解如何让 mp4 视频预加载器在任意屏幕尺寸下保持全屏自适应，并在播放完毕后无缝显示主页面内容（如 header），解决常见布局错位与 dom 显示异常问题。
在构建现代网页时，使用视频作为首屏预加载器（preloader）能显著提升用户体验和品牌表现力。但实践中常遇到两大痛点：视频无法随视口缩放而自适应（非响应式），以及视频播放结束后主内容（如
✅ 核心修复点解析
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（循环播放），该事件永远不会触发！而示例代码中
✅ 正确策略：移除 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. </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 -->
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
</head>
<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="text-align:center; padding:2rem; background:#2c3e50; color:white;">
✅ Main Content Loaded!
</header>
<script src="script.js"></script>
</body>
</html>/* 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;
}⚠️ 注意事项与最佳实践
- 视频编码建议：使用 H.264 编码、MP4 容器，分辨率建议 1920×1080 或适配目标设备，文件大小控制在 2–5MB 内以保障快速加载。
- 移动端兼容性：iOS Safari 要求 muted + autoplay 才能静音自动播放；务必保留 muted 属性。
- 无障碍支持：若预加载视频含重要信息，应添加 aria-hidden="true" 并提供文字替代说明。
- 性能提示：对低性能设备，可监听 canplaythrough 事件再显示预加载器，避免空白闪烁。
通过以上调整，你的视频预加载器将真正实现跨设备响应式呈现，并在播放完成后干净利落地过渡到主页面内容——专业、稳定、无副作用。
