html

blob开头的视频地址

自从h5提供了video标签后，只需要设置src属性便可以简单的播放视频。早期src直接指向真实视频地址，同时不会通过referrer等方式防盗链，只要获取了地址就可以随便下载视频。而现在视频网站使用了一些小手段：

blob:https是什么东西？

其实这是在js中给video标签的src属性设置了blob对象，浏览器内部进行处理后展示的src属性值。

它有很多好处，包括简单的防盗链、随时改变视频属性（清晰度）等。

一、怎么获取想要的视频？

目前blob视频基本都是通过先请求一个包含各个视频片段地址的文件，然后分别下载这些视频片段，再连续播放。这个包含视频片段地址的索引文件有mpd、m3u8等格式，代表MPEG DASH和HLS技术。所以一般方法如下：

  1. 先获取这个索引文件（）。
  2. 解析后分别进行请求获取m4s或ts视频片段（注意要将请求的responseType设置为arraybuffer），将其放在一个数组内。
  3. 通过new Blob(fileList, { type: 'video/MP2T' })方法整合为一个视频文件。
  4. 使用URL.createObjectUrl方法将二进制视频转化为blob链接。
  5. 使用a标签的download属性将其变成下载用的标签（目前只有chrome和firefox浏览器支持），调用click事件实现自动下载。

对于m3u8类型的索引文件，这里有一个便捷工具：m3u8下载器

二、怎么自己设置blob对象？

  1. 首先要后台支持返回二进制视频
  2. 在发送请求的时候设置xhr.responseType = 'blob'
  3. 请求成功后设置oVideo.src = 'URL.createObjectURL(res.videoFile)'
1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
    if (xhr.status === 200) {
        var res = xhr.response
        document.querySelector('#videoTest').src = URL.createObjectURL(res.videoFile)
    }
}
xhr.send()