videojs-thumbnails视频缩略图使用（填坑）

╰半橙微兮° 2023-06-19 04:20 75阅读 0赞

### 使用 ###

###         缩略图的使用有两种： ###

> ###    第一种      ###
> 
>            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秒后显示另一个剪切位置的图片
> 
> ![20191204145015996.png][]
> 
> **优点：用户体验良好，只会访问一次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_1.jpg]
> 
> [http://pic27.nipic.com/20130313/9252150\_092049419327\_2.jpg][http_pic27.nipic.com_20130313_9252150_092049419327_1.jpg]
> 
> [http://pic27.nipic.com/20130313/9252150\_092049419327\_3.jpg][http_pic27.nipic.com_20130313_9252150_092049419327_1.jpg]
> 
> [http://pic27.nipic.com/20130313/9252150\_092049419327\_4.jpg][http_pic27.nipic.com_20130313_9252150_092049419327_1.jpg]
> 
> [http://pic27.nipic.com/20130313/9252150\_092049419327\_5.jpg][http_pic27.nipic.com_20130313_9252150_092049419327_1.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);  
>

[20191204145015996.png]: https://img-blog.csdnimg.cn/20191204145015996.png
[http_pic27.nipic.com_20130313_9252150_092049419327_1.jpg]: http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg