前言
不得不吐槽一下咯,年终奖发了不到半个月的工资,心醉了,心凉了!不过技术知识是属于自己的东西,有新的想法,学到新的知识还是的总结出来,和大家分享分享!
最近一直在忙公司的项目,主要针对视频播放这一块,说具体点是关于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>
用于显示时间,最终要实现的形式如图下