MSE学习

MSE简介

媒体源拓展（Media Source Extensions，简称 MSE）是一个由 W3C 制定的标准，它允许 JavaScript 代码通过 AJAX 请求获取媒体数据，并将其提供给 HTML 的 <video> 或 <audio> 元素进行播放。

MSE特点

1. 动态加载媒体：MSE 支持在网页中动态加载和播放音视频内容，而无需将整个文件下载到浏览器。
2. 自定义播放逻辑：开发者可以使用 MSE 实现自定义的流媒体协议、DRM（数字版权管理）、广告插入等功能。
3. 分段传输：媒体文件可以被分割成多个小片段依次加载，从而实现边下载边播放的效果。
4. 跨平台兼容性：现代主流浏览器如 Chrome、Firefox、Safari 等都支持 MSE。

案例

在使用 MSE 时，通常会结合 MediaSource 和 SourceBuffer API 来操作

// 创建 MediaSource 对象
let mediaSource = new MediaSource();
let videoElement = document.querySelector('video');// 将 MediaSource 对象绑定到 <video> 元素
videoElement.src = URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen', () => {// 当 MediaSource 准备好后，创建 SourceBuffer 并添加媒体数据let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');fetch('/path/to/video.mp4').then(response => response.arrayBuffer()).then(data => {sourceBuffer.appendBuffer(data);// 播放完成后关闭 SourceBuffermediaSource.endOfStream();}).catch(error => console.error('Error:', error));
});

---

追更

更多学习资源

Streaming media on demand with Media Source Extensions - Mozilla Hacks - the Web developer blog

Blob - Web APIs | MDN

https://www.w3.org/TR/media-source/#addsourcebuffer-method