bilibili, B video preview thumbnails station implemented Analysis

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/ucsheep/article/details/90724799

Because of the need to crawl station B preview video sources, the video preview of the B station is analyzed.

1. envisaged

We tend to think, a video storage, transcoding first to complete the segmentation. When the user plays, segment request, fast response. Request a preview thumbnail, it will be considered a direct pointer request screen pass this point in time to the server at the time the progress bar, then displayed on the screen.

2. Verify

It is envisaged that every time progress bar pointer moves in, triggers a request. However, in reality, a harsh call a slap in the face. Not what we expected. The page is loaded, clear all requests, move the pointer on the progress bar, the preview screen is changing, but the network did not initiate the request.
No network request

3. Analyze

Not every service request to move the pointer all clients to obtain thumbnails. So, the following two cases may be

The page loads, directly to all the thumbnails.
When the start request thumbnails obtain all the thumbnails.

after verification. Is the second.

4. details

First, we caught the interface associated thumbnail

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

aid: video id
return

// 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": [
      
    ]
  }
}

Field	meaning	detailed	For example
data	Thumbnail information
data.pvdata	A binary file	Thumbnail, not every second corresponds to a thumbnail, but each section corresponds to one, this field should be a time period corresponding to the thumbnail mode	//i0.hdslb.com/bfs/videoshot/89359010.bin
data.img_x_len	Each Sprite Figure x direction the number of pictures	FIG Sprite is a grid of 10 * 10	10
data.img_y_len	Figure Sprite y direction each picture number	FIG Sprite is a grid of 10 * 10	10
data.img_x_size	Size of the individual image thumbnails	The x-axis	160
data.img_y_size	Size of the individual image thumbnails	y-axis	90
data.image	Thumbnail view of all forms of Sprite	Is an array, once to get all the thumbnails	["//i0.hdslb.com/bfs/videoshot/89359010.jpg"]

This video thumbnails only a Sprite map to store, like this.

5. Verify

We changed a little longer video

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

So thumbnail request interface at the following address

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

Response is as follows

// 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": [
      
    ]
  }
}

There are three thumbnail Sprite Figure
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