HTML5 标签本身不支持自动清晰度切换，必须由开发者手动实现：准备多分辨率MP4文件，用JavaScript捕获用户选择、保存并恢复播放状态（currentTime/paused），调用load()后切换src并精准恢复；同时需结合navigator.connection.effectiveType和devicePixelRatio做网络与设备适配，并通过object-fit等CSS确保渲染质量。
HTML <video></video> 标签本身不支持自动清晰度切换，必须靠开发者手动控制视频源切换。核心逻辑是：准备多档分辨率的视频文件，用 JavaScript 捕获用户选择，保存当前播放状态，替换 src 或 <source></source>，再恢复播放。
准备多分辨率视频资源
为同一内容提供不同清晰度的独立文件，例如：
-
video-480p.mp4（标清） -
video-720p.mp4（高清） -
video-1080p.mp4（全高清） -
video-1080p@2x.mp4（适配高 DPR 屏幕的 2x 版本）
建议统一编码格式（如 H.264），并确保所有文件时长、关键帧对齐一致，避免切换后音画不同步。若需更优体验，可考虑 HLS 或 DASH 协议——它们天然支持自适应码率，但需服务端切片和索引文件（如 .m3u8）。
监听选择并动态切换源
用户点击“高清”“超清”等按钮时，JavaScript 需执行以下操作：
立即学习“前端免费学习笔记（深入）”；
- 读取当前
video.currentTime和video.paused状态 - 设置
video.src为对应清晰度的 URL（或清空<source></source>后重新插入） - 调用
video.load()强制重新加载媒体资源 - 设置
video.currentTime回原位置 - 根据之前是否暂停，决定是否调用
video.play()或保持暂停
注意：不能只改 src 就直接 play()，否则可能从头开始播或报错；load() 是必要步骤，它重置解码器并准备新源。
兼顾设备与网络的实际适配
单纯按“用户点击”切换不够智能。更实用的做法是结合环境做兜底：
- 用
navigator.connection.effectiveType判断网络类型（如'slow-2g'），弱网下默认锁定标清 - 检测
window.devicePixelRatio，高 DPR 设备（如 2x/3x）优先加载更高分辨率源 - 监听
resize或横竖屏变化，视口缩小时自动降级，避免浪费带宽 - 首次加载可用低清占位视频 + 静默预加载高清源，用户切换时几乎无等待
CSS 与渲染细节不能忽略
即使换了高清源，若 CSS 缩放不当，依然会模糊：
- 用
object-fit: cover或contain控制裁剪/等比缩放，避免拉伸失真 - 避免用
transform: scale(2)放大低清视频——这是像素放大，不是超分 - 固定尺寸容器下，确保视频自然宽高比匹配，否则黑边或挤压影响观感
- 高 DPR 屏幕上，CSS 像素 1:1 显示时，720p 视频在 2x 屏实际是 360p 渲染，应至少提供 1440p 源才够锐利
