求助：尝试将视频片段用作WordPress预加载器但无法正常运行

1. 基础HTML结构 #

把视频预加载器放在页面最外层，确保优先渲染，内容容器默认隐藏：

<!-- 视频预加载器 -->
<div class="preloader">
  <video class="preloader-video" autoplay muted loop playsinline>
    <source src="your-preloader-video.mp4" type="video/mp4">
    <!-- 降级方案：视频不支持时显示图片 -->
    <img src="fallback-preloader.jpg" alt="预加载中">
  </video>
</div>

<!-- 页面内容容器 -->
<div class="content" style="display: none;">
  <!-- 你的页面内容 -->
</div>

2. CSS样式控制 #

确保预加载器全屏覆盖，视频自适应容器避免变形：

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000; /* 背景色匹配视频边缘，避免闪烁 */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，覆盖容器 */
}

.content {
  min-height: 100vh;
}

3. JS触发隐藏逻辑 #

根据需求选择触发时机：

时机1：页面所有资源加载完成后隐藏 #

window.addEventListener('load', function() {
  const preloader = document.querySelector('.preloader');
  const content = document.querySelector('.content');
  
  // 添加淡出动画（可选）
  preloader.style.opacity = '0';
  preloader.style.transition = 'opacity 0.5s ease';
  
  setTimeout(() => {
    preloader.style.display = 'none';
    content.style.display = 'block';
  }, 500);
});

时机2：视频播放完毕后隐藏 #

如果希望视频播完再显示内容：

const preloaderVideo = document.querySelector('.preloader-video');
const preloader = document.querySelector('.preloader');
const content = document.querySelector('.content');

preloaderVideo.addEventListener('ended', function() {
  preloader.style.opacity = '0';
  preloader.style.transition = 'opacity 0.5s ease';
  
  setTimeout(() => {
    preloader.style.display = 'none';
    content.style.display = 'block';
  }, 500);
});

常见问题排查 #

• 视频无法自动播放：必须添加muted属性，当前多数浏览器限制有声视频自动播放
• 视频显示变形：用object-fit: cover或contain调整适配方式
• 预加载器不消失：检查JS事件是否绑定成功，查看控制台报错信息
• 移动端兼容性：添加playsinline属性，避免视频自动进入全屏播放

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