npm 包 @jwdotjs/videoshow 使用教程

介绍

@jwdotjs/videoshow 是一个开源的 npm 包，它用于在 Node.js 环境下生成视频。与现有的视频生成工具不同，@jwdotjs/videoshow 可以方便地控制视频的每一帧，包括添加文字、图片和音乐等。它还支持自定义生成视频所需的编解码器和帧率等属性，可以让你生成自己想要的视频。

安装

使用 npm 进行安装：

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

快速上手

生成视频

在 Node.js 环境下创建一个 js 文件，导入 @jwdotjs/videoshow：

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

接下来，使用以下代码生成一个简单的视频：

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

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

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

这段代码将三张图片拼接成一个视频，视频的宽度为 640 像素，高度不限，一共循环播放 5 次，生成的视频保存为 my-video.mp4。视频的每一帧持续时间为 1/25 秒，即每秒播放 25 帧，视频中的图片会通过向左飞入的动画效果进行过渡。

添加文字和音乐

调用 addText 和 addMusic 函数可添加文字和音乐到视频中，示例代码如下：

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

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

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

这段代码基于上面的代码添加了文字和音乐，其中 addText 函数可以添加文字，并支持对文字样式的自定义。addMusic 函数则支持添加音乐和对音乐进行淡入淡出和延迟播放等控制。

指南

  • 推荐使用 Node.js 版本 >= 8.0。
  • 参考 ffmpeg 文档来确定你需要的编解码器和像素格式。
  • 可以使用环境变量 FFMPEG_PATH 和 FFPROBE_PATH 来指定 ffmpeg 和 ffprobe 的路径。
  • @jwdotjs/videoshow 仅支持在 Node.js 环境下使用，不支持浏览器环境。
  • 使用 videoshow 函数时，第一个参数应该是一个包含图片路径，文字说明和位置的数组。每个元素都要包含一个 path 属性，它表示图片路径。
  • videoshow 函数还支持其他选项，包括 fps、loop、transition 等，具体可以查看官方文档来了解。
  • 可以使用 addText 和 addMusic 函数来添加文字和音乐，其中 addText 函数还支持自定义字体。
  • videoshow 函数返回一个 Promise 对象，可以通过链式调用 addText、addMusic 等函数来修改视频。
  • 可以使用 save 函数将视频保存到本地或写入一个可写流，并监听它的事件来获取生成视频的信息。
  • 生成的视频大概率会比预期的时间长，所以要耐心等待。

示例代码

以下是完整的示例代码：

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

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

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

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

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

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

结论

@jwdotjs/videoshow 是一个非常方便易用的 npm 包，它可以让你在 Node.js 环境下生成自己想要的视频。通过添加文字和音乐，可以让你的视频更加生动有趣。对于需要用到视频生成的应用程序，这个包是一个不错的选择。感谢你阅读本文，希望它能对你有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc5967216659e244373

阅读全文

猜你喜欢

  • npm 包 @jaredhanson/make-node 使用教程

    简介 @jaredhanson/make-node 是一个用于构建 Node.js Native Addon 的简单、易用、灵活的工具。它提供了一组命令行工具，以及一些简单的配置和规则，可以帮助你快速...

    3 年前
  • npm 包 @jazmon/require-env-vars 使用教程

    什么是 @jazmon/require-env-vars 包？ 在开发前端应用程序时，环境变量是非常重要的一个因素。环境变量可以帮助开发人员在不同的环境中配置和管理应用程序的不同方面，例如数据库连接字...

    3 年前
  • npm 包 @jzetlen/bowserify 使用教程

    在前端开发过程中，我们常常需要使用 JavaScript 的模块化打包工具进行开发，其中最常用的是 npm 包管理工具和其插件。本文将介绍一款基于 npm 的 @jzetlen/bowserify，它...

    3 年前
  • npm 包 drag-drop.min.js 使用教程

    什么是 drag-drop.min.js? drag-drop.min.js 是一个基于 JavaScript 的 npm 包，用于处理拖放操作。它提供了一套简易的 API，可以让您轻松地将拖动操作应...

    3 年前
  • npm 包 @jmac18/epoch 使用教程

    什么是 @jmac18/epoch @jmac18/epoch 是一个可视化时间范围选择组件，适用于前端开发项目。它提供了强大的时间选择功能，可以在项目中轻松使用。

    3 年前
  • npm 包 drawing.min.js 使用教程

    在前端开发中，我们经常需要使用绘图工具来展示数据。而 drawing.min.js 是一个轻量级、易于使用的 npm 包，可以帮助我们快速创建各种类型的图形。本教程将向您展示如何使用 drawing....

    3 年前
  • npm 包 @jmfirth/lit-html-redux 使用教程

    在前端开发中，我们常常需要使用状态管理库来管理应用中的数据。Redux 是一个流行的状态管理库，但它通常需要大量的样板代码来完成基本的功能。同时，Lit-html 是一个高效的 DOM 更新库，能够保...

    3 年前
  • npm 包 @jworkshop/loadimage 使用教程

    前言 随着 Web 技术的快速发展，图像的处理和使用越来越频繁和重要。而前端工程师在开发过程中，也需要经常使用到图片的加载和处理。在这个时候，我们就需要使用一些工具来简化这些操作的过程。

    3 年前
  • npm 包 @jp928/react-native-circular-action-menu 使用教程

    前言 @jp928/react-native-circular-action-menu 是一个 React Native 的 npm 包，它通过提供一个圆形动作菜单来帮助您实现界面的美化和交互效果。

    3 年前
  • npm 包 "@joakimbeng/yml-reader" 使用教程

    前言 在 Web 开发中，我们经常需要读取一些 YAML 文件来进行数据渲染或其他操作。但是，JavaScript 并没有原生支持 YAML 文件的解析，因此我们需要借助一些第三方工具来实现这个功能。

    3 年前
  • npm 包 @jnupeter/unirest 使用教程

    前言 在前端开发中，经常需要发起网络请求，以获得后端数据或与后台进行交互。而在 JavaScript 中发起网络请求最常用的方法就是使用 Ajax，而如今我们也可以使用更加简单易用、功能更丰富的 np...

    3 年前
  • Java选择排序

    Java基础实例程序 在这个示例中，我们创建一个java程序，实现使用选择排序对数组元素进行排序。 在选择排序算法中，搜索最低的元素并将其排列到适当的位置。用下一个最小的数字交换当前元素。

    3 年前
  • Java插入排序

    Java基础实例程序 下面我们创建一个java程序，实现使用插入排序对数组元素进行排序。 插入排序对于小元素是有好处的，因为排序大量元素它需要更多的时间。 让我们来看看一个简单的java程...

    3 年前
  • Java气泡排序

    Java基础实例程序 在教程中，将创建一个java程序，使用冒泡排序对数组元素排序。 气泡排序算法也被称为最简单的排序算法。 在冒泡排序算法中，数组从第一个元素遍历到最后一个元素。

    3 年前
  • Java阿姆斯壮数(armstrongnumber) 实例

    Java基础实例程序 Java中的阿姆斯壮数(armstrongnumber) 定义：阿姆斯壮数(armstrongnumber) 是等于其数字的立方数之和的数字，例如：0，1，153，370...

    3 年前
  • Java阶乘实例

    Java基础实例程序 Java中的阶乘程序：n的阶乘是所有正整数的乘积。 n的因子由n!来表示。 例如： -- - ------- - -- -- - --------- - --- ...

    3 年前
  • Java回文实例

    Java基础实例程序 Java中的回文数定义：回文数是反向后与原数字也是相同的数字(即：从左边读和从右边读过来都是同一个数字)。 例如，545,151,3454,343,171,4884都是回...

    3 年前
  • Java素数实例

    Java基础实例程序 质数(prime number)又称素数，有无限个。质数定义是：在大于1的自然数中，除了1和它本身以外不再有其他因数的数称为质数。例如，2，3，5，7，11，13，17 ...

    3 年前
  • Java斐波那契数列实例

    Java基础实例程序 在斐波那契数列中，下一个数字是前两个数字的总和，例如：0,1,1,2,3,5,8,13,21,34,55等。斐波那契数列的前两个数字是0和1，第三个数字是前两个数字的和，...

    3 年前
  • npm 包 @javiercejudo/tap 使用教程

    简介 npm 是一个常用的 JavaScript 包管理器，提供了许多有用的包供前端开发者使用。@javiercejudo/tap 就是其中一个非常实用的包，它提供了一种方便的方式来使用单元测试框架 ...

    3 年前

相关推荐

    暂无文章