基于flowplayer的视频缩略图的视频预览

前言

不得不吐槽一下咯，年终奖发了不到半个月的工资，心醉了，心凉了！不过技术知识是属于自己的东西，有新的想法，学到新的知识还是的总结出来，和大家分享分享！

最近一直在忙公司的项目，主要针对视频播放这一块，说具体点是关于flowplayer的这一块。上一篇《基于web的视频在线编辑》已经简单总结了一下flowplayer的强大功能。今天的主角就是基于flowplayer的视频预览，如何实现？

大家在平时观看视频的视频网站中，比如优酷，爱奇艺，腾讯视频等，鼠标移动至播放条区域的时候，大家可以看到会弹出小的视频预览图片，这样子就可以给用户很好体验，至少可以知道前后播放的内容。最近公司业务需要，就不得不研究了。

本文将从三个方面进行总结

一、设计与逻辑（最重要）

二、优化拓展

三、代码

特别说明：本设计针对flowplayer版本为6.0版本，低于6.0版本在本设计中不适用，后面会简单说到在flowplayer的5.0版本如何设计的问题，整个设计会复杂很多。

一、设计与逻辑

首先有三个问题

（1）鼠标移到flowplayer的播放条上如何获取对应的时间。

（2）在对应的时间又如何获取到该时间点上的视频的缩略图。

（3）如何显示的样式问题，像爱奇艺的缩略图显示一排在播放器区域内显示。

第一个问题

在flowplayer6.0的版本中，flowplayer.min.js其实已经实现获取时间的功能，在官网的demo中，只要鼠标把移至播放的时间轴上，就会出现一个时间。下图是我在官网上的截图。

                                                                             图一

从图上可以看到，鼠标移至00:02时，出现一个div,显示时间，可以在firebug的调试中找到该<div>，其实是,可以针对该div入手。首先，我们可以<div class="fp-timeline-tooltip fp-tooltip">在里面再创建两个<div>。创建之后形式如下

<div class="fp-timeline-tooltip fp-tooltip">
   <div class="fp-thumbnails"></div>
   <div class="fp-seektime" id="fp-seektime"></div>
 </div>

其中， <div class="fp-thumbnails"></div> 用于显示缩略图， <div class="fp-seektime" id="fp-seektime"></div> 用于显示时间，最终要实现的形式如图下