开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情

前言

上周收到前同事的一个视频分享，据说是公司希望以后以这种方式为公司打一下招牌。看了一下，效果贼炫酷！后来问了下同事怎么操作的，大佬直接甩给我一个链接FFCreator。

有意思，感觉以后可以不用剪辑软件剪辑视频，朋友圈也有素材了。

初识

特性

完全基于node.js开发，非常易于使用，并且易于扩展和开发。
依赖很少、易安装、跨平台，对机器配置要求较低。
视频制作速度极快，一个 5 分钟的视频只需要 1-2 分钟。
支持近百种场景炫酷过渡动画效果。
支持图片、声音、视频剪辑、文本等元素。
支持字幕组件、可以将字幕与语音 tts 结合合成音频新闻。
支持图表组件，可以制作数据可视化类视频。
支持简单（可扩展）的虚拟主播，您可以制作自己的虚拟主播。
包含animate.css90%的动画效果，可以将 css 动画转换为视频。

安装

首先打开官方文档，先添加一下配置。

安装配置

nodejs 安装

[一般前端开发，电脑上应该都会配置，如果没有node，可以进入node官网进行安装](若是想要安装不同版本的node,可以直接下载nvm[node版本管理工具])

安装`FFmpeg`

FFmpeg是领先的多媒体框架，能够解码、编码、转码、多路复用、解复用、流式传输、过滤和播放人类和机器创造的几乎所有内容。它支持最晦涩的古老格式，直到最前沿。无论它们是由某个标准委员会、社区还是公司设计的。它也是高度可移植的：FFmpeg在各种构建环境、机器架构和配置下，在Linux、Mac OS X、Microsoft Windows、BSD、Solaris等平台上编译、运行并通过我们的测试基础设施FATE。文档上给了对应的操作系统的下载链接

**FFmpeg**是一款开源软件，用于生成处理多媒体数据的各类库和程序。FFmpeg可以转码、处理视频和图片（调整视频、图片大小，去噪等）、打包、传输及播放视频。作为最受欢迎的视频和图像处理软件，它被来自各行各业的不同公司所广泛使用。

我需要windows下载，但是该链接并不能正常打开。所以我选择去其FFmpeg官网直接下载，打开之后如下图

会下载一个压缩包，正常解压就可以

打开bin文件夹会有三个exe文件（重要步骤）

复制这三个文件
打开C盘,找到C:\Windows\System32\
粘贴（将第1步复制的三个文件粘贴在这里）
打开cmd，输入FFmpeg,输出下图内容吗，说明插件安装成功

安装ffcreator

npm install ffcreator --save
or
yarn add ffcreator

如何使用

在官方文档中点击：如何使用

FFCreator由creator(入口)、场景(FFScene)、元素(包括图片、视频、字幕等)以及音乐等组成。

一个影片可以添加多个场景, 场景之间可以设置过渡特效动画和停留时长。
一个场景可以添加多个不同元素, 对元素可以添加各自的动画(默认支持animate.css)。
既可以在整个影片上添加背景音乐, 又可以在单个场景上添加声音(适合语音 tts)。

设置入口

const creator = new FFCreator({/*配置参数*/})

创建情景

// 创建情景
const scene = new FFScene();
scene.setBgColor('#30336b');        // 设置背景色
scene.setDuration(8.5);             // 设置停留时长
scene.setTransition('Fat', 1.5);    // 设置过渡动画(类型, 时间)
creator.addChild(scene); // 把情景放在创造器中

图片文字音频视频字幕等

const img = new FFImage(); // 新增图片
const text = new FFText(); // 新增文字
const subtitle = new FFSubtitle() // 新增字幕
....

运行

const path = require('path');
const colors = require('colors');
const shuffle = require('lodash/shuffle');
const { FFCreatorCenter, FFScene, FFText, FFImage, FFCreator } = require('ffcreator');

const width = 600;
const height = 400;
const logo1 = path.join(__dirname, './assets/imgs/01.jpg');
const logo2 = path.join(__dirname, './assets/imgs/02.jpg');
const logo3 = path.join(__dirname, './assets/imgs/03.jpg');
const logo4 = path.join(__dirname, './assets/imgs/04.jpg');
const logo5 = path.join(__dirname, './assets/imgs/allen.jpg');
const outputDir = path.join(__dirname, './output/');
const cacheDir = path.join(__dirname, './cache/');

const creatScene = ({ index, transition, text }) => {
    const scene = new FFScene();
    scene.setBgColor('#ee5d7c');
    scene.setDuration(5);
    scene.setTransition(transition, 1.5);

    // bg img
    const img = path.join(__dirname, `./assets/imgs/trans/0${index}.jpeg`);
    const bg = new FFImage({ path: img, x: width / 2, y: height / 2 });
    bg.addEffect({ type: 'zoomingIn', time: 5 });
    scene.addChild(bg);

    // title text
    const ftext = new FFText({ text, x: width / 2, y: height / 2 + 100, fontSize: 38 });
    ftext.alignCenter();
    ftext.addEffect('fadeInRight', 1, 1.3);
    ftext.setStyle({ color: '#30336b', backgroundColor: '#ffffff', padding: 10 });
    scene.addChild(ftext);

    // add logo2
    const logo = index === 1 ? logo1 : index === 2 ? logo2 : index === 3 ? logo3 : index === 4 ? logo4 : logo5;
    const flogo = new FFImage({ path: logo, x: width / 2, y: height / 2 - 100 });
    flogo.setScale(0.6);
    flogo.addEffect('fadeInLeft', 1, 1);
    scene.addChild(flogo);

    return scene;
};
const trans = shuffle(['Windows4', 'Stretch', 'Radiation', 'TricolorCircle', 'cube']);
const order = ['一', '二', '三', '四', '五'];

// create creator instance
const creator = new FFCreator({
    cacheDir,
    outputDir,
    width,
    height,
    highWaterMark: '10mb',
    frames: 6,
    debug: false,
});

for (let i = 1; i < 6; i++) {
    const transition = trans[i - 1];
    const text = `第${order[i - 1]}个宝贝`;
    const scene = creatScene({ index: i, transition, text });
    creator.addChild(scene);
}

//creator.openLog();
creator.start();

creator.on('start', () => {
    console.log(`FFCreator start`);
});

creator.on('error', e => {
    console.log(`FFCreator error: ${JSON.stringify(e)}`);
});

creator.on('progress', e => {
    console.log(colors.yellow(`FFCreator progress: ${(e.percent * 100) >> 0}%`));
});

creator.on('complete', e => {
    console.log(
        colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `),
    );

    console.log(colors.green(`\n --- You can press the s key or the w key to restart! --- \n`));
});

git: github.com/duxin144361…

END

好久没感受到这种做前端的快乐了！！上一次快乐还是在大学里写出第一个hello world

初识FFCreator——可视化视频加工库

前言

初识

特性

安装