如何让预加载 MP4 视频全屏响应式播放并自动切换主内容-html教程-PHP中文网

如何让预加载 MP4 视频全屏响应式播放并自动切换主内容

本文详解如何实现 HTML 页面中预加载 MP4 视频的真正响应式布局（适配所有屏幕尺寸），并在视频播放完毕后无缝显示页面主体内容（如 header），解决常见 object-fit 失效、宽高拉伸变形及 DOM 切换失败等问题。

本文详解如何实现 html 页面中预加载 mp4 视频的真正响应式布局（适配所有屏幕尺寸），并在视频播放完毕后无缝显示页面主体内容（如 header），解决常见 `object-fit` 失效、宽高拉伸变形及 dom 切换失败等问题。

在构建现代网页首屏体验时，使用 MP4 视频作为预加载动画（preloader）已成为提升视觉吸引力的常用方案。但许多开发者会遇到两个典型问题：视频无法随视口缩放保持比例（非响应式），以及视频结束后主内容（如

）未正确显示

。根本原因在于 CSS 尺寸控制逻辑错误与 JavaScript 事件监听不完善。下面将从样式、结构、脚本三方面系统解决。

✅ 正确的响应式视频样式关键点

原代码中将 video 元素设为 width: 100%; height: 100%，这会导致视频强行拉伸填充容器，破坏原始宽高比。正确做法是：

width: 100% 保证水平铺满；
height: auto 让浏览器按固有宽高比自动计算高度；
max-height: 100% 防止在窄高屏幕（如竖屏手机）中溢出；
object-fit: cover 确保视频始终覆盖整个容器且不畸变（裁切多余部分）；
移除 body { overflow: hidden } —— 它可能干扰后续内容渲染，响应式应由容器自身控制。

/* styles.css */
#preloader-container video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
  display: block; /* 避免底部默认间隙 */
}

⚠️ 注意：

✅ 确保主内容在视频结束后正确呈现

原 JS 仅监听 ended 事件隐藏预加载容器，但存在两个隐患：

讯飞听见会议

讯飞听见会议是一款由科大讯飞推出的 AI 云视频会议与语音转写协作平台。

下载

若视频因网络延迟未加载完成，ended 可能永不触发；
loop 属性会使视频循环播放，导致 ended 永远不会发生。

✅ 修正方案：移除 loop 属性（预加载只需播放一次），并增加 canplaythrough 容错处理，同时确保 header 默认可见（无需额外显式 display: block）：

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const video = document.getElementById("preloader-video");
  const preloader = document.getElementById("preloader-container");

  if (!video || !preloader) return;

  // 重置播放位置（兼容刷新）
  video.currentTime = 0;

  // 方案1：视频自然结束 → 隐藏预加载器
  video.addEventListener("ended", () => {
    preloader.style.display = "none";
  });

  // 方案2（容错）：若因异常未触发 ended，5秒后强制隐藏
  setTimeout(() => {
    if (preloader.style.display !== "none") {
      preloader.style.display = "none";
    }
  }, 5000);
});

同时，HTML 中需移除

<video autoplay muted id="preloader-video"><source src="preloader.mp4" type="video/mp4">
  Your browser does not support the video tag.
</source></video>

✅ 完整可运行示例结构

<!-- 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="position: relative; z-index: 1;"><h1>Hello World</h1>
  </header><script src="script.js"></script>