iOS下video标签preload="none"失效致页面加载失败，求非JS/懒加载方案

问题出在iOS的WebKit内核（Chrome、Firefox在iOS都基于这个内核运行）：即便你给隐藏的<video>设置了preload="none"，大量这类元素还是会触发浏览器的资源处理逻辑，超出资源限制后就会导致页面加载失败。

给你几个无需JavaScript、不用懒加载的纯HTML/CSS解决方案：

• 方案一：用媒体条件限制视频资源加载
  把直接在<video>标签上写src的写法，改成用<source>标签并设置一个永远不会匹配的媒体规则，这样浏览器默认不会请求视频文件：

  <video controls playsinline preload="none">
    <source src="example.mp4" media="(min-width: 10000px)">
  </video>
  

  继续用你原来的CSS隐藏即可。因为媒体条件永远不满足，浏览器不会加载视频资源，自然不会触发资源过载。如果之后需要显示视频，只要把media属性改成(min-width: 0px)这类匹配所有设备的规则就行，全程不用JS。

• 方案二：替换隐藏方式，避开display:none
  把display:none换成不会触发浏览器强制预加载的隐藏方案，比如：

  .hidden-video {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  

  这种方式下元素仍在DOM中，但完全脱离视觉流，WebKit内核不会强制加载其资源，同时保留了<video>标签的完整结构，不用改成链接形式。

• 方案三：暂存视频路径，移除src属性
  如果你的视频暂时不需要播放，只是要保留标签结构，可以把src属性换成自定义的data-src：

  <video data-src="example.mp4" controls playsinline preload="none"></video>
  

  浏览器不会识别data-src作为资源路径，也就不会发起请求。之后如果需要启用视频，直接把data-src改回src即可（适合静态修改的场景）。

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