HTML5隐藏视频是否加载？两种多终端视频适配方案选型疑问

先明确现代浏览器的核心行为 #

当前主流浏览器（Chrome、Firefox、Safari、Edge等）都采用了智能的媒体资源加载策略：只要<video>标签处于不可见状态（比如display:none）且未触发播放指令，浏览器只会加载标签本身的DOM结构，不会下载大体积的视频文件。你在网络面板中观察到的结果是准确的，所谓“隐藏视频会后台下载”的说法，其实是旧浏览器（比如IE11、2018年之前的Chrome版本）的遗留行为，现代浏览器已经修复了这个问题。

两种方案的优劣对比 #

1. 媒体查询+双<video>标签方案

• 优势：实现零JS依赖，纯CSS控制，代码简洁易读，维护成本极低。浏览器会自动根据视口尺寸匹配对应的视频，无需监听窗口 resize 事件，也不存在JS逻辑出错的风险。
• 劣势：DOM中会存在两个<video>标签，但这个额外的DOM开销微乎其微，且现代浏览器不会加载未显示的视频资源，对性能无影响。

示例代码：

<video class="desktop-video" src="desktop.mp4" autoplay muted loop></video>
<video class="mobile-video" src="mobile.mp4" autoplay muted loop></video>

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

@media (max-width: 768px) {
  .desktop-video { display: none; }
  .mobile-video { display: block; }
}
</style>

2. JS动态替换视频源方案

• 优势：DOM结构更简洁，仅需一个<video>标签；如果需要基于视口尺寸之外的条件（比如用户操作、网络环境）切换视频，扩展性更强。
• 劣势：需要编写额外的JS逻辑，包括初始视口判断、窗口 resize 事件监听（还需添加防抖处理避免频繁触发），增加了代码复杂度；若JS加载失败或被用户禁用，视频适配功能会失效。

最终建议 #

• 若你的需求只是单纯根据视口尺寸适配桌面/移动端视频，优先选择媒体查询+双<video>标签方案，它更简单可靠，现代浏览器下性能完全有保障。
• 若需要复杂的动态切换逻辑，再考虑JS方案。
• 若必须兼容IE11及更早的老旧浏览器，建议使用JS方案，避免旧浏览器预加载隐藏视频导致的性能问题。

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