HTML 标签本身不支持画质自适应，需通过HLS/DASH协议、网络判断（navigator.connection.downlink）、设备能力校验及MSE播放器控制协同实现；服务端配合可提升匹配精度。
HTML <video></video> 标签本身不支持画质自适应调整，它只是一个播放容器，没有内置的码率切换或网络感知能力。真正的“自适应画质”必须由开发者主动实现，核心在于协议选择 + 网络判断 + 设备适配 + 播放器控制四个环节协同工作。
用 HLS 或 DASH 协议替代 MP4 直播源
原生 <video></video> 只能加载单个文件（如 MP4），无法动态换流。要实现真正平滑的画质自适应，必须使用支持分片与多码率的流媒体协议：
-
Safari 原生支持 HLS（
.m3u8），可直接<source src="video.m3u8" type="application/vnd.apple.mpegurl"></source> -
Chrome/Firefox 需借助 hls.js 或 dash.js 库，它们接管
<video></video>的底层数据输入，按秒级切片选择最匹配的码率流 - 避免用多个 MP4 手动切换：容易黑屏、进度丢失、无法缓冲预判，仅适合极简场景
根据真实带宽动态决策画质
不能只看屏幕分辨率或 DPR，关键指标是 navigator.connection.downlink（单位 Mbps）和 effectiveType：
downlink → 切至 360p 或更低，优先保流畅1 ≤ downlink → 选 480p–720p-
downlink ≥ 5→ 可尝试 1080p@2x 或 4K，但需验证设备解码能力 - 监听
connection.onchange事件，在地铁进站、Wi-Fi 切 4G 等场景实时重评估
结合设备能力过滤无效选项
高 DPR 不等于能播 4K：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
devicePixelRatio ≥ 2 && screen.width ≥ 1200→ 表明有高分屏基础，才考虑 @2x 视频 - 对 Mali-400、Adreno 305 等老 GPU，即使 DPR=2 也应禁用 High Profile 编码
- 调用
video.canPlayType('video/mp4; codecs="avc1.640033"')验证是否支持 High Profile
播放器层保障无缝切换
- 使用 MSE（MediaSource Extensions）时，通过
SourceBuffer.appendBuffer()注入新码率分片，避免 reload - 若必须用 MP4 多源方案：保存
currentTime和paused状态 → 替换src→load()→ 等待loadedmetadata事件 → 恢复时间点与播放状态 - 首帧用低清 poster + 静默预加载高清源，用户点击前完成缓冲，降低首次切换延迟
服务端协同提升匹配精度
前端判断易受缓存、API 延迟影响，更可靠的方式是把信号传给后端：
- 请求视频时带上
device-pixel-ratio: 2、network-type: 4g等自定义 header - 或拼 URL query：
?dpr=2&net=4g&ua=chrome - CDN 或业务接口据此返回最优码率清单或直接下发适配后的流地址，减少前端硬编码与缓存碎片
不复杂但容易忽略
