2023年6月27日发(作者：)

videoblob视频优化在处理视频的时候，最基本的⽤法就是通过video来引⼊，但使⽤上总有些缺陷，例如视频源暴露问题，以及资源的播放加载问题，于是乎特地去看专业的视频⽹站的做法，发现他们的链接地址中都包含了blob打开链接的时候，却显⽰了404，查阅了资料，才知道这是视频”分段缓冲播放“处理，通过

MediaSource 和

createObjecturl 的配合。那么如何处理呢，直接上代码：//先创建变量名为 `video` 的 DOM 对象var video = elector('video');

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

// 将mediaSource通过createObjecturl函数赋值给 = ObjectURL(mediaSource);

// 监听sourceopen事件，当video产⽣src时，处理视频数据ntListener('sourceopen', sourceOpen)

function sourceOpen () { var mediaSource = this;

// 构建⼀个存放视屏数据的 Buffer var sourceBuffer = rceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

// 监听updateend事件，数据加载完毕就播放视频 ntListener('updateend', function () { tream();

();

});

// 添加缓冲数据，buf是⽤于存储视频数据的缓冲数组 Buffer(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 提供的新特性，但是截⽌⽬前还是处于试验状态。可是，现在已经有许多的⼚商开始使⽤，有⼤⼚的⽀持，⼼⾥稍稍安⼼啦。出处：