使用
缩略图的使用有两种：
第一种1、图片只有一张，是通过对视频进行切图后的多张图片进行拼接成一张图片，根据clip: 'rect(0, 240px, 68px, 120px)'对图片进行剪切显示，例如：
video.thumbnails({
0: {
src: '1.jpg',
style: {
left: '-60px',
width: '600px',
height: '68px',
clip: 'rect(0, 120px, 68px, 0)'
}
},
10: {
src: '1.jpg',
style: {
left: '-180px',
clip: 'rect(0, 240px, 68px, 120px)'
}
}
);
0秒开始显示一个剪切位置的图片，10秒后显示另一个剪切位置的图片
优点：用户体验良好，只会访问一次image资源，后端ftp服务器压力小
第二种
2、预先切图，每10秒切一张图片，例如：30分钟的视频，对应的图片为180张，每个时间区间访问显示不同的image资源
//后台获取图片地址集
var imagesListStr='${imagesList}';//数组字符串
if(imagesListStr!=null && imagesListStr!='' && imagesListStr!=undefined ){
//如下对字符串进行切分，并拼接成json对象
var imagesList=new Array();
imagesList=imagesListStr.replace("[","").replace("]","").split(",");
var jsonImages={};
for (var i = 0; i < imagesList.length; i++) {
var json2={};
json2.src=trim(imagesList[i]);
if(i==0){
var json3={};
json3.left="-60px";
json3.width="120px";
json3.height="68px";
json2.style=json3;
}
var ir=i*10;
jsonImages[ir]=json2;
}
// alert(JSON.stringify(jsonImages));
//添加缩略图资源配置
Player.thumbnails(jsonImages);
}多个image资源
http://pic27.nipic.com/20130313/9252150_092049419327_1.jpg
http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg
http://pic27.nipic.com/20130313/9252150_092049419327_3.jpg
缺点：用户体验不佳，虽然浏览器会缓存image，滑动时会请求0-180次后端ftp服务器，在高并发的场景下，后端服务器的网络IO极大，浪费资源，而且在网络不好的情况下缩略图的显示效果就可想而知了
填坑：
videojs.thumbnails.js文件的缩略图显示策略的计算规则错误，在代码152行，
mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);
改为
mouseTime = Math.floor(left / progressControl.width() * duration);
