abr必须依赖hls或dash等流式协议，因其实现核心是“按需分片加载+动态码率选择”，而直接切换mp4文件仅是静态多清晰度替换，无带宽感知、无法边下边播、必卡顿。
原生 <video></video> 标签不支持 ABR（自适应码率）——必须用 HLS 或 DASH 协议，配合支持该协议的播放器或 MediaSource API 手动实现。
为什么直接 src 换 MP4 文件不算 ABR
用 JavaScript 切换不同分辨率的 MP4（比如 480p.mp4 → 1080p.mp4）只是“多清晰度切换”，不是 ABR：它不感知网络带宽、不自动降级、无法边下边播、切源时必然卡顿。ABR 的核心是「按需分片加载 + 动态码率选择」，这要求视频被切为小段（.ts 或 .mp4 分片），并有索引文件（.m3u8 或 .mpd）描述各码率版本的分片地址和时长。
-
src="video-720p.mp4"和src="video-1080p.mp4"是静态文件替换，无自适应逻辑 - 浏览器对单个 MP4 的
preload和range请求仅用于缓冲，不能跨码率无缝跳转 - 真 ABR 必须依赖流式协议，否则所谓“自适应”只是伪命题
HLS 是最现实的入门方案（尤其对 iOS/ Safari）
iOS 和 macOS Safari 原生支持 HLS（.m3u8），无需额外库；Android Chrome 和桌面 Chrome 从 v84 起也通过 MediaSource + hls.js 兜底。直接上 <video></video> + hls.js 是当前兼容性与开发成本平衡最好的路径。
- 服务端生成多码率 HLS 流（如用 FFmpeg 输出 360p/720p/1080p 对应的
.ts+ 主.m3u8） - 前端检测是否原生支持：
Hls.isSupported()，支持则用hls.loadSource("index.m3u8")，不支持则回退到video.src = "index.m3u8" - 务必设
video.setAttribute('playsinline', '')，否则 iOS 会强跳全屏 -
hls.js默认开启 ABR，也可手动控制：hls.currentLevel = 2（索引值）或监听hls.levelSwitched事件
用 MediaSource 实现 DASH 需要自己写调度逻辑
DASH（.mpd）协议更灵活，但浏览器无原生支持，必须靠 MediaSource + 解析器（如 dash.js 或手写 MPD parser）驱动。相比 HLS，它对网络判断、buffer 管理、码率升降策略要求更高，适合已有流媒体基建的团队。
- 创建
MediaSource后，需解析.mpd获取各Representation（即不同码率轨）的SegmentTemplate地址格式 - 手动发起 fetch 请求下载分片（如
video_720p_init.mp4+video_720p_seg-1.m4s） - 根据
video.buffered和navigator.connection.effectiveType决定下次加载哪个码率的分片 - 频繁调用
sourceBuffer.appendBuffer()时要注意sourceBuffer.updating状态，避免重复 append 导致 DOMException
移动端静音+用户手势是 ABR 播放的前提
哪怕 HLS / DASH 流配置完全正确，iOS 和 Android Chrome 仍会因自动播放策略阻断初始化。这不是协议问题，而是平台限制。
- 首次播放必须满足：
video.muted = true+video.autoplay = true+video.playsinline = true - 若要后续开启声音，只能在用户点击/触摸后立即调用
video.play()（不能 setTimeout、不能 await 异步后再 play） - 检查控制台是否出现
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.—— 这说明静音或交互时机没卡准 - 海报图
poster建议用和主码率相同宽高比的图，否则object-fit: cover下黑边位置会偏移
ABR 的复杂点不在“怎么播”，而在“怎么稳”：分片加载失败重试、buffer underflow 降级、首帧耗时监控、CDN 缓存命中率。别指望一个 hls.js script 标签就搞定全部——它只解决协议层，真实体验取决于你如何处理 loading 状态、错误 fallback 和用户反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
