HLS.js是基于MSE实现跨浏览器HLS播放的核心库，通过解析M3U8、分片加载与SourceBuffer喂流完成播放，支持自适应码率、DRM、低延迟等企业级功能。
直接用 <video></video> 标签加载 .m3u8 在 Safari 上可行，但在 Chrome、Firefox 等浏览器中会失败——因为它们不原生支持 HLS。要跨平台稳定播放 HLS，必须借助 MediaSource Extensions（MSE）手动解析 M3U8、分片加载并喂给 <video></video>。这不是简单封装，而是构建一套可控的播放内核。
理解 HLS 与 MSE 的分工
HLS 是协议层：定义如何切片（TS 或 fMP4）、如何组织索引（M3U8）、如何声明码率和加密信息；
MSE 是浏览器能力层：提供 MediaSource 和 SourceBuffer，允许 JavaScript 动态追加二进制媒体数据。
二者结合的关键在于——你负责解析 M3U8、调度分片下载、处理编码格式匹配，浏览器只负责解码和渲染。
注意：
• HLS 默认使用 TS 封装，但现代实现更倾向 fMP4（fragmented MP4），因它与 MSE 兼容性更好、支持 H.265/AV1、便于 DRM 集成；
• 若用 TS，需额外转封装（如通过 mp4box.js 或 wasm 解析 TS 包再 mux 成 fMP4），否则 SourceBuffer 无法接受 video/mp2t；
• MIME 类型必须严格匹配：例如 video/mp4; codecs="avc1.640029,mp4a.40.2"，错一个字符就会 throw InvalidStateError。
核心流程四步走
1. 初始化 MediaSource 并绑定 video
• 创建 new MediaSource()，赋值给 video.src = URL.createObjectURL(mediaSource)；
• 等待 mediaSource.sourceopen 事件，再调用 addSourceBuffer；
• 若涉及 DRM，必须在此前为 video 设置 mediaKeys，否则后续写入加密 init segment 会触发 encrypted 事件失败。
2. 解析 M3U8 并构建播放队列
• 发起 fetch 获取 master.m3u8（多码率）或 media.m3u8（单码率）；
• 手动解析层级：提取 #EXT-X-STREAM-INF 中的带宽、分辨率、URI；
• 对选中的 variant，再 fetch 其 media.m3u8，提取所有 #EXTINF 分片 URL 及时长，存入有序队列；
• 记录 #EXT-X-MEDIA-SEQUENCE 起始序号，用于直播场景的连续性判断。
3. 分片加载与缓冲控制
• 不要串行加载：优先并发拉取 init segment + 前 2–3 个 media segment；
• 每次 sourceBuffer.appendBuffer() 前，检查 sourceBuffer.updating === false；
• 监听 updateend 事件驱动下一段加载，避免竞态；
• 定期检查 video.buffered，当缓冲水位低于 3 秒时主动预加载，高于 15 秒时暂停加载防止内存溢出。
4. 实现基础 ABR（自适应码率）逻辑
• 统计最近 5 个分片的平均下载速度（size / duration）；
• 结合当前缓冲时长（buffered.end(0) - currentTime）决策：
– 缓冲 – 缓冲 > 10s 且带宽上升 → 尝试升一级；
– 同一码率连续切换超 3 次 → 锁定该档位防抖动。
绕不开的兼容性细节
• iOS Safari：虽原生支持 HLS，但仅限 TS + H.264/AAC；若用 fMP4 或 H.265，仍需 MSE + hls.js 方案；
• Android WebView：多数版本不支持原生 HLS，必须走 MSE；
• CORS 问题：所有分片请求需服务端设置 Access-Control-Allow-Origin，否则 fetch 失败；
• 音视频同步：若音视频分属不同 M3U8（常见于直播），需用 SourceBuffer.mode = "sequence" 并严格按 PTS 顺序 append，否则出现音画不同步；
• 错误恢复：监听 sourceBuffer.onerror 和 mediaSource.onerror，发生 QuotaExceededError 时应清理过期 segment，DecodeError 则尝试重载当前分片。
是否真的需要从零造轮子？
hls.js 已覆盖 95% 以上场景：支持 fMP4/H.265、ABR、DRM、低延迟模式（LL-HLS）、完善的错误日志。自研价值在于：
• 需深度定制首屏策略（如预加载关键帧+封面图）；
• 要与内部监控系统打通（上报每个分片的耗时、卡顿点、码率切换日志）；
• 有特殊 DRM 流程（如密钥预注入、离线许可证校验）；
• 必须满足信创环境要求（无外部 CDN 依赖、纯国产编解码栈）。
否则，基于 hls.js 的二次封装（如 patch ABR 算法、替换加载器）是更高效的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
