基于MSE实现web前端视频预加载

简介

媒体源扩展 API（MSE） 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体流能够通过 创建，并且能通过使用 和 元素进行播放。

实现

正如上面所说，MSE 让我们可以通过 JS 创建媒体资源，使用起来也十分方便：

//创建了一个新的MediaSource对象。
//MediaSource对象表示媒体数据源，可以动态地将数据添加到此源中
const mediaSource = new MediaSource();


const video = document.querySelector('video');
// 与窗口中的 document 绑定
video.src = URL.createObjectURL(mediaSource);

媒体资源对象创建完毕，接下来就是喂给它视频数据（片段），代码看上去就像是：

//sourceopen事件：媒体源已经与HTML媒体元素关联并且准备好接收媒体数据时
mediaSource.