自从HTML5提供了video标签 ， 在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了 。由于src指向真实的视频 *** 地址 ， 在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次放假回家，就会有亲戚找我帮忙从一些视频网站上下东西） 。
目前的云存储服务商大部分都支持referer防盗链 。其原理就是在访问资源时，请求头会带上发起请求的页面地址，判断其不存在（表示直接访问图片地址）或不在白名单内，即为盗链 。
可是从某个时间开始我们打开调试工具去看各大视频网站的视频src会发现，它们统统变成了这样的形式 。
拿b站的一个视频来看 ， 红框中的视频地址，这个blob是个什么东西？ 。
其实这个Blob URL也不是什么新技术 ， 国内外出来都有一阵子了，但是网上的相关的文章不多也不是很详细，今天就和大家一起分享学习一下 。
Blob和ArrayBuffer
最早是数据库直接用Blob来存储二进制数据对象，这样就不用关注存储数据的格式了 。在web领域，Blob对象表示一个只读原始数据的类文件对象，虽然是二进制原始数据但是类似文件的对象 ， 因此可以像操作文件对象一样操作Blob对象 。
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区 。我们可以通过new ArrayBuffer(length)来获得一片连续的内存空间，它不能直接读写，但可根据需要将其传递到TypedArray视图或 DataView 对象来解释原始缓冲区 。实际上视图只是给你提供了一个某种类型的读写接口，让你可以操作ArrayBuffer里的数据 。TypedArray需指定一个数组类型来保证数组成员都是同一个数据类型，而DataView数组成员可以是不同的数据类型 。
TypedArray视图的类型数组对象有以下几个:
Int8Array：8位有符号整数，长度1个字节 。Uint8Array：8位无符号整数，长度1个字节 。Uint8ClampedArray：8位无符号整数，长度1个字节，溢出处理不同 。Int16Array：16位有符号整数，长度2个字节 。Uint16Array：16位无符号整数，长度2个字节 。Int32Array：32位有符号整数，长度4个字节 。Uint32Array：32位无符号整数，长度4个字节 。Float32Array：32位浮点数，长度4个字节 。Float64Array：64位浮点数，长度8个字节 。Blob与ArrayBuffer的区别是，除了原始字节以外它还提供了mime type作为元数据，Blob和ArrayBuffer之间可以进行转换 。
File对象其实继承自Blob对象，并提供了提供了name ，lastModifiedDate，size ， type 等基础元数据 。
创建Blob对象并转换成ArrayBuffer：
//创建一个以二进制数据存储的html文件const text = "<div>hello world</div>";const blob = new Blob([text], { type: "text/html" }); // Blob {size: 22, type: "text/html"}//以文本读取const textReader = new FileReader();textReader.readAsText(blob);textReader.onload = function() { console.log(textReader.result); // <div>hello world</div>};//以ArrayBuffer形式读取const bufReader = new FileReader();bufReader.readAsArrayBuffer(blob);bufReader.onload = function() { console.log(new Uint8Array(bufReader.result)); // Uint8Array(22) [60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62]};创建一个相同数据的ArrayBuffer ， 并转换成Blob：
//我们直接创建一个Uint8Array并填入上面的数据const u8Buf = new Uint8Array([60, 100, 105, 118, 62, 104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 60, 47, 100, 105, 118, 62]);const u8Blob = new Blob([u8Buf], { type: "text/html" }); // Blob {size: 22, type: "text/html"}const textReader = new FileReader();textReader.readAsText(u8Blob);textReader.onload = function() { console.log(textReader.result); // 同样得到div>hello world</div>};更多Blob和ArrayBuffer的相关内容可以参看下面的资料：
推荐阅读
- 外墙保温板的优点是什么 外墙保温板的优点是什么呢
- 梦到喜欢的人抱自己 梦到喜欢的人抱自己是什么意思
- 梦到自己生不出孩子 梦到自己生不出孩子是什么意思
- 梦到老公的衣服 梦到老公的衣服破了是什么意思
- 梦到打自己的恋人 梦到打自己的恋人什么意思
- 梦到黄色的鞋 梦到黄色的鞋子是什么意思
- 翡翠种水一般什么意思 翡翠的种水的是什么意思
- 苏牧云苏念风是什么电视剧 甜了青梅配竹马电视剧免费观看
- 梦到提包 梦到提包是什么意思
- 梦到不接我电话 梦到不接我电话什么意思