我的博客搬家到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. foxmail 客户端 LOGIN Login error password error

    显示这个错误是我在更换电脑时,将E:\Foxmail 7.2\Storage\15167136106@163.com 账户 移动到新的电脑上,并在新电脑上创建用户,总是报:账户或密码错误 我输入的密码 ...

  2. spring 事件驱动模型简介

    事件驱动模型简介 事件驱动模型也就是我们常说的观察者,或者发布-订阅模型:理解它的几个关键点: 首先是一种对象间的一对多的关系:最简单的如交通信号灯,信号灯是目标(一方),行人注视着信号灯(多方): ...

  3. [译]GLUT教程 - 创建和关闭子窗体

    Lighthouse3d.com >> GLUT Tutorial >> Subwindows >> Creating and Destroying Subwind ...

  4. linux 时间与本地时间不对应解决办法

    date -s '2015-01-22 13:00:22' #设置时间 clock -w #写入mac操作系统中 -------------------------------------date - ...

  5. 嵌入式驱动开发之sensor---sensor 图形传感器调试

    图像传感器(image sensor)复位顺序 1. 硬件复位寄存器:2. 软件复位寄存器:3. 设置时钟寄存器:4. 设置PLL倍频:5. 设置分辨率:6. 设置窗口控制:7. 设置输出顺序:8. ...

  6. 安装mingw后,在命令窗体编译c文件

    1.编译test.cpp文件 #include<iostream> int main(int argc,char **argv) {   std::cout<<"he ...

  7. hdu_1226超级密码(BFS)

    超级密码 Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息:密码是 ...

  8. Robbery(记忆化搜索)

    Robbery Inspector Robstop is very angry. Last night, a bank has been robbed and the robber has not b ...

  9. node.js实现国标GB28181设备接入的sip服务器解决方案

    方案背景 在介绍GB28181接入服务器的方案前,咱们先大概给大家介绍一下为什么我们选择了用nodejs开发国标GB28181的服务,我大概给很多人介绍过这个方案,大部分都为之虎躯一震,nodejs在 ...

  10. 小米4s经常断网

    https://zhidao.baidu.com/question/1387985910554061020.html