html5 标签不支持 srcset 或 dpr 感知，需用 javascript 检测 devicepixelratio、网络类型及视口动态加载适配视频源，并结合 css object-fit 与高分辨率源保障清晰度。

HTML5 <video></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></video> 的 src，或使用 <source></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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！