Bilibili，B站视频缩略图快速预览实现再分析

之前的这篇文章曾经有过一次分析
在B站视频搜索结果中，可以在不进入视频的状态下对视频快速预览。如果你对这方面有兴趣，可以和我们一群程序员交流学习，共同进步

695623459

今天详细分析和复现一下实现过程

1.首先，获取某视频的完整缩略图资源

通过下面接口获取

https://api.bilibili.com/x/player/videoshot?index=1&aid=XXX

以 https://www.bilibili.com/video/av8370807 为例
aid = 8370807
接口返回数据如下

{
	"code": 0,
	"message": "0",
	"ttl": 1,
	"data": {
		"pvdata": "//i0.hdslb.com/bfs/videoshot/13778135.bin",
		"img_x_len": 10,
		"img_y_len": 10,
		"img_x_size": 160,
		"img_y_size": 90,
		"image": ["//i0.hdslb.com/bfs/videoshot/13778135.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-1.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-2.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-3.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-4.jpg"],
		"index": [0, 0, 12, 25, 37, 50, 62, 75, 87, 100, 112, 125, 137, 150, 162, 175, 187, 200, 212, 225, 237, 250, 262, 275, 287, 300, 312, 325, 337, 350, 362, 375, 387, 400, 412, 425, 437, 450, 462, 475, 487, 500, 512, 525, 537, 550, 562, 575, 587, 600, 612, 625, 637, 650, 662, 675, 687, 700, 712, 725, 737, 750, 762, 775, 787, 800, 812, 825, 837, 850, 862, 875, 887, 900, 912, 925, 937, 950, 962, 975, 987, 1000, 1012, 1025, 1037, 1050, 1062, 1075, 1087, 1100, 1112, 1125, 1137, 1150, 1162, 1175, 1187, 1200, 1212, 1225, 1237, 1250, 1262, 1275, 1287, 1300, 1312, 1325, 1337, 1350, 1362, 1375, 1387, 1400, 1412, 1425, 1437, 1450, 1462, 1475, 1487, 1500, 1512, 1525, 1537, 1550, 1562, 1575, 1587, 1600, 1612, 1625, 1637, 1650, 1662, 1675, 1687, 1700, 1712, 1725, 1737, 1750, 1762, 1775, 1787, 1800, 1812, 1825, 1837, 1850, 1862, 1875, 1887, 1900, 1912, 1925, 1937, 1950, 1962, 1975, 1987, 2000, 2012, 2025, 2037, 2050, 2062, 2075, 2087, 2100, 2112, 2125, 2137, 2150, 2162, 2175, 2187, 2200, 2212, 2225, 2237, 2250, 2262, 2275, 2287, 2300, 2312, 2325, 2337, 2350, 2362, 2375, 2387, 2400, 2412, 2425, 2437, 2450, 2462, 2475, 2487, 2500, 2512, 2525, 2537, 2550, 2562, 2575, 2587, 2600, 2612, 2625, 2637, 2650, 2662, 2675, 2687, 2700, 2712, 2725, 2737, 2750, 2762, 2775, 2787, 2800, 2812, 2825, 2837, 2850, 2862, 2875, 2887, 2900, 2912, 2925, 2937, 2950, 2962, 2975, 2987, 3000, 3012, 3025, 3037, 3050, 3062, 3075, 3087, 3100, 3112, 3125, 3137, 3150, 3162, 3175, 3187, 3200, 3212, 3225, 3237, 3250, 3262, 3275, 3287, 3300, 3312, 3325, 3337, 3350, 3362, 3375, 3387, 3400, 3412, 3425, 3437, 3450, 3462, 3475, 3487, 3500, 3512, 3525, 3537, 3550, 3562, 3575, 3587, 3600, 3612, 3625, 3637, 3650, 3662, 3675, 3687, 3700, 3712, 3725, 3737, 3750, 3762, 3775, 3787, 3800, 3812, 3825, 3837, 3850, 3862, 3875, 3887, 3900, 3912, 3925, 3937, 3950, 3962, 3975, 3987, 4000, 4012, 4025, 4037, 4050, 4062, 4075, 4087, 4100, 4112, 4125, 4137, 4150, 4162, 4175, 4187, 4200, 4212, 4225, 4237, 4250, 4262, 4275, 4287, 4300, 4312, 4325, 4337, 4350, 4362, 4375, 4387, 4400, 4412, 4425, 4437, 4450, 4462, 4475, 4487, 4500, 4512, 4525, 4537, 4550, 4562, 4575, 4587, 4600, 4612, 4625, 4637, 4650, 4662, 4675, 4687, 4700, 4712, 4725, 4737, 4750, 4762, 4775, 4787, 4800, 4812, 4825, 4837, 4850, 4862, 4875, 4887, 4900, 4912, 4925, 4937, 4950, 4962, 4975, 4987, 5000, 5012, 5025, 5037, 5050, 5062, 5075, 5087]
	}
}

2.分析与结论

首先，该视频时长84分49秒，共计5089秒

"image": ["//i0.hdslb.com/bfs/videoshot/13778135.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-1.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-2.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-3.jpg", "//i0.hdslb.com/bfs/videoshot/13778135-4.jpg"],

一共5张雪碧图，共计408项小缩略图

"index": [0, 0, 12, 25, 37, 50, 62, 75, 87, 100, 112, 125, 137, 150, 162, 175, 187, 200, 212, 225, 237, 250, 262, 275, 287, 300, 312, 325, 337, 350, 362, 375, 387, 400, 412, 425, 437, 450, 462, 475, 487, 500, 512, 525, 537, 550, 562, 575, 587, 600, 612, 625, 637, 650, 662, 675, 687, 700, 712, 725, 737, 750, 762, 775, 787, 800, 812, 825, 837, 850, 862, 875, 887, 900, 912, 925, 937, 950, 962, 975, 987, 1000, 1012, 1025, 1037, 1050, 1062, 1075, 1087, 1100, 1112, 1125, 1137, 1150, 1162, 1175, 1187, 1200, 1212, 1225, 1237, 1250, 1262, 1275, 1287, 1300, 1312, 1325, 1337, 1350, 1362, 1375, 1387, 1400, 1412, 1425, 1437, 1450, 1462, 1475, 1487, 1500, 1512, 1525, 1537, 1550, 1562, 1575, 1587, 1600, 1612, 1625, 1637, 1650, 1662, 1675, 1687, 1700, 1712, 1725, 1737, 1750, 1762, 1775, 1787, 1800, 1812, 1825, 1837, 1850, 1862, 1875, 1887, 1900, 1912, 1925, 1937, 1950, 1962, 1975, 1987, 2000, 2012, 2025, 2037, 2050, 2062, 2075, 2087, 2100, 2112, 2125, 2137, 2150, 2162, 2175, 2187, 2200, 2212, 2225, 2237, 2250, 2262, 2275, 2287, 2300, 2312, 2325, 2337, 2350, 2362, 2375, 2387, 2400, 2412, 2425, 2437, 2450, 2462, 2475, 2487, 2500, 2512, 2525, 2537, 2550, 2562, 2575, 2587, 2600, 2612, 2625, 2637, 2650, 2662, 2675, 2687, 2700, 2712, 2725, 2737, 2750, 2762, 2775, 2787, 2800, 2812, 2825, 2837, 2850, 2862, 2875, 2887, 2900, 2912, 2925, 2937, 2950, 2962, 2975, 2987, 3000, 3012, 3025, 3037, 3050, 3062, 3075, 3087, 3100, 3112, 3125, 3137, 3150, 3162, 3175, 3187, 3200, 3212, 3225, 3237, 3250, 3262, 3275, 3287, 3300, 3312, 3325, 3337, 3350, 3362, 3375, 3387, 3400, 3412, 3425, 3437, 3450, 3462, 3475, 3487, 3500, 3512, 3525, 3537, 3550, 3562, 3575, 3587, 3600, 3612, 3625, 3637, 3650, 3662, 3675, 3687, 3700, 3712, 3725, 3737, 3750, 3762, 3775, 3787, 3800, 3812, 3825, 3837, 3850, 3862, 3875, 3887, 3900, 3912, 3925, 3937, 3950, 3962, 3975, 3987, 4000, 4012, 4025, 4037, 4050, 4062, 4075, 4087, 4100, 4112, 4125, 4137, 4150, 4162, 4175, 4187, 4200, 4212, 4225, 4237, 4250, 4262, 4275, 4287, 4300, 4312, 4325, 4337, 4350, 4362, 4375, 4387, 4400, 4412, 4425, 4437, 4450, 4462, 4475, 4487, 4500, 4512, 4525, 4537, 4550, 4562, 4575, 4587, 4600, 4612, 4625, 4637, 4650, 4662, 4675, 4687, 4700, 4712, 4725, 4737, 4750, 4762, 4775, 4787, 4800, 4812, 4825, 4837, 4850, 4862, 4875, 4887, 4900, 4912, 4925, 4937, 4950, 4962, 4975, 4987, 5000, 5012, 5025, 5037, 5050, 5062, 5075, 5087]

index一共408项，0到5087递增

我们有如下发现

• index的长度 = 缩略图数量
• index的最大值 <= 视频总时长
• index的最大值 ≈ 视频总时长

不难推断出如下结论：

假设存在一个int类型的数 i，且 i < index.length
则 index[i] 的值代表第 i+1个缩略图(索引为i的缩略图)的时间起始点
则 index[i+1] 的值代表第 i+1个缩略图(索引为i的缩略图)的时间结束点
当i = index.length-1时，时间结束点为视频总时长