作为一个前端开发人员，你肯定知道视频播放器的重要性。而 video.js 是一个非常流行的开源 HTML5 视频播放器框架，已经被许多知名公司和组织所采用。
但是在实际的开发中，我们常常需要实现视频播放的断点续播功能，以提高用户体验。这时，一个名为 videojs-resume 的 npm 包就非常有必要了。它可以让你方便地在 video.js 播放器中实现断点续播功能。接下来，我们就来一起学习使用 videojs-resume 吧。
安装
在使用 videojs-resume 之前，需要先安装 video.js。如果你还没有安装 video.js，可以通过下面的命令来安装：
npm install video.js
然后安装 videojs-resume：
npm install videojs-resume
安装完成后，你就可以在你的项目中使用 videojs-resume 了。
使用
引入 videojs-resume 插件
在页面中引入 video.js 和 videojs-resume：
<link href="path/to/video-js.min.css" rel="stylesheet"> <script src="path/to/video.min.js"></script> <script src="path/to/videojs-resume.min.js"></script>
创建 video.js 播放器
接下来，创建一个 video.js 播放器：
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="path/to/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>初始化 videojs-resume 插件
最后，在 video.js 播放器上初始化 videojs-resume 插件：
-- -------------------- ---- -------
--- ------ - ------------------- --- ---------- -
--- ------- - -
------- -
-- ----------- ------- ---
-------------------- --------
-
--
-- --- -------------- --
----------------------------
---在这里，我们设置了一个本地 Storage Key 用来保存断点播放位置。这样，即使在关闭页面后重新打开，用户也可以继续上次观看的位置播放视频。
完整示例
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------------------------- -----------------
------- ----------------------------------------------------------
------- --------------------------------------------------------------------------------------------
-------
------
------ ------------- ---------------- -------- -------------- ----------- ------------ ----------------
------- -------------------------- -----------------
-- ------------------
-- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ----
-- ----------------------------------------------- ------------------------ ----- ---------
----
--------
--------
--- ------ - ------------------- --- ---------- -
--- ------- - -
------- -
-- ----------- ------- ---
-------------------- --------
-
--
-- --- -------------- --
----------------------------
---
---------
-------
-------结语
在本文中，我们介绍了如何使用 videojs-resume 实现视频播放器的断点续播功能。通过这个 npm 包，我们可以方便地为我们的视频播放器添加更加人性化的功能，提高用户的体验。希望这篇教程能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcab1b5cbfe1ea0612492