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);
            // 播放完成后关闭 SourceBuffer
            mediaSource.endOfStream();
        })
        .catch(error => console.error('Error:', error));
});