Web端视频时间轴预览图思路
在鼠标首次移动到时间轴上时,获取到一雪碧图,它包含了鼠标所指位置附近的预览画面。在鼠标沿着时间滑动的时候,会根据判断是否需要请求新的雪碧图
接口返回一个数据是让前端拿到视频的预览信息,可以定位到预览图在哪个 URL 的几行几列,后端则负责雪碧图的生成
后端可以通过FFmpeg抽取关键帧
getBoundingClientRect-获取元素的位置
有趣的调试工具PageSpy