初识 HTML5 Video Blob

html-css012

初识 HTML5 Video Blob,第1张

为何会有一个 blob?直接点击这个链接,返回了 404!什么情况?于是对此做了一番探索。

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .

首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来,通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调,可以知晓数据已经加载完毕,然后关闭数据流,调用 Video::play 函数通知浏览器播放视频。至此,整个 Blob 运行机制讲解完毕。

W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的, 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。

综上,这个只是 HTML5 提供的新特性,但是截止目前还是处于试验状态。

在上面示例中使用的视频格式不是普通的 MP4 而是 FMP4 。如果没有注意到这个问题,就可能造成:

HTML5 MediaSource works with some mp4 files and not with others (same codecs)。

解决方案:

It works fine if mp4 is fragmented.

You can do that using Bento4's mp4fragment tool.

我们设计的上传文件大约在500m左右

我第一反应是blob,在HTML5中添加了blob类型用来定义前端较大数据,之前使用过blob流传输视频再使用html5中<video>标签读取blob流,所以blob可以作为这种文件传输的载体,那如何提交呢,使用可formdata提交blob数据,这种方式可以承受较大数据量的文件,但在使用formdata传输的过程中,浏览器会卡死,无法操作。

还是舍友提醒,可采用数据分割的方式,一部分一部分上传。后经百度得知,文件分割要防止数据丢失进行大小校验,以及防止外部入侵,进行分段前端加密,后端校验。

百度发布了一款分割上传的组件web upload,可包含文件分割,大小校验等功能。

网站为: http://fex.baidu.com/webuploader/getting-started.html

佩服我们大学宿舍的技术氛围,出差回来的火车上跟大学舍友在微信上聊了两三个小时的技术,,,那天刚好是大学生开学那几天,路上好多大学生,好怀念自己的大学生活,好怀念与大学舍友谈天说地或技术探讨到深夜的日子

说了几个前端的问题,总结记录一下吧

其中只有一个我会的,,,先说这个问题,其他的我学习完再分享,留坑。。。。。。

这个暂时解释不了。你知道blob是怎么生成出来的就知道为什么我会这么说了。

有人拿到b站的地址也是在中间生成blob的过程里,而不是生成blob后,去反向算出来。

这个真实地址都是在js里面。