简介
@divsbhalala/video-js-thumbnails 是一款基于 Video.js 的 npm 包，用于在视频播放器中显示缩略图预览。它提供了丰富的配置选项，能够让用户自定义缩略图的大小、个数、位置、间隔等等。此外，该包还支持定位到指定时间节点并预览该时间点的缩略图，让用户轻松快速地找到感兴趣的视频片段。
安装
--- ------- ------ --------------------------------
使用
在 HTML 中引入 Video.js
首先，在 HTML 文件中引入 Video.js 的 CSS 和 JS 文件。
----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- -- ------- ------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ---------------------------------
创建视频播放器
接着，在 HTML 文件中添加一个 video 标签，并给它添加 id。
------ ------------- ---------------- -------- -------------- ----------- ------------ ----------------
------- ------------------ -----------------
-- ------------------
-- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ----
-- ----------------------------------------------- ------------------------ ----- ---------
----
--------然后，以该 video 元素作为参数，创建一个 Video.js 实例。
--- ------ - --------------------
导入 @divsbhalala/video-js-thumbnails
接下来，在 JS 文件中导入 @divsbhalala/video-js-thumbnails 包。
------ ----------------- ---- -----------------------------------
配置缩略图
最后，使用 videojsThumbnails 函数来配置缩略图显示的选项。
-------------------
-- -
------- -------------------------- ----- ------------------------- ------
------ -
----- --------- - -------
------ --------
------- ------
-
--
--- -
---- ---------------------------
--
--- -
---- ---------------------------
--
--- -
---- ---------------------------
-
---示例代码
以下是一个完整的示例代码，可以直接复制到 HTML 和 JS 文件中使用。
--------- -----
------
------
----- ----------------
--------------- ------------------
----- ---------------- ------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
----------------------- --
-------
------
------ ------------- ---------------- -------- -------------- ----------- ------------ ----------------
------- ------------------ -----------------
-- ------------------
-- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ----
-- ----------------------------------------------- ------------------------ ----- ---------
----
--------
------- -------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
---------------------------------
------- ------------------------------------------------
--------
--- ------ - --------------------
------ ----------------- ---- -----------------------------------
-------------------
-- -
------- -------------------------- ----- ------------------------- ------
------ -
----- --------- - -------
------ --------
------- ------
-
--
--- -
---- ---------------------------
--
--- -
---- ---------------------------
--
--- -
---- ---------------------------
-
---
---------
-------
-------总结
使用 @divsbhalala/video-js-thumbnails 包能够让开发者在网站中加入缩略图预览功能，提高用户体验。通过本文的介绍，我们了解了如何在 Video.js 中使用该包，并学会了如何在 JS 文件中配置缩略图的显示选项。希望读者能够通过本文掌握缩略图预览的实现方法，并在实际开发中加以应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/194264