我的博客搬家到https://www.w2le.com/了

<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

HTML5 Video Blob的更多相关文章

  1. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  2. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  3. 隐藏原生html5 video controls

    隐藏原生html5 video controls 凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了co ...

  4. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  5. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  6. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  7. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  8. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  9. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

随机推荐

  1. Mybatis_遇到的问题汇总

    1.The setting logImpl is not known 我在参考某个网站学习mybatis时,出现这个错误,后来找到的原因是因为mybatis的版本(3.1.1)太低,换成3.3.1就没 ...

  2. [译]NeHe教程 - 你的第一个多边形

    原文: Your First Polygon 在第一节中我讲解了如何创建OpenGL窗体.本节我会讲解如何创建三角形和四边形.我们会用GL_TRIANGLES来创建三角形,用GL_GUADS创建四边形 ...

  3. Jenkins入门(一)

    Jenkins就是一个Java Web应用,它主要是干什么呢? 其实很简单: 下载一个jenkins的war包,然后扔到tomcat 的webapps中,启动这个tomcat,访问jenkins应用即 ...

  4. linux下常用网页查看下载工具--wget

    http://www.linuxidc.com/Linux/2015-06/118256.htm 5 个基于Linux命令行的文件下载和网站浏览工具 rTorrent.wget.cURL.w3m.El ...

  5. My sql 5.7 安装及错误解决

    安装MYSQL5.7时,一直不能启动服务,找了N多办法,一直在围绕MY.INI文件来改来改去. 实际情况是,PATH路径设置完成后(计算机——属性—高级设置-环境变量——path),要执行以下命令初始 ...

  6. 【Atheros】内核调试及网卡加载等问题小结

    我做的其他很多工作就比较有针对性了,不是什么大众性的问题,比如加统计代码.实现自己的速率调整算法或者加一些自己的控制什么的,就不再单独介绍了,最后呢再罗列一些小问题,供参考. 1. 加载模块(执行wi ...

  7. 【python系列】python画报表(Chartkick、Flask)(附中文乱码解决方式)

    chartkick 能够画 javascript 报表, 并且比較美观.可是网上搜了下.非常难找到 python 版本号的,于是查了些资料,摸索了下. 对 Flask 也不非常熟悉,这里就仅仅抛砖引玉 ...

  8. unity视频教程

      英雄联盟教程     http://pan.baidu.com/s/1i3rkMS9 密码:bv6r https://pan.baidu.com/share/link?shareid=258985 ...

  9. 不使用库函数,编写函数int strcmp(char *source, char *dest) 相等返回0,不等返回-1;

    答案:一. int strcmp(char  *source, char *dest) { /* assert的作用是现计算表达式 expression ,如果其值为假(即为0),那么它先向stder ...

  10. Sumdiv(较难数学题)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 20971   Accepted: 5290 Description Cons ...