要实现HTML5 MSE自适应码率播放，需构建可编程媒体管道：创建MediaSource并绑定video，监听sourceopen后添加指定MIME类型的SourceBuffer；分片加载fMP4/WebM片段，按下载耗时比、缓冲水位、丢帧数等多维指标动态决策码率，辅以设备能力、用户偏好和服务端协同兜底。
要通过 HTML5 的 MediaSource Extensions（MSE）实现自适应码率（ABR）流媒体播放，核心是绕过 <video></video> 标签的静态加载限制，用 JavaScript 主动控制分片下载、缓冲与码率决策。原生 video 无法运行时切换不同码率的流，必须靠 MSE 搭建“可编程管道”。
构建 MSE 基础管道
这是所有后续逻辑的前提，不完成这步就无法注入任何动态数据：
- 创建
MediaSource实例，并用URL.createObjectURL()绑定到<video></video>的src - 监听
sourceopen事件，在回调中调用addSourceBuffer()创建缓冲区，MIME 类型需明确指定（如video/mp4; codecs="avc1.42E01E"） - 确保服务端提供的是分片化格式（fMP4 或 WebM），不是完整 MP4 文件——完整文件无法被
appendBuffer()正确解析
分片加载与动态注入
ABR 的本质是按需拉取合适码率的片段，而非预加载全部：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 将视频切为 2–6 秒的小段，每种码率（如 360p/720p/1080p）生成独立的分片序列，命名或索引需可寻址
- 用
fetch或XHR下载当前选定码率的下一个片段，避免一次性请求高码率资源造成卡顿 - 拿到
ArrayBuffer后调用sourceBuffer.appendBuffer()写入；监听updateend事件确认写入完成，再触发下一段加载 - 遇到
sourceBuffer.updating === true时不要重复appendBuffer()，否则报错
多维指标驱动码率决策
仅看平均带宽会误判，需融合实时轻量信号做短时判断：
立即学习“前端免费学习笔记（深入）”；
- 下载耗时比：当前片段实际下载时间 ÷ 上一段估算时间，比值 > 1.3 视为网络拥塞，应降码率
-
缓冲水位：用
video.buffered.end(0) - video.currentTime计算剩余缓冲秒数；低于 3 秒立即降级，高于 15 秒可尝试升码率 -
丢帧反馈：调用
video.getVideoPlaybackQuality()获取droppedVideoFrames，连续两次增长说明解码或渲染已吃力 - 加入“滞留窗口”机制，例如 8 秒内最多切换 1 次，防止码率在临界点反复震荡
兜底与协同保障稳定性
真实弱网环境复杂，单靠前端判断不够：
- 设备能力兜底：低端手机自动锁定中低码率，避免因解码压力引发卡顿
- 用户偏好兜底：若用户手动选择 720p，即使网络变好也不自动升到 1080p，尊重显式意图
- 服务端协同：CDN 可返回响应头携带网络质量建议（如
X-Net-Quality: good），作为前端决策辅助 - 所有切换逻辑需可配置，例如缓冲水位阈值、切换间隔等，方便不同业务场景调整
