如何在HTML+CSS网站中添加MP4文件作为预加载界面？已实现代码无法显示的问题求助

我来帮你梳理下这个视频预加载界面的问题，从你的代码来看，有几个关键细节需要调整，下面逐个说明：

1. jQuery选择器错误 #

你的JS代码里选择器少了类名前缀 .，导致无法正确选中预加载容器，加载完成后自然无法隐藏它。
错误代码：

$("loader-wrapper").fadeOut("slow");

修正后：

$(".loader-wrapper").fadeOut("slow");

2. 视频属性拼写错误 #

HTML5标准中，视频的内联播放属性是 playsinline（没有连字符），带连字符的 plays-inline 部分浏览器可能不识别，会影响视频的正常播放逻辑。
修正后的视频标签：

<video autoplay loop muted playsinline> 
  <source src="/HotelWebsite/src/assets/video/Stripes.mp4" type="video/mp4"> 
</video>

3. 容器与视频的样式缺失 #

当前的CSS没有设置视频的布局规则，视频默认不会铺满容器，看起来像是“无法显示”。同时用 position: fixed 代替 absolute 能确保预加载界面始终覆盖整个视口，不会随页面滚动移位。
修正后的CSS：

.loader-wrapper {
  width: 100%; 
  height: 100vh; /* 用视口高度确保占满屏幕 */
  position: fixed; 
  top: 0; 
  left: 0; 
  background-color: #000; /* 添加背景色，避免视频加载前的空白 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保容器在页面最上层 */
}

.loader-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例同时铺满容器 */
}

4. 视频路径验证 #

请检查浏览器控制台（按F12打开）是否有404错误，确认视频文件的路径是否正确：

• 如果你的HTML文件在项目根目录，那么 /HotelWebsite/src/assets/video/Stripes.mp4 是绝对路径，对应服务器根目录下的该位置；
• 如果是相对路径，需要去掉开头的 /，比如 HotelWebsite/src/assets/video/Stripes.mp4，具体根据你的项目文件结构调整。

额外排查建议 #

• 替换一个已知可用的MP4视频测试，排除视频文件本身损坏的可能；
• 部分浏览器对自动播放有严格限制，确保 muted 属性已添加（你已经加了，这点没问题）；
• 测试不同浏览器的兼容性，比如Chrome、Firefox，查看控制台是否有其他报错信息。

内容的提问来源于stack exchange，提问作者Dev.loads