网页Preloader中MP4视频不响应及播放后不显示内容问题

问题背景 #

我要在网页预加载器里嵌入MP4视频，碰到两个问题：

• 视频无法实现响应式适配：单独打开视频文件时能随屏幕缩放占满空间，但嵌入网页后这个特性失效
• 视频播放结束后，header等页面后续内容无法显示

需求：页面加载时优先播放视频，播放完成后自动显示其他页面内容，同时视频需保持原有的响应式缩放特性。

修正后的完整代码 #

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Page Title</title>
</head>
<body>
  <!-- Preloader Container -->
  <div id="preloader-container">
    <video autoplay muted id="preloader-video">
      <source src="preloader.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

  <header>Hello World</header>

  <script src="script.js"></script>
</body>
</html>

styles.css

/* styles.css */
body {
  margin: 0;
  overflow: hidden; /* 预加载阶段禁止页面滚动 */
}

#preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* 预加载器背景色 */
  z-index: 9999; /* 确保预加载器在最上层 */
}

#preloader-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，同时完全覆盖容器 */
}

/* 预加载完成后恢复页面滚动 */
body.preloader-hidden {
  overflow: auto;
}

script.js

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

  if (preloaderVideo) {
    // 重置视频到开头
    preloaderVideo.currentTime = 0;

    // 视频播放结束后隐藏预加载器并恢复页面滚动
    preloaderVideo.addEventListener("ended", function() {
      preloaderContainer.style.display = "none";
      body.classList.add("preloader-hidden");
    });

    // 确保视频加载完成后再播放，避免加载延迟导致ended事件不触发
    preloaderVideo.addEventListener("loadeddata", function() {
      this.play();
    });
  }
});

关键修改说明 #

1. 响应式失效修复

• 移除了#preloader-container的flex布局，给视频设置position: absolute; top: 0; left: 0;，让视频可以完全填充整个视口容器，配合object-fit: cover属性，既能保持视频的原始比例，又能随屏幕尺寸自适应缩放并占满空间。

2. 后续内容不显示修复

• 移除视频的loop属性：原代码中视频设置了loop，会导致视频无限循环，ended事件永远不会触发，预加载器一直处于显示状态，遮挡后续内容。
• 恢复页面滚动：原代码中body的overflow: hidden是全局设置，即使预加载器隐藏，页面仍无法滚动。新增body.preloader-hidden类，在视频播放完成后添加该类，恢复页面滚动功能。
• 添加loadeddata事件监听：确保视频加载完成后再开始播放，避免因视频加载过慢导致ended事件无法触发的情况。

内容的提问来源于stack exchange，提问作者Iram Imran