B 站视频预览是如何实现的？

[hi543]

在 B 站搜索视频时，鼠标移动到视频封面上，会下载一张 WEBP 格式的图片，该图片由多个视频截图合并而成。当鼠标炫富在视频封面上时，会出现一个进度条，左右滑动鼠标时进度条会减少或者增加，继而出现对应的视频截图。

操作步骤：

1. 点我打开视频搜索页面

2. 点我打开 WEBP 图片

3. 操作预览图

---

我的问题是

1. B 站是如何将一张图片切割成视频的预览截图？类似 CSS 的图片定位吗？

2. 我个人尝试过浏览器的开发者工具抓包和断点，暂未找到关键点代码，如何定位到实现问题 1 的关键代码？下面是我尝试定位代码的截图

[luckyrayyy]

不知道 b 站怎么处理的，要是我的话可能视频上传的时候就抽好关键帧保存着，鼠标移上去的时候请求该视频的关键帧就行了。

[misdake]

某一个视频的图片： https://i0.hdslb.com/bfs/videoshot/132560067.jpg@.webp
图片里有很多子图片
把这个图片作为鼠标进入时，上面一个层的 background 。上面这个层上放一个 mousemove 事件，根据鼠标位置，修改 background-position，设置显示哪一张子图片。

[fool079]

看 dom 就知道了，雪碧图

[misdake]

图片生成就和上传时候提示你选择封面那个图一样，在上传之后就会截取一些关键帧，拼成这么一张图保存起来。

[shakeyo]

这肯定是后端生成好了前端直接播放序列帧的

[z5864703]

利用 css 做的，通过 background-position 来定位图片位置

[z5864703]

图片则是取对应位置关键帧，提前生成好的

[gggxxxx]

搭车问问。p 站的预览怎么实现的？
和 b 站不同得是，p 站的预览可播放，而且是集锦的感觉。是 GIF ？感觉精度超出了 GIF 的极限。还是说直接就是一个小的 mp4 ？

[marquina]

@gggxxxx 我记得是 webm

[ungrown]

@gggxxxx #8 以前旧版的是 gif 动图，现在的本质上就是个小视频

[gggxxxx]

@ungrown 感谢，解惑了

[GeekSky]

啥时候油管的视频预览能改进一下，现在还不如 P 站的好。

[287854442]

CDN 能对视频抽关键帧，抽完合并成一张精灵图，web 端解析就行了

[HenryWang0723]

@gggxxxx 兄弟牛 P，我昨天冲浪的时候发现 91 也是这种预览，但是是截取多段组合的

[Huelse]

@gggxxxx #8 b 站的动态里视频也能拖动预览，跟着鼠标动的那种

[gggxxxx]

@Huelse p 站的预览画面是连续的且自动播放，跟足球比赛赛后集锦一样，看过就懂。。。。

[jifengg]

这个图片还有一个对应的 json 文件，按图片名搜索看看，看了 json 内容，怎么实现的也就大概清楚了