通过 javascript 动态设置 `
在响应式网页开发中，为不同设备提供适配的媒体资源是提升性能与用户体验的关键一环。虽然 HTML5 <source> 元素支持 media 属性（如 screen and (max-width: 800px)），但该属性仅控制源的可见性（即是否参与渲染选择），并不能阻止浏览器预加载所有 <source> 标签中的资源——这正是你遇到的问题：移动端仍会下载高清版 a.mp4，造成不必要的流量消耗。
✅ 正确解法是延迟初始化视频源：先不设置有效 src，待页面加载完成、获取真实视口或屏幕尺寸后，再通过 JavaScript 显式指定唯一视频地址，并调用 .load() 触发按需加载。
以下是一个轻量、可靠、兼容主流浏览器的实现方案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>响应式背景视频</title>
</head>
<body>
<video id="responsiveVideo" controls muted autoplay loop playsinline>
<!-- 占位 source，防止早期预加载 -->
<source src="data:video/mp4;base64," type="video/mp4">
</video>
<script>
function initResponsiveVideo() {
const video = document.getElementById('responsiveVideo');
const isMobile = window.innerWidth <= 800;
// 根据屏幕宽度选择视频源（推荐使用 window.innerWidth 而非 screen.width）
const videoSrc = isMobile ? 'b.mp4' : 'a.mp4';
// 关键：仅设置一次 src，然后显式调用 load()
video.src = videoSrc;
video.load(); // 触发资源加载（非自动播放）
// 可选：监听窗口大小变化（适用于横竖屏切换等场景）
window.addEventListener('resize', () => {
if (window.innerWidth <= 800 !== isMobile) {
location.reload(); // 简单可靠；如需无刷新切换，需卸载旧视频并重设 src + load()
}
});
}
// 确保 DOM 就绪后执行（比 window.onload 更早且更可靠）
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initResponsiveVideo);
} else {
initResponsiveVideo();
}
</script>
</body>
</html>? 关键注意事项：
- ✅ 使用 window.innerWidth（含滚动条）而非 screen.width：后者返回设备物理屏幕宽度（如 iPhone 14 是 430px，但 screen.width 可能返回 980px），而 innerWidth 反映实际可用视口，更符合响应式逻辑；
- ✅ <source> 中使用 data: URL 占位，彻底规避初始预加载；
- ✅ 必须调用 .load() 才能触发浏览器真正发起网络请求；
- ⚠️ 若需支持横竖屏动态切换且不刷新页面，需手动 video.pause()、清空 src、重新赋值并 load()，但需注意 iOS Safari 对自动播放和后台加载的限制；
- ? 建议为移动版视频添加 playsinline 和 muted 属性，确保在 iOS 上可静音内联播放（尤其作为背景时）。
此方案兼顾语义化、可维护性与性能，是现代响应式视频加载的最佳实践之一。
