%20(2).svg)
项目简介
本项目是基于videojs的视频播放插件，在鼠标悬停于进度条时，能够展示视频截屏雪碧图，让用户更直观地了解视频内容，且支持IE 9+浏览器。
项目的主要特性和功能
- 支持展示单张或多张截屏雪碧图。
- 提供API接口，可定制截屏图路径、宽度、高度及间隔时间。
- 与videojs播放器无缝集成，便于使用与扩展。
安装使用步骤
假设用户已经下载了本项目的源码文件，按照以下步骤操作：
1. 安装依赖，通过npm安装插件：
bash
npm install videojs-thumbnails-sprite-for-videojs6 --save
2. 在项目里引入videojs和该插件的js文件。
3. 在HTML中创建video元素，用videojs初始化播放器。
4. 在播放器实例上调用spriteThumbnails方法，配置路径、宽度、高度和间隔时间等参数。
5. 启动开发服务器，查看视频截屏缩略图效果。
代码演示
基本
为进度条添加单张截屏雪碧图：
js
var player = videojs('videojs-sprite-thumbnails-player');
player.spriteThumbnails({
interval: 1,
path: [
'img/oceans-thumbs.jpg',
],
width: 240,
height: 100,
});
多张截屏雪碧图
视频的截屏雪碧图有多张时，设置图片path为数组：
js
var player = videojs('videojs-sprite-thumbnails-player');
player1.spriteThumbnails({
path: [
'img/thumbnail-1.jpg',
'img/thumbnail-2.jpg'
],
width: 240,
height: 100,
});
API说明
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------- | ---------- |-------|
| path | 截屏雪碧图路径数组，当有多张的时候，按顺序写入 | Array
注意：使用本插件时，需正确引入videojs库和相关依赖，并依项目需求进行适当配置。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】