简介
@divsbhalala/video-js-thumbnails 是一款基于 Video.js 的 npm 包，用于在视频播放器中显示缩略图预览。它提供了丰富的配置选项，能够让用户自定义缩略图的大小、个数、位置、间隔等等。此外，该包还支持定位到指定时间节点并预览该时间点的缩略图，让用户轻松快速地找到感兴趣的视频片段。
安装
npm install --save @divsbhalala/video-js-thumbnails
使用
在 HTML 中引入 Video.js
首先，在 HTML 文件中引入 Video.js 的 CSS 和 JS 文件。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.min.css" integrity="sha512-+Hp1dGjdpwaxhLnzlet+j+8/+cKjUpgmzfMfrHQJZhZ9AZQm+1mwmKwfnhPNmtnyGb/8KdhiD+gqnQJZsHsRjg==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js" integrity="sha512-eU6gHCASG2jK6C0Hhm2WPI6NTJvV5a5NEO9YV7dn5dJp5wzIolfjKDOuWdV8+58ntI4b3OXg97n/16U6pnqpHw==" crossorigin="anonymous"></script>
创建视频播放器
接着，在 HTML 文件中添加一个 video 标签，并给它添加 id。
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}"> <source src="MY_VIDEO.mp4" type='video/mp4'> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video>
然后，以该 video 元素作为参数，创建一个 Video.js 实例。
var player = videojs('my-video');
导入 @divsbhalala/video-js-thumbnails
接下来，在 JS 文件中导入 @divsbhalala/video-js-thumbnails 包。
import videojsThumbnails from '@divsbhalala/video-js-thumbnails';
配置缩略图
最后，使用 videojsThumbnails 函数来配置缩略图显示的选项。
-- -------------------- ---- ------- ------------------- -- - ------- -------------------------- ----- ------------------------- ------ ------ - ----- --------- - ------- ------ -------- ------- ------ - -- --- - ---- --------------------------- -- --- - ---- --------------------------- -- --- - ---- --------------------------- - ---展开代码
示例代码
以下是一个完整的示例代码，可以直接复制到 HTML 和 JS 文件中使用。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------------------ ----- ---------------- ------------------------------------------------------------------------------ ----------------------------------------------------------------------------------------------------------- ----------------------- -- ------- ------ ------ ------------- ---------------- -------- -------------- ----------- ------------ ---------------- ------- ------------------ ----------------- -- ------------------ -- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ---- -- ----------------------------------------------- ------------------------ ----- --------- ---- -------- ------- ------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- --------------------------------- ------- ------------------------------------------------ -------- --- ------ - -------------------- ------ ----------------- ---- ----------------------------------- ------------------- -- - ------- -------------------------- ----- ------------------------- ------ ------ - ----- --------- - ------- ------ -------- ------- ------ - -- --- - ---- --------------------------- -- --- - ---- --------------------------- -- --- - ---- --------------------------- - --- --------- ------- -------展开代码
总结
使用 @divsbhalala/video-js-thumbnails 包能够让开发者在网站中加入缩略图预览功能，提高用户体验。通过本文的介绍，我们了解了如何在 Video.js 中使用该包，并学会了如何在 JS 文件中配置缩略图的显示选项。希望读者能够通过本文掌握缩略图预览的实现方法，并在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194264
