MediaSource API 可实现 JavaScript 动态控制视频流，其核心是通过 MediaSource 与 SourceBuffer 将分段媒体数据（如 fMP4）注入 video 元素，适用于直播、点播、视频拼接等场景。使用时需创建 MediaSource 实例并绑定到 video.src，等待 sourceopen 事件后添加指定 MIME 类型的 SourceBuffer，再通过 fetch 获取数据并调用 appendBuffer 追加媒体片段，支持自定义缓冲与离线播放。需注意格式兼容性、CORS 配置及内存管理，适时调用 remove 清理已播放内容，确保流畅播放体验。
想用 JavaScript 精确控制视频流，特别是实现动态加载、分段播放或自定义缓冲逻辑？MediaSource API 是关键。它允许你通过 JavaScript 动态构建媒体流并喂给 元素，特别适用于直播、点播流媒体、离线视频拼接等场景。
什么是 MediaSource API？
MediaSource API 是 HTML5 的一部分，提供了一种方式让 JavaScript 向 或 元素“推送”媒体数据块（通常是 fMP4 或 WebM 格式）。它不直接处理网络请求，而是作为中间层，把获取到的媒体片段交给浏览器解码播放。
核心对象包括：
-
MediaSource：代表一个媒体源，绑定到 video 元素的
src上 - SourceBuffer：由 MediaSource 创建，用于接收和管理音视频数据片段
基本使用流程
要使用 MediaSource 控制视频，通常按以下步骤操作：
- 创建 MediaSource 实例
- 将 MediaSource 对象赋值给 video 元素的
src - 等待 MediaSource 的
sourceopen事件 - 在事件中创建 SourceBuffer
- 通过
appendBuffer()添加媒体数据 - 出错或结束时调用
remove()或endOfStream()
示例代码：
PHP 网络编程技术与实例(曹衍龙)
下载
PHP网络编程技术详解由浅入深，全面、系统地介绍了PHP开发技术，并提供了大量实例，供读者实战演练。另外，笔者专门为本书录制了相应的配套教学视频，以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇，介绍了PHP的优势、开发环境及安装；第2篇是PHP基础篇，介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数；第3篇是进阶篇，介绍
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 视频应用非常有价值。
