HTML5媒体API进阶能力依托Media Source Extensions（MSE），实现对视频流的动态拼接与分段控制；需检测MediaSource支持、初始化MediaSource、创建SourceBuffer、按时间戳追加fMP4/WebM分片，并处理seek、错误及兼容性降级。
HTML5 媒体 API 的进阶能力，核心在于突破 <video> 标签的简单播放限制，实现对视频流的主动控制与分段处理。这不依赖插件，而是依托 Media Source Extensions（MSE）这一标准化接口，让 JavaScript 能够动态拼接、注入和管理媒体数据块。
视频流分段渲染的关键前提：MSE 支持与 MediaSource 初始化
浏览器必须支持 MediaSource 接口（Chrome、Firefox、Edge、Safari 13.1+ 均已稳定支持）。使用前需检测：
if ('MediaSource' in window) {
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
}绑定后，mediaSource.readyState 会经历 'closed' → 'open' → 'ended' 状态变化。只有进入 'open' 状态，才能创建 SourceBuffer。
创建音视频轨道缓冲区并管理分片数据
MSE 不直接操作原始视频文件，而是通过 SourceBuffer 接收二进制分片（如 fMP4 或 WebM 片段）。关键步骤包括：
立即学习“前端免费学习笔记（深入）”；
- 调用
addSourceBuffer(mime-type)指定编码类型（如'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'） - 监听
sourcebuffer.updateend事件，确认上一段数据已成功解析并可追加下一段 - 使用
appendBuffer(uint8Array)写入分片数据；若数据不连续或时间戳错乱，会触发error事件
注意：同一 SourceBuffer 只能写入一种类型（纯视频或纯音频），多轨需分别创建。
实现分段渲染的典型流程：DASH/HLS 的轻量级模拟
无需完整播放器框架，也能手动构建流式逻辑：
- 预先获取
.mpd（DASH）或.m3u8（HLS）清单，解析出各分片 URL 和时间范围 - 按播放进度预加载后续 2~3 个分片，避免卡顿
- 利用
video.buffered判断当前缓冲区间，结合currentTime动态调度加载时机 - 若 seek 到未缓冲区域，清空对应
SourceBuffer并重新加载起始分片
例如：当用户拖动进度条到第 120 秒，而缓冲区只覆盖 0–90 秒，应中断当前 append，定位到包含 120 秒的分片起始点重新注入。
错误处理与兼容性兜底策略
MSE 虽强大，但易受数据格式、时间戳精度、跨域限制影响：
-
sourcebuffer.appendError事件需监听，常见原因包括：时间戳重叠、帧率不匹配、moof/mdat 结构损坏 - Safari 对 fMP4 的初始化段（init segment）要求严格，缺失或顺序错误会导致
InvalidStateError - 旧版 Android 浏览器可能不支持
audio/mp4，建议优先使用video/mp4复用音视频轨 - 当 MSE 不可用时，降级回
<video src="xxx.mp4">直链播放，确保基础功能不中断
不复杂但容易忽略
