bilibili ,B站视频预览缩略图实现分析

因为需要对抓取到的B站视频播放源进行预览，所以对B站视频预览进行了分析。

1.设想

我们一般会认为，一个视频入库，首先转码，完成切分。当用户播放时，分片请求，快速响应。请求预览缩略图，会认为是直接传指针在进度条的时间向服务端请求这个时间点的画面，然后在界面显示。
请求画面

2.验证

按照设想，那指针在进度条的每一次移动，都会触发一次请求。然而，现实狠狠地打来一个巴掌。并不是我们想象的那样。页面加载完毕，清空所有请求，在进度条上移动指针，预览画面在变化，但是并没有发起网络请求。
没有网络请求

3.分析

并不是每次移动指针都去请求服务端获取缩略图的。那么，可能会是以下两种情况

页面加载，直接获取到所有的缩略图。
当开始请求缩略图的时候，获取到所有缩略图。

经过验证。是第二种。

4.细节

首先，我们抓到缩略图相关的接口

https://api.bilibili.com/x/player/videoshot?aid=51038128

aid：视频id
返回

// 20190531234022
// https://api.bilibili.com/x/player/videoshot?aid=51038128

{
  "code": 0,
  "message": "0",
  "ttl": 1,
  "data": {
    "pvdata": "//i0.hdslb.com/bfs/videoshot/89359010.bin",
    "img_x_len": 10,
    "img_y_len": 10,
    "img_x_size": 160,
    "img_y_size": 90,
    "image": [
      "//i0.hdslb.com/bfs/videoshot/89359010.jpg"
    ],
    "index": [
      
    ]
  }
}

字段	含义	详细	举例
data	缩略图信息
data.pvdata	一个二进制文件	缩略图，并不是每一秒都对应一张缩略图，而是每一段对应一张，这个字段应该是时间段与缩略图的对应方式	//i0.hdslb.com/bfs/videoshot/89359010.bin
data.img_x_len	每张雪碧图x方向图片数量	雪碧图是一个10*10的网格	10
data.img_y_len	每张雪碧图y方向图片数量	雪碧图是一个10*10的网格	10
data.img_x_size	单个缩略图图片的尺寸	x轴	160
data.img_y_size	单个缩略图图片的尺寸	y轴	90
data.image	雪碧图形式的所有缩略图	是一个数组，一次拿到所有的缩略图	["//i0.hdslb.com/bfs/videoshot/89359010.jpg"]

这个视频的缩略图只有一张雪碧图来存储，像下面这样。

5.验证

我们换一个长一点的视频

https://www.bilibili.com/video/av14326240

那么缩略图请求接口地址如下

https://api.bilibili.com/x/player/videoshot?aid=14326240

响应如下

// 20190531235720
// https://api.bilibili.com/x/player/videoshot?aid=14326240

{
  "code": 0,
  "message": "0",
  "ttl": 1,
  "data": {
    "pvdata": "//i0.hdslb.com/bfs/videoshot/23378913.bin",
    "img_x_len": 10,
    "img_y_len": 10,
    "img_x_size": 160,
    "img_y_size": 90,
    "image": [
      "//i0.hdslb.com/bfs/videoshot/23378913.jpg",
      "//i0.hdslb.com/bfs/videoshot/23378913-1.jpg",
      "//i0.hdslb.com/bfs/videoshot/23378913-2.jpg"
    ],
    "index": [
      
    ]
  }
}

有三张缩略图雪碧图
http://i0.hdslb.com/bfs/videoshot/23378913.jpg

http://i0.hdslb.com/bfs/videoshot/23378913-1.jpg

http://i0.hdslb.com/bfs/videoshot/23378913-2.jpg