javascript - JS如何实现截取视频某一帧作为预览图呢？

Question

今天登录b站 发现鼠标在视频封面左右滑动时，进度条每变动10%就会更新一次缩略图

很感兴趣这个是如何实现的。想要问下具体的细节

• 自己开F12看两下 貌似是缩略图是上传视频后 由服务器处理截取缩略图并存储，用户鼠标悬停后根据进度条请求图片（我把鼠标从左到右挪动了一遍 看到多了10个请求 应该是缩略图的）但是不太清楚是实时截取并缓存的 还是随着视频上传时就截取保存的。前端新手，可能视频源从别的地方提供啊或者考虑存储的空间啊我都还不是太了解。
  想问下具体的流程大概是什么样的。。以及服务器处理截取缩略图如何实现呢？js的话有没有库可以实现。

希望了解的人讲解下。谢谢。

另外想学习一下js视频播放器的相关知识 有没有推荐入手的点呢？

Answer 1

1. 是上传转码就生成的图片序列

2. 关于js视频播放器，其实可以关注jwplayer这个开源项目，上面也有很多的关于js控制视频播放的文章。

Answer 2

一般都是后端调用ffmpeg截图实现的。

Answer 3

应该是后端做的处理，然后将图片地址返回给前端
如果想学习播放器之类的相关知识，推荐去看下html5的video和audio两个标签的api

Answer 4

如果你视频是放在例如七牛云这种云服务上，他们是有相应的接口来获取某一帧的画面的。

Answer 5

后端用php可以实现，php截取视频指定帧为图片，希望对你有帮助