如何根据屏幕尺寸提供不同视频背景以节省移动端带宽？

问题原因 #

原生<video>标签的<source>元素media属性，受部分浏览器预加载策略影响，会同时下载多个符合类型的视频源，无法实现严格的按需加载。

解决方案：通过JavaScript动态加载对应视频 #

通过检测屏幕宽度，动态为视频匹配并加载对应尺寸的源，确保只下载当前屏幕适配的视频：

方法1：直接设置video的src #

<video controls id="bg-video" preload="none">
</video>

<script>
function loadVideo() {
  const video = document.getElementById('bg-video');
  const isMobile = window.innerWidth <= 800;
  video.src = isMobile ? 'b.mp4' : 'a.mp4';
  video.type = 'video/mp4';
  // 如需自动播放可添加：video.play();
}

// 页面加载时执行
window.addEventListener('load', loadVideo);
// 窗口大小改变时重新检测（可选）
window.addEventListener('resize', loadVideo);
</script>

方法2：动态添加source元素 #

若需保留多格式兼容的扩展性，可动态创建<source>元素并添加到video中：

<video controls id="bg-video" preload="none">
</video>

<script>
function loadVideo() {
  const video = document.getElementById('bg-video');
  // 清空现有source
  while (video.firstChild) {
    video.removeChild(video.firstChild);
  }
  
  const isMobile = window.innerWidth <= 800;
  const source = document.createElement('source');
  source.src = isMobile ? 'b.mp4' : 'a.mp4';
  source.type = 'video/mp4';
  video.appendChild(source);
  
  // 加载新源
  video.load();
}

window.addEventListener('load', loadVideo);
window.addEventListener('resize', loadVideo);
</script>

关键注意事项 #

• 设置preload="none"：告知浏览器不要预加载视频，直到明确触发加载，避免无效带宽消耗。
• 窗口resize监听：如果需要在用户调整窗口大小时自动切换视频源，保留该事件绑定；无需则可移除。
• 移动端自动播放：若作为背景视频需自动播放，需给video标签添加muted和playsinline属性（移动端自动播放要求静音），并在JS中调用video.play()。

内容的提问来源于stack exchange，提问作者avr.web