b站的视频进度条悬浮预览视频画面实现方式

1.探究

• 在看b站视频,滑到进度条的时候突发奇想,想知道这个预览图是怎么做到的

• 打开控制台,发现每次移动鼠标悬浮位置的时候都会发出一条网络请求,并且该请求的size显示来源于内存,当时以为每次加载视频的时候先提前把所有预览图都加载好了吗?但是刷新后去看发现只有当鼠标移动的时候才会请求该图片并且来源于内存,然后就开始找这个图片到底什么时候加载的

  
  image.png

• 找了一会,没找到,但是这个图片是某个js加进来的,点进去看js,通过js可以看出图片是canvas生成的

  
  image.png
  image.png

• 通过查canvas的api发现,第一个参数x是一个图片,说明这个图片是来源于别的地方

  
  image.png

• 加上断点调试看

• 发现在渲染图片之前有一条图片请求,里面是类似于雪碧图的一张图片,里面包含了很多张预览图

  
  image.png

• 通过不断移动,发现每一段时间间隔内就会有一个avif格式图片的请求,并且存在一定的规律

  
  image.png

2. 总结

• 实现原理为 将视频按某种规则按照时间段划分开,每一个时间段对应一张预览集合图,滑到某个时间段的时候,去请求图片,并且根据当前鼠标悬浮的位置根据某种规则,截取出来预览集合图中的某个小图,通过canvas绘制出来
• 预览合集图的生成在服务器完成,也就是每个视频上传发布之后,服务器都会读取视频按照规则生成预览图