HTML中如何仅加载适配视频？双视频媒体查询显示是否均加载？

嘿，你的怀疑完全正确！默认情况下，两个视频确实会被同时加载——CSS的display: none（或通过media query控制的显示隐藏）只是改变元素的视觉状态，并不会阻止浏览器解析HTML时请求对应的视频资源。哪怕移动端视频体积小，同时加载两个视频也会占用带宽，导致加载变慢。

下面给你几个解决这个问题的方案，按推荐程度排序：

1. 原生HTML5 Video + Source Media属性（最优方案） #

这是最简洁、原生支持的方式，浏览器会自动根据当前视口的媒体条件，只加载符合要求的视频资源：

<video controls>
  <!-- 移动端视频：视口宽度小于768px时加载 -->
  <source src="mobile-video.mp4" type="video/mp4" media="(max-width: 767px)">
  <!-- 桌面端视频：视口宽度大于等于768px时加载 -->
  <source src="desktop-video.mp4" type="video/mp4" media="(min-width: 768px)">
  你的浏览器不支持HTML5视频播放，请升级浏览器。
</video>

为什么好用？ #

• 无需额外JS代码，浏览器原生处理资源选择
• 窗口大小变化时，大部分现代浏览器会自动切换资源（部分旧浏览器可能需要刷新）
• 从根源避免不必要的资源请求，彻底解决加载慢的问题

2. JavaScript动态加载视频（灵活控制） #

如果你需要更自定义的逻辑（比如结合其他交互），可以用JS监听视口变化，动态设置视频的src：

<video controls id="adaptive-video"></video>

<script>
  function loadMatchingVideo() {
    const videoElement = document.getElementById('adaptive-video');
    const isMobileViewport = window.innerWidth < 768;
    const targetSrc = isMobileViewport ? 'mobile-video.mp4' : 'desktop-video.mp4';

    // 只有当目标资源和当前src不同时才加载，避免重复请求
    if (videoElement.src !== targetSrc) {
      videoElement.src = targetSrc;
      videoElement.load();
    }
  }

  // 页面加载完成后初始化
  window.addEventListener('load', loadMatchingVideo);
  // 窗口大小改变时重新检查（可加防抖优化频繁触发）
  window.addEventListener('resize', loadMatchingVideo);
</script>

小提示： #

可以给resize事件加防抖处理，比如用setTimeout延迟100ms执行，避免窗口拖动时频繁触发请求。

3. 辅助优化：Loading Lazy + CSS（不推荐作为核心方案） #

如果坚持使用两个独立的<video>元素，可以给它们加上loading="lazy"属性，配合media query控制显示：

<video class="mobile-video" src="mobile-video.mp4" controls loading="lazy"></video>
<video class="desktop-video" src="desktop-video.mp4" controls loading="lazy"></video>

.mobile-video { display: block; }
.desktop-video { display: none; }

@media (min-width: 768px) {
  .mobile-video { display: none; }
  .desktop-video { display: block; }
}

局限性： #

loading="lazy"只是延迟加载非视口内的资源，浏览器仍可能在空闲时预加载隐藏的视频，无法彻底阻止加载，仅作为临时优化手段。

验证方法 #

你可以打开浏览器的开发者工具（按F12），切换到Network面板，筛选"Media"类型，刷新页面后就能看到实际加载的视频资源，确认是否只加载了对应设备的版本。

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