Media Source Extensions（简称MSE）是W3C制定的浏览器媒体扩展标准，它允许JavaScript动态生成媒体流并将其绑定到HTML的video元素上，实现分段加载、动态拼接视频内容的效果，非常适合流媒体播放场景。传统video元素直接设置src加载完整视频文件的方式，在视频体积较大时会出现加载等待时间长的问题，而MSE可以解决这个问题。
MSE核心概念
使用MSE前需要先了解几个核心对象：
- MediaSource：整个媒体流的容器对象，负责管理媒体数据的添加和状态控制。
- SourceBuffer：媒体数据的缓冲区，MediaSource可以创建多个SourceBuffer分别处理不同编码格式的音视频数据。
- Object URL：通过URL.createObjectURL将MediaSource实例转换为可被video元素识别的地址。
MSE使用基本流程
完整的MSE流媒体播放流程可以分为以下几个步骤：
1. 创建MediaSource实例并绑定到video元素
首先初始化MediaSource，生成对应的Object URL赋值给video的src属性，等待MediaSource进入就绪状态。
// 获取video元素
const videoElement = document.querySelector('video');
// 创建MediaSource实例
const mediaSource = new MediaSource();
// 生成Object URL绑定到video
videoElement.src = URL.createObjectURL(mediaSource);
// 监听MediaSource就绪事件
mediaSource.addEventListener('sourceopen', handleSourceOpen);
2. 创建SourceBuffer并添加媒体数据
当MediaSource触发sourceopen事件后，就可以创建对应编码格式的SourceBuffer，然后向其中追加视频片段的二进制数据。
function handleSourceOpen() {
// 创建SourceBuffer，指定视频编码格式，这里以MP4的avc1编码为例
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
// 加载第一个视频片段
fetchVideoSegment('segment1.mp4').then((arrayBuffer) => {
// 追加数据到SourceBuffer
sourceBuffer.appendBuffer(arrayBuffer);
});
}
// 封装获取视频片段的方法
function fetchVideoSegment(url) {
return fetch(url).then((response) => response.arrayBuffer());
}
3. 处理数据追加完成和后续片段加载
SourceBuffer追加数据完成后会触发updateend事件，我们可以在这个事件中继续追加后续的视频片段，直到所有片段加载完成。
function handleSourceOpen() {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
let segmentIndex = 1;
const totalSegments = 3;
// 监听数据追加完成事件
sourceBuffer.addEventListener('updateend', () => {
segmentIndex++;
if (segmentIndex <= totalSegments) {
// 追加下一个片段
fetchVideoSegment(`segment${segmentIndex}.mp4`).then((arrayBuffer) => {
sourceBuffer.appendBuffer(arrayBuffer);
});
} else {
// 所有片段加载完成，结束流
mediaSource.endOfStream();
// 可以开始播放
videoElement.play();
}
});
// 加载第一个片段
fetchVideoSegment('segment1.mp4').then((arrayBuffer) => {
sourceBuffer.appendBuffer(arrayBuffer);
});
}
注意事项
- 视频片段需要满足MSE的格式要求，通常需要是fMP4（ fragmented MP4）格式，普通MP4无法直接追加到SourceBuffer。
- 追加数据时必须等待上一次appendBuffer操作完成，也就是要等updateend事件触发后再进行下一次追加，否则会抛出异常。
- 如果视频包含音频和视频两个轨道，可以创建两个SourceBuffer分别处理，需要注意两个轨道的时间戳对齐。
- 不再使用MediaSource时，建议通过URL.revokeObjectURL释放之前创建的Object URL，避免内存泄漏。
完整示例代码
以下是一个可直接运行的完整示例，假设当前目录下有三个fMP4格式的视频片段segment1.mp4、segment2.mp4、segment3.mp4：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MSE流媒体播放示例</title>
</head>
<body>
<video controls width="800"></video>
<script>
const videoElement = document.querySelector('video');
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
let segmentIndex = 1;
const totalSegments = 3;
const loadSegment = (index) => {
fetch(`segment${index}.mp4`)
.then(res => res.arrayBuffer())
.then(buffer => {
sourceBuffer.appendBuffer(buffer);
});
};
sourceBuffer.addEventListener('updateend', () => {
segmentIndex++;
if (segmentIndex <= totalSegments) {
loadSegment(segmentIndex);
} else {
mediaSource.endOfStream();
videoElement.play();
// 释放Object URL
URL.revokeObjectURL(videoElement.src);
}
});
loadSegment(segmentIndex);
});
</script>
</body>
</html>
通过上述方法，就可以利用MSE实现浏览器端的流媒体视频播放，支持动态拼接多个视频片段，适用于点播、直播等多种流媒体场景。
Media_Source_Extensions流媒体播放JS视频处理blob_URL修改时间：2026-06-26 07:33:37