HTML怎么做视频ABR自适应_HTML视频自适应码率播放方法实用

ABR必须依赖HLS或DASH等流式协议，因其实现核心是“按需分片加载+动态码率选择”，而直接切换MP4文件仅是静态多清晰度替换，无带宽感知、无法边下边播、必卡顿。

原生 <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> + 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 和用户反馈。