npm 包 videojs-framebyframe 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在视频制作中，我们有时需要在某一帧进行切割或添加标记。但是，在市面上不少视频播放器的快进功能画质不好、不够流畅，而且也无法自定快进的步数，因此我们可以使用 npm 包 videojs-framebyframe，这个包提供了精准的依帧快进和快退功能，让我们可以轻松地一帧一帧地调整视频，满足我们的各种需求。

安装和使用

安装 video.js和videojs-framebyframe

npm install --save-dev video.js videojs-framebyframe

引入 video.js 和 videojs-framebyframe 的 CSS 文件

<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="node_modules/videojs-framebyframe/dist/videojs-framebyframe.css" rel="stylesheet">

引入 video.js 和 videojs-framebyframe 的 JS 文件

<script src="node_modules/video.js/dist/video.js"></script>
<script src="node_modules/videojs-framebyframe/dist/videojs-framebyframe.js"></script>

在页面上添加 <video> 元素

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  <source src="my-video.mp4" type="video/mp4" />
</video>

初始化 videojs 和 videojs-framebyframe 插件

var player = videojs('my-video', {
  controlBar: {
    frameByFrame: true // 将 frameByFrame 插件添加到控制条中
  }
});

操作方法

每次按下快进或快退按钮默认增加或减少一帧，可以通过下面的方法修改步长。
```
player.controlBar.frameByFrame.step(2); // 每次增加或减少两帧
```

如果需要精确的切分视频，可以通过以下方法精确定位。

var curTime = player.currentTime(); // 获取当前播放时间
var step = player.controlBar.frameByFrame.frameTime; // 获取每帧的时间
var newTime = curTime < step ? 0 : Math.floor((curTime - step / 2) / step) * step + step; // 计算当前帧的时间
player.currentTime(newTime); // 跳转到精确的时间点

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ---------------------------------------------- -----------------
    ----- ---------------------------------------------------------------------- -----------------
  -------
  ------
    ------ ------------- --------------- ----------------- -------- -------------- ----------- -------------
      ------- ------------------ ---------------- --
    --------
    ------- ---------------------------------------------------
    ------- ------------------------------------------------------------------------------
    --------
      --- ------ - ------------------- -
        ----------- -
          ------------- ---- -- - ------------ ---------
        -
      ---
      --------------------------------------- -- ---------
      ----------------------- -------- -- -
        --- ------- - --------------------- -- --------
        --- ---- - ----------------------------------------- -- -------
        --- ------- - ------- - ---- - - - ------------------- - ---- - -- - ----- - ---- - ----- -- --------
        ---------------------------- -- ---------
      ---
    ---------
  -------
-------

上述代码中，我们对 videojs-framebyframe 进行了多次设置和自定义，可以根据自己的需求进行修改，针对视频自定义一些个性化操作，实现更多的交互。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/193183