接下来是 JavaScript 的逻辑优化。当视频播放完毕，不再简单粗暴地设置 display: none，推荐使用 opacity + transition 实现淡出，这样过渡更加平滑：

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.transition = "opacity 0.5s ease-out";
      preloader.style.opacity = "0";
      setTimeout(() => {
        preloader.style.display = "none";
      }, 500);
    });
    // 可选：处理加载失败时的兜底逻辑
    video.addEventListener("error", () => {
      console.warn("Preloader video failed to load — showing content immediately.");
      preloader.style.display = "none";
    });
  }
});

这里有一个细节：别忘了在 DOMContentLoaded 中重置 currentTime，否则用户刷新页面后视频可能从中间继续播放，体验不够干脆。

✅ 注意事项与增强建议

• 性能优先：预加载视频建议压缩至 ≤2MB，时长控制在 3–5 秒内，避免阻塞首屏渲染；
• 无障碍支持：为 添加 aria-hidden="true"，并确保 #preloader-container 不影响屏幕阅读器焦点流；
• 移动端兼容性：iOS Safari 对 autoplay muted 支持良好，但需确保 在 DOM 加载后才绑定事件（DOMContentLoaded 已满足）；
• 回退方案：可添加 GIF 或静态图片作为 .mp4 加载失败时的备用占位符；
• SEO 友好：预加载视频无需