如何用占位图片实现Hero Video延迟加载，DOM加载后再加载视频？

首先纠正你代码里的一个错误：poster属性必须指定图片文件（如JPG/PNG），而不是视频文件。原代码里你把my_hero.mp4填进了poster，这完全起不到占位的作用。

基础实现：正确使用poster占位图 #

先修改HTML，把poster换成视频的封面图片，同时调整预加载策略减少初始负载：

<body class="d-flex static_pages-index flex-column">
  <div class="w-100 flex-shrink-0">
    <header>
      <!-- 替换poster为实际图片路径，比如从视频截取的封面图 -->
      <video autoplay loop muted playsinline poster="my_hero_poster.jpg" preload="metadata">
        <source src="my_hero.mp4" type="video/mp4">
      </video>
      <nav class="navbar navbar-expand-lg pb-2 navbar-dark">
      </nav>
    </header>
    <div class="container-fluid">
      <div id="promo"></div>
    </div>
  </div>
  <footer class="footer mt-auto pb-5 pt-4 bg-dark">
    <div class="container">
    </div>
  </footer>
</body>

关键改动说明：

• poster="my_hero_poster.jpg"：浏览器会优先加载这张轻量图片，在视频缓冲完成前显示它，避免页面顶部空白
• preload="metadata"：告诉浏览器只加载视频元数据（时长、分辨率等），不提前下载整个视频，减少初始页面的加载压力，视频会在需要播放时才开始缓冲

进阶优化：延迟加载视频源（彻底避免阻塞页面） #

如果视频文件确实偏大，还可以通过JavaScript延迟加载视频源，等页面其他内容加载完成后再请求视频文件：

<body class="d-flex static_pages-index flex-column">
  <div class="w-100 flex-shrink-0">
    <header>
      <!-- 先通过data-src存储视频路径，不直接设置src -->
      <video autoplay loop muted playsinline poster="my_hero_poster.jpg" preload="none">
        <source data-src="my_hero.mp4" type="video/mp4">
      </video>
      <nav class="navbar navbar-expand-lg pb-2 navbar-dark">
      </nav>
    </header>
    <div class="container-fluid">
      <div id="promo"></div>
    </div>
  </div>
  <footer class="footer mt-auto pb-5 pt-4 bg-dark">
    <div class="container">
    </div>
  </footer>

  <script>
    // 页面所有资源加载完成后，再触发视频加载
    window.addEventListener('load', function() {
      const video = document.querySelector('video');
      const source = video.querySelector('source');
      // 把data-src的值赋给src，启动视频加载
      source.src = source.dataset.src;
      video.load();
    });
  </script>
</body>

这个方案的优势：

• 页面初始化时不会请求视频文件，只加载占位图和其他内容，大幅提升首屏加载速度
• 页面完全加载完成后再加载视频，此时用户已经能看到页面内容，不会感知到视频加载的延迟

额外提示 #

• 占位图要尽量压缩，控制在几十KB以内，确保快速加载
• 占位图尺寸要和视频一致，避免显示变形
• 保留muted和playsinline属性：这是现代浏览器允许视频自动播放的必要条件（多数浏览器禁止自动播放带声音的视频）

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