通过 javascript 动态设置 `
在响应式网页开发中，为不同设备提供适配的媒体资源是提升性能与用户体验的关键一环。虽然 HTML5
✅ 正确解法是延迟初始化视频源：先不设置有效 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 上可静音内联播放（尤其作为背景时）。
此方案兼顾语义化、可维护性与性能，是现代响应式视频加载的最佳实践之一。
