HTML5 Video Blob
我的博客搬家到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的更多相关文章
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 隐藏原生html5 video controls
隐藏原生html5 video controls 凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了co ...
- HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
- Chrome/Chromium HTML5 video 视频播放硬件加速
Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...
随机推荐
- Mybatis_遇到的问题汇总
1.The setting logImpl is not known 我在参考某个网站学习mybatis时,出现这个错误,后来找到的原因是因为mybatis的版本(3.1.1)太低,换成3.3.1就没 ...
- [译]NeHe教程 - 你的第一个多边形
原文: Your First Polygon 在第一节中我讲解了如何创建OpenGL窗体.本节我会讲解如何创建三角形和四边形.我们会用GL_TRIANGLES来创建三角形,用GL_GUADS创建四边形 ...
- Jenkins入门(一)
Jenkins就是一个Java Web应用,它主要是干什么呢? 其实很简单: 下载一个jenkins的war包,然后扔到tomcat 的webapps中,启动这个tomcat,访问jenkins应用即 ...
- linux下常用网页查看下载工具--wget
http://www.linuxidc.com/Linux/2015-06/118256.htm 5 个基于Linux命令行的文件下载和网站浏览工具 rTorrent.wget.cURL.w3m.El ...
- My sql 5.7 安装及错误解决
安装MYSQL5.7时,一直不能启动服务,找了N多办法,一直在围绕MY.INI文件来改来改去. 实际情况是,PATH路径设置完成后(计算机——属性—高级设置-环境变量——path),要执行以下命令初始 ...
- 【Atheros】内核调试及网卡加载等问题小结
我做的其他很多工作就比较有针对性了,不是什么大众性的问题,比如加统计代码.实现自己的速率调整算法或者加一些自己的控制什么的,就不再单独介绍了,最后呢再罗列一些小问题,供参考. 1. 加载模块(执行wi ...
- 【python系列】python画报表(Chartkick、Flask)(附中文乱码解决方式)
chartkick 能够画 javascript 报表, 并且比較美观.可是网上搜了下.非常难找到 python 版本号的,于是查了些资料,摸索了下. 对 Flask 也不非常熟悉,这里就仅仅抛砖引玉 ...
- unity视频教程
英雄联盟教程 http://pan.baidu.com/s/1i3rkMS9 密码:bv6r https://pan.baidu.com/share/link?shareid=258985 ...
- 不使用库函数,编写函数int strcmp(char *source, char *dest) 相等返回0,不等返回-1;
答案:一. int strcmp(char *source, char *dest) { /* assert的作用是现计算表达式 expression ,如果其值为假(即为0),那么它先向stder ...
- Sumdiv(较难数学题)
Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 20971 Accepted: 5290 Description Cons ...