HTML5 <video> 标签不支持 srcset 或 DPR 感知，需用 JavaScript 检测 devicePixelRatio、网络类型及视口动态加载适配视频源，并结合 CSS object-fit 与高分辨率源保障清晰度。
HTML5 <video> 标签本身不支持类似 <img> 的 srcset 或 sizes 属性，也没有原生的 DPR（Device Pixel Ratio）感知能力。它无法根据设备像素比自动切换不同分辨率的视频源。视频资源的选择逻辑完全由开发者控制，需通过 JavaScript 主动检测 DPR 并加载对应版本。
视频不支持 srcset 的根本原因
与图片不同，视频是流式、有状态、高带宽消耗的媒体。浏览器无法在不下载部分数据的前提下预判解码开销或网络适应性；DPR 对视频渲染质量的影响也远不如对静态图像明显（因为视频通常全屏或固定尺寸播放，缩放由 CSS 控制）。因此 HTML 规范未将响应式视频纳入原生支持范围。
手动实现 DPR 感知的视频加载
可通过以下步骤实现适配：
- 用
window.devicePixelRatio获取当前 DPR（如 iPhone 14 Pro 为 3，MacBook Retina 为 2） - 结合
screen.width和screen.height判断设备类型和视口能力（避免仅依赖 DPR） - 为同一视频准备多档编码：如
video-720p.mp4、video-1080p@2x.mp4、video-4k@3x.mp4 - 动态设置
<video>的src，或使用<source>标签配合media属性（但注意：media只支持媒体查询，不能直接读取 DPR） - 推荐做法：JavaScript 计算后调用
video.src = url，再执行video.load()，确保重新加载
更实用的替代策略
单纯按 DPR 选视频容易误判——高 DPR 设备若网络差，加载 4K 视频反而卡顿。建议组合判断：
立即学习“前端免费学习笔记（深入）”；
- 优先使用
navigator.connection.effectiveType（如 '4g'、'slow-2g'）做带宽兜底 - 监听
resize和orientationchange，在用户横屏/缩放时动态降级 - 服务端通过 UA + DPR Hint（如自定义 HTTP header 或 URL query）下发合适分辨率，前端只负责传参
- 对点播场景，可先加载低清占位帧（poster），再后台静默加载高清源，按需切换
CSS 缩放与 DPR 的协同处理
即使视频源分辨率固定，DPR 仍影响最终清晰度：
- 用
width: 100vw; height: auto;配合object-fit: cover;确保缩放不失真 - 避免用
transform: scale(2)放大视频——这会放大像素，导致模糊；应换更高分辨率源 - 在高 DPR 屏幕上，CSS 像素与物理像素 1:1 时，720p 视频可能看起来发虚，此时需至少 1440p 源匹配 2x DPR
