如何根据屏幕尺寸动态加载不同分辨率的视频文件

通过 javascript 动态设置 `

在响应式网页开发中，为不同设备提供适配的媒体资源是提升性能与用户体验的关键一环。虽然 html5元素支持 media 属性（如 screen and (max-width: 800px)），但该属性仅控制源的可见性（即是否参与渲染选择），并不能阻止浏览器预加载所有标签中的资源——这正是你遇到的问题：移动端仍会下载高清版 a.mp4，造成不必要的流量消耗。

✅ 正确解法是延迟初始化视频源：先不设置有效 src，待页面加载完成、获取真实视口或屏幕尺寸后，再通过 javaScript 显式指定唯一视频地址，并调用 .load() 触发按需加载。

以下是一个轻量、可靠、兼容主流浏览器的实现方案：

? 关键注意事项：

• ✅ 使用 window.innerWidth（含滚动条）而非 screen.width：后者返回设备物理屏幕宽度（如 iphone 14 是 430px，但 screen.width 可能返回 980px），而 innerWidth 反映实际可用视口，更符合响应式逻辑；
• ✅中使用 data: URL 占位，彻底规避初始预加载；
• ✅ 必须调用 .load() 才能触发浏览器真正发起网络请求；
• ⚠️ 若需支持横竖屏动态切换且不刷新页面，需手动 video.pause()、清空 src、重新赋值并 load()，但需注意 ios safari 对自动播放和后台加载的限制；
• ? 建议为移动版视频添加 playsinline 和 muted 属性，确保在 iOS 上可静音内联播放（尤其作为背景时）。

此方案兼顾语义化、可维护性与性能，是现代响应式视频加载的最佳实践之一。