前言
dplayer-thumbnails 是一个在 DPlayer 播放器中添加缩略图播放功能的 npm 包。它可以让用户在播放视频的同时，查看视频的缩略图，并快速跳转到相应的时间点。本篇文章将从使用流程、安装和配置、实现原理等多个方面，来介绍并解析这个 npm 包。
基本用法
安装 dplayer-thumbnails：
npm install dplayer-thumbnails --save
引入包并初始化：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ --------------------- -- ------- - ------- --- ----- ------- - - -- --- -------- - - ----- ------------- -------- - -- ---- --- -- ---- - -------------------- -------------------- ------------------- -- -- ------------ -- -------------- -- -- -- - - ----- --- --- - ---- -- - - ----- --- --- - ---- -- -- - ----- --- -------- ------ ---- ------- --- -------------- --- ---------- -- -- -------- -------- - ------ ----- -------- - - - -- ----- ------ - --- -----------------初始化的过程非常简单，只需要在 options.plugins 数组中添加一个名为 "thumbnails" 的插件，并在其中加入缩略图的 URL 列表和时间点列表就行了。需要注意的是，"thumbnails" 插件的 options 属性必须要设定。
最后，打开你的页面，就可以看到具有缩略图功能的 DPlayer 播放器了。
安装和配置
dplayer-thumbnails 的安装非常简便，只需要执行以下命令就可以了：
npm install dplayer-thumbnails --save
配置该组件需要在 DPlayer 配置对象中添加一个特定的 plugins 属性，其中包括 name 和 options 两个属性。name 表示你需要添加的插件名称，options 是缩略图配置选项。包括以下几个配置选项：
- url: 缩略图的 URL 列表，需要严格按照视频的时间顺序添加；
- rowTimeOffset: 每一行的时间长度，单位为秒；
- rowLength: 每一行显示缩略图的个数；
- width: 缩略图的宽度；
- height: 缩略图的高度；
- type: 进度条类型，分为 'normal' 和 'fill'。
实现原理
- 将缩略图 URL 列表按照视频的时间顺序自动切分成若干行，每一行存储 rowLength 张缩略图；
- 为了让缩略图在不同行之间有对齐的效果，需要对不足 rowLength 张缩略图的数据行，用空白图片填充至 rowLength 张；
- 根据播放器当前的时间点和总长度等信息，计算出当前应该显示哪一行数据和第几张缩略图，然后进行显示。
示例代码
-- -------------------- ---- -------
------ ------- ---- ----------
------ ---------------------
----- ------- - -
---------- -----------------------------------
--------- ------
------ -
---- -------------------------------------------------------------------------------------
----- -------
---- ----------------------------------------------------
--
------------ -
-- ---
--
-------- -
-
----- -------------
-------- -
---- -
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
----------------------------------------------------
---------------------------------------------------
--
-------------- ---
---------- --
------ ----
------- ---
----- --------
-
-
-
--
----- -- - --- -----------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d581e8991b448e4959