使用display:none是否阻止内容加载？移动端视频免加载方案咨询

嘿，刚好对这个问题门儿清！你现在用的@media加display:none的方式其实有个大问题——它只是把视频藏起来了，但浏览器该加载还是会加载，完全没法帮用户省漫游流量。得换些真能阻止资源请求的方法才行，给你几个实用方案：

CSS的display:none只是控制元素的视觉可见性，浏览器在解析HTML的时候，不管元素会不会显示，只要看到<video>标签带了src，就会发起资源请求。所以这个方法对节省流量完全无效。

1. JavaScript动态加载（最灵活推荐） #

思路很简单：先不给<video>写真实的src，把视频地址存在自定义属性里（比如data-src），然后判断屏幕宽度，只有在桌面端（宽度超过你设定的阈值）时，才把地址赋值给src，触发加载。

示例代码：

<video controls data-src="your-video-file.mp4">
  你的浏览器不支持视频播放
</video>

<script>
function loadVideoForDesktop() {
  const videoElement = document.querySelector('video');
  // 这里的768px是移动端/桌面端的分界值，可根据你的需求调整
  if (window.innerWidth > 768) {
    videoElement.src = videoElement.dataset.src;
  }
}

// 页面加载时检查一次
window.addEventListener('load', loadVideoForDesktop);
// 窗口大小变化（比如旋转屏幕）时也重新检查
window.addEventListener('resize', loadVideoForDesktop);
</script>

这个方法能确保移动端完全不会发起视频资源请求，完美解决漫游流量的问题，而且兼容性也很好。

2. 纯HTML方案（无需JS） #

如果你不想写JavaScript，可以用<source>标签的media属性，指定只有符合桌面端媒体查询条件时，才加载对应的视频源：

<video controls>
  <source src="your-video-file.mp4" media="(min-width: 769px)">
  你的浏览器不支持视频播放
</video>

不过要注意：部分老旧浏览器对source的media属性支持不太到位，如果你的用户群体有大量旧设备，还是优先选第一个JS方案。

3. 服务器端判断（进阶玩法） #

如果你的网站是服务端渲染的（比如用PHP、Node.js、Python等），可以直接在服务器端通过用户的User-Agent判断设备类型，只在桌面端的页面里渲染<video>标签，移动端页面里完全不输出这个元素——从根源上杜绝了加载请求。

要是你用的是第三方视频平台的嵌入代码（比如YouTube、Vimeo的iframe），也要用类似的动态加载方式，因为哪怕你用CSS隐藏了iframe，它还是会在后台加载资源，照样耗流量。

测试的时候记得打开浏览器开发者工具的「网络」面板，确认移动端确实没有发起视频相关的请求，这样才放心。

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