前言
在视频制作中，我们有时需要在某一帧进行切割或添加标记。但是，在市面上不少视频播放器的快进功能画质不好、不够流畅，而且也无法自定快进的步数，因此我们可以使用 npm 包 videojs-framebyframe，这个包提供了精准的依帧快进和快退功能，让我们可以轻松地一帧一帧地调整视频，满足我们的各种需求。
安装和使用
安装
video.js和videojs-framebyframe--- ------- ---------- -------- --------------------
引入
video.js和videojs-framebyframe的 CSS 文件----- ---------------------------------------------- ----------------- ----- ---------------------------------------------------------------------- -----------------
引入
video.js和videojs-framebyframe的 JS 文件------- --------------------------------------------------- ------- ------------------------------------------------------------------------------
在页面上添加
<video>元素------ ------------- --------------- ----------------- -------- -------------- ----------- ------------- ------- ------------------ ---------------- -- --------
初始化 videojs 和 videojs-framebyframe 插件
--- ------ - ------------------- - ----------- - ------------- ---- -- - ------------ --------- - ---
操作方法
每次按下快进或快退按钮默认增加或减少一帧，可以通过下面的方法修改步长。
--------------------------------------- -- ---------
如果需要精确的切分视频，可以通过以下方法精确定位。
--- ------- - --------------------- -- -------- --- ---- - ----------------------------------------- -- ------- --- ------- - ------- - ---- - - - ------------------- - ---- - -- - ----- - ---- - ----- -- -------- ---------------------------- -- ---------
示例代码
--------- -----
------
------
----- ---------------------------------------------- -----------------
----- ---------------------------------------------------------------------- -----------------
-------
------
------ ------------- --------------- ----------------- -------- -------------- ----------- -------------
------- ------------------ ---------------- --
--------
------- ---------------------------------------------------
------- ------------------------------------------------------------------------------
--------
--- ------ - ------------------- -
----------- -
------------- ---- -- - ------------ ---------
-
---
--------------------------------------- -- ---------
----------------------- -------- -- -
--- ------- - --------------------- -- --------
--- ---- - ----------------------------------------- -- -------
--- ------- - ------- - ---- - - - ------------------- - ---- - -- - ----- - ---- - ----- -- --------
---------------------------- -- ---------
---
---------
-------
-------上述代码中，我们对 videojs-framebyframe 进行了多次设置和自定义，可以根据自己的需求进行修改，针对视频自定义一些个性化操作，实现更多的交互。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/193183