video blob 视频优化

在处理视频的时候，最基本的用法就是通过video来引入，但使用上总有些缺陷，例如视频源暴露问题，以及资源的播放加载问题，于是乎特地去看专业的视频网站的做法，发现他们的链接地址中都包含了blob

<video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video>

打开链接的时候，却显示了404，查阅了资料，才知道这是视频”分段缓冲播放“处理，通过 MediaSource 和 createObjecturl 的配合。

那么如何处理呢，直接上代码：

//先创建变量名为 `video` 的 DOM 对象
var video = document.querySelector('video');  

// 创建MediaSource对象
var mediaSource = new MediaSource;  

// 将mediaSource通过createObjecturl函数赋值给src
video.src = URL.createObjectURL(mediaSource);  

// 监听sourceopen事件，当video产生src时，处理视频数据
mediaSource.addEventListener('sourceopen', sourceOpen) 

function sourceOpen () {
  	var mediaSource = this;
    
  	// 构建一个存放视屏数据的 Buffer
  	var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');  
  
    // 监听updateend事件，数据加载完毕就播放视频
  	sourceBuffer.addEventListener('updateend', function () {
    	mediaSource.endOfStream();      
    	video.play(); 
  	});
    
    // 添加缓冲数据，buf是用于存储视频数据的缓冲数组
  	sourceBuffer.appendBuffer(buf);  
};

逻辑是这样的：

先创建变量名为 video 的 DOM 对象。之后，创建变量名为 mediaSource 的 MediaSource 对象。 通过函数 createObjecturl 来将 DOM::Video 对象的属性 src 和 mediaSource 进行“连接”。 接下来，通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视屏数据的 Buffer。 在往 Buffer 中存放数据结束之后会触发事件 Event::updateend 。 通过注册这个事件的回调，可以知晓数据已经加载完毕，然后调用 Video::play 函数通知浏览器播放视频。 至此，整个 Blob 运行机制讲解完毕。详细的技术细节需要花一段时间来查看，暂时停止在这里。我们先知道这个是什么东西。<(￣3￣)>

主要使用 new MediaSource 和 createObjectURL 这2个函数。（当然实现不会这么简单，比如异常处理，用户交互等都是需要巨量的代码来覆盖。）

最后，引用一些别人的结语：

这个只是 HTML5 提供的新特性，但是截止目前还是处于试验状态。可是，现在已经有许多的厂商开始使用，有大厂的支持，心里稍稍安心啦。

出处：

creamidea.github.io/static/html…