MediaSource API 可实现 JavaScript 动态控制视频流，其核心是通过 MediaSource 与 SourceBuffer 将分段媒体数据（如 fMP4）注入 video 元素，适用于直播、点播、视频拼接等场景。使用时需创建 MediaSource 实例并绑定到 video.src，等待 sourceopen 事件后添加指定 MIME 类型的 SourceBuffer，再通过 fetch 获取数据并调用 appendBuffer 追加媒体片段，支持自定义缓冲与离线播放。需注意格式兼容性、CORS 配置及内存管理，适时调用 remove 清理已播放内容，确保流畅播放体验。
想用 JavaScript 精确控制视频流，特别是实现动态加载、分段播放或自定义缓冲逻辑？MediaSource API 是关键。它允许你通过 JavaScript 动态构建媒体流并喂给 <video></video> 元素，特别适用于直播、点播流媒体、离线视频拼接等场景。
什么是 MediaSource API？
MediaSource API 是 HTML5 的一部分，提供了一种方式让 JavaScript 向 <video></video> 或 <audio></audio> 元素“推送”媒体数据块（通常是 fMP4 或 WebM 格式）。它不直接处理网络请求，而是作为中间层，把获取到的媒体片段交给浏览器解码播放。
核心对象包括：
-
MediaSource：代表一个媒体源，绑定到 video 元素的
src上 - SourceBuffer：由 MediaSource 创建，用于接收和管理音视频数据片段
基本使用流程
要使用 MediaSource 控制视频，通常按以下步骤操作：
立即学习“Java免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 创建 MediaSource 实例
- 将 MediaSource 对象赋值给 video 元素的
src - 等待 MediaSource 的
sourceopen事件 - 在事件中创建 SourceBuffer
- 通过
appendBuffer()添加媒体数据 - 出错或结束时调用
remove()或endOfStream()
示例代码：
const video = document.querySelector('video');
const mediaSource = new MediaSource();
// 绑定 MediaSource 到 video
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
// 指定 MIME 类型（需与实际数据匹配）
const mimeType = 'video/mp4; codecs="avc1.42E01E"';
const sourceBuffer = mediaSource.addSourceBuffer(mimeType);
// 获取视频片段（例如通过 fetch）
fetch('segment-1.mp4')
.then(response => response.arrayBuffer())
.then(data => {
sourceBuffer.appendBuffer(data);
});
// 可继续追加其他片段
});
常见应用场景
MediaSource API 特别适合以下几种情况：
- 自定义流媒体播放器：实现 HLS 或 DASH 协议的轻量级 JS 解析器，手动下载 ts 或 fMP4 分片并喂入 SourceBuffer
- 视频拼接：将多个视频文件在客户端合并播放，无需服务器合成
- 动态缓冲控制：根据网络状况决定加载哪一段，实现更灵活的缓冲策略
- 离线播放：结合 Cache API 或 IndexedDB 缓存视频片段后播放
注意事项与限制
使用 MediaSource 时要注意以下几点：
- 必须使用支持的容器格式（如 fragmented MP4）和编码（H.264、VP9 等）
- 不是所有浏览器都完全支持，尤其是旧版本 Safari
- 跨域资源需确保 CORS 配置正确
- appendBuffer 可能触发错误，建议监听
error和updateend事件处理异常 - 内存管理重要：长时间播放应适时调用
remove(start, end)清理已播放数据
基本上就这些。掌握 MediaSource API 能让你跳出传统视频标签的限制，实现更高级的视频控制逻辑。虽然复杂一些，但对构建现代 Web 视频应用非常有价值。
