<video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video>
var video = document.querySelector(‘video‘); var mediaSource = new MediaSource; video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener(‘sourceopen‘, sourceOpen) function sourceOpen () { var mediaSource = this; var sourceBuffer = mediaSource.addSourceBuffer(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘); sourceBuffer.addEventListener(‘updateend‘, function () { mediaSource.endOfStream(); video.play(); }); sourceBuffer.appendBuffer(buf); // buf is the arraybuffer to store the video data };
首先创建变量名为 video 的 DOM 对象。之后，创建变量名为 mediaSource 的MediaSource 对象。 通过函数 createObjecturl 来将 DOM::Video 对象的属性src 和 mediaSource 进行“连接”。 接下来，通过注册事件 Event::sourceopen来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视屏数据的 Buffer。 在往 Buffer 中存放数据结束之后会触发事件 Event::updateend 。 通过注册这个事件的回调，可以知晓数据已经加载完毕，然后调用 Video::play 函数通知浏览器播放视频。 至此，整个 Blob 运行机制讲解完毕。详细的技术细节需要花一段时间来查看，暂时停止在这里。我们先知道这个是什么东西。<(￣3￣)>
通过查看 B 站的前端代码，发现其 HTML5 播放器实现原理和这个差不多，主要使用 new MediaSource 和 createObjectURL 这2个函数。（当然实现不会这么简单，比如异常处理，用户交互等都是需要巨量的代码来覆盖。）
出处：https://creamidea.github.io/static/html/articles/HTML5-Video-Blob.html
