登录
基于 Node.js 的短视频制作神器 ——FFCreator
2025年9月7日 22:38
在当今短视频盛行的时代，快速高效地制作短视频成为了很多开发者和内容创作者的需求。FFCreator 就是一款基于 Node.js 的强大短视频制作工具库，它能帮助我们轻松实现短视频的制作与编辑。
一、FFCreator 简介
FFCreator 是一个轻量级、灵活的基于 Node.js 的短视频制作库。它将复杂的视频处理操作封装成简单易用的 API，让开发者只需添加一些图片、音乐或视频片段，就可以快速创建出令人兴奋的视频作品。
二、安装与配置
1.安装前提
-
确保已经安装 Node.js，推荐版本 >= 14。
-
安装 FFmpeg。对于不同系统，安装方式如下：
-
Windows：从 FFmpeg 官网下载对应版本，解压后将其 bin 目录添加到系统环境变量
%PATH%中。 -
Mac OS：可以使用 Homebrew 安装，执行
brew install ffmpeg。 - Linux：如 CentOS、Debian 等，可以通过相关社区文档进行安装部署。
-
Windows：从 FFmpeg 官网下载对应版本，解压后将其 bin 目录添加到系统环境变量
2.安装 FFCreator
- 通过 npm 安装：
npm install ffcreator - 也可通过 yarn 安装：
yarn add ffcreator
3.配置
在使用 FFCreator 时，可能需要根据需求进行一些配置。例如：
const { FFCreator } = require("ffcreator");
// 初始化FFCreator实例
const creator = new FFCreator({
width: 1280, // 视频宽度
height: 720, // 视频高度
fps: 30, // 帧率
render: "gl", // 渲染方式
outputDir: "./videos" // 输出目录
});
三、功能特点
1.丰富的元素支持
- 图片元素（FFImage） ：可加载图片并进行位置、缩放、旋转、透明度等设置。
- 视频元素（FFVideo） ：支持加载视频片段，设置是否有音频、是否循环播放，还能截取特定时长。
- 文本元素（FFText） ：可以创建文本，设置文本内容、颜色、背景色、对齐方式、样式等，并且能添加动画效果。
- 音频元素：能添加全局背景音乐，也可为每个场景单独设置声音或配乐。
- 其他元素：还支持相册元素（FFAlbum）、虚拟主播元素（FFVtuber）等。
2.多样的动画与过渡效果
-
场景过渡动画：内置近百种场景过渡动画效果，如
fade（淡入淡出）等。 -
元素动画效果：兼容
animate.css的大部分动画效果，如fadeIn（淡入）、slideInDown（下滑进入）等，可方便地为元素添加各种动画。
3.其他功能
- 字幕组件：支持添加字幕组件，可与语音 TTS 结合合成音频新闻。
- 图表组件：能够将图表、统计信息等转换为动态视频，方便进行数据可视化展示。
四、使用示例
基本使用流程
const { FFCreator, FFVideo, FFImage, FFText } = require("ffcreator");
const fs = require("fs");
// 初始化FFCreator实例
const creator = new FFCreator({
width: 1280,
height: 720,
fps: 30,
render: "gl",
outputDir: "./videos"
});
// 加载背景音乐
const audioPath = "/path/to/your/audio.mp3";
creator.addAudio({ path: audioPath });
// 创建场景并加载图像
const imagePaths = ["./images/image1.jpg", "./images/image2.jpg"];
imagePaths.forEach((imagePath) => {
const scene = new FFCreator.FFScene();
const image = new FFImage({ path: imagePath });
scene.addChild(image);
// 设置过渡动画
scene.setTransition({ type: "fade", duration: 2000 });
// 将场景添加至FFCreator实例
creator.addScene(scene);
});
// 创建文本场景
const textScene = new FFCreator.FFScene();
const text = new FFText({ text: '这是一个文字', x: 250, y: 80 });
text.setColor('#ffffff');
text.setBackgroundColor('#b33771');
text.addEffect("fadeIn", 1, 1);
text.alignCenter();
textScene.addChild(text);
creator.addScene(textScene);
// 输出设置
const outputPath = "./videos/output.mp4";
creator.output(outputPath)
.then(() => {
console.log("视频生成成功!");
})
.catch((error) => {
console.log("视频生成失败", error);
});
五、拓展应用
1.与前端框架结合
可以与 Vue.js、React 等前端框架结合，开发出可视化的视频制作工具，通过拖拽、选择等操作来制作短视频。比如在 Vue 项目中，利用 FFCreator 实现一个简单的视频制作页面，用户可以在页面上上传图片、视频、音频等素材，设置各种参数，然后调用 FFCreator 的 API 进行视频生成。
以下是一个在 Vue3 项目中利用 FFCreator 实现简单视频制作页面的示例：
1. 创建 Vue 3 项目并安装依赖
确保已安装 Node.js 和 npm，然后使用 Vue CLI 创建项目：
npm install -g @vue/cli
vue create ffcreator - vue3 - video - maker
cd ffcreator - vue3 - video - maker
npm install ffcreator
2. 编写模板（App.vue）
<template>
<div id="app">
<h1>视频制作工具</h1>
<div>
<input type="file" @change="handleFileUpload('image')" accept="image/*" multiple>
<input type="file" @change="handleFileUpload('video')" accept="video/*" multiple>
<input type="file" @change="handleFileUpload('audio')" accept="audio/*">
</div>
<div>
<label for="width">视频宽度:</label>
<input type="number" v - model="width" id="width">
</div>
<div>
<label for="height">视频高度:</label>
<input type="number" v - model="height" id="height">
</div>
<div>
<label for="fps">帧率:</label>
<input type="number" v - model="fps" id="fps">
</div>
<button @click="generateVideo">生成视频</button>
<div v - if="loading">视频生成中...</div>
<div v - if="error">{{ error }}</div>
</div>
</template>
3. 编写逻辑（App.vue的<script setup>部分）
<script setup>
import { ref } from 'vue';
import { FFCreator, FFScene, FFImage, FFVideo } from 'ffcreator';
import fs from 'fs';
import path from 'path';
const width = ref(1280);
const height = ref(720);
const fps = ref(30);
const loading = ref(false);
const error = ref('');
const images = ref<string[]>([]);
const videos = ref<string[]>([]);
const audio = ref<string | null>(null);
const handleFileUpload = (type: string) => (e: Event) => {
const target = e.target as HTMLInputElement;
const files = target.files;
if (files) {
if (type === 'image') {
images.value = Array.from(files).map(file => URL.createObjectURL(file));
} else if (type === 'video') {
videos.value = Array.from(files).map(file => URL.createObjectURL(file));
} else if (type === 'audio') {
audio.value = files.length > 0? URL.createObjectURL(files[0]) : null;
}
}
};
const generateVideo = async () => {
loading.value = true;
error.value = '';
try {
const creator = new FFCreator({
width: width.value,
height: height.value,
fps: fps.value,
render: 'gl',
outputDir: './output'
});
if (audio.value) {
creator.addAudio({ path: audio.value });
}
images.value.forEach((imagePath) => {
const scene = new FFScene();
const image = new FFImage({ path: imagePath });
scene.addChild(image);
creator.addScene(scene);
});
videos.value.forEach((videoPath) => {
const scene = new FFScene();
const video = new FFVideo({ path: videoPath });
scene.addChild(video);
creator.addScene(scene);
});
const outputPath = path.join('./output', 'generated - video.mp4');
await creator.output(outputPath);
console.log('视频生成成功');
} catch (err: any) {
error.value = `视频生成失败: ${err.message}`;
console.error(err);
} finally {
loading.value = false;
}
};
</script>
4. 样式（App.vue）
<style scoped>
#app {
font - family: Avenir, Helvetica, Arial, sans - serif;
-webkit - font - smoothing: antialiased;
-moz - osx - font - smoothing: grayscale;
text - align: center;
color: #2c3e50;
margin - top: 60px;
}
</style>
5.注意事项
-
文件 URL 管理：
URL.createObjectURL生成的 URL 需要在适当的时候释放，例如在组件卸载时，可以使用beforeUnmount钩子函数来 revoke 这些 URL。 - 错误处理：当前的错误处理只是简单地记录和显示错误信息，可以根据实际需求进行更详细的错误处理，如针对不同类型的 FFCreator 错误进行不同提示。
- FFCreator 功能扩展：FFCreator 提供了丰富的功能，如场景过渡、元素动画等，可以进一步扩展此项目，为用户提供更多的视频编辑选项。
- 文件存储与安全性：在实际应用中，建议将上传的文件存储到服务器上，并进行必要的安全性检查，以防止恶意文件上传。
2.批量视频生成
在一些内容创作平台或营销场景中，可能需要批量生成大量短视频。可以利用 FFCreator 结合数据库或文件系统，读取大量的素材数据和配置信息，循环调用 FFCreator 的 API 来批量生成视频，提高工作效率。
以下是一个利用 FFCreator 结合文件系统，根据配置信息批量生成视频的示例：
假设配置信息存储在一个 JSON 文件中，素材文件（图片、视频、音频）存储在特定目录下。
1.示例代码
const FFCreator = require('ffcreator');
const fs = require('fs');
const path = require('path');
// 读取配置文件
const configPath = path.join(__dirname, 'config.json');
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
// 批量生成视频
config.forEach(async (videoConfig) => {
const { width, height, fps, outputPath, scenes } = videoConfig;
const creator = new FFCreator({
width,
height,
fps,
render: 'gl',
outputDir: path.dirname(outputPath)
});
// 添加音频（如果有）
if (videoConfig.audio) {
const audioPath = path.join(__dirname, 'audio', videoConfig.audio);
creator.addAudio({ path: audioPath });
}
// 添加场景
scenes.forEach((scene) => {
const ffScene = new FFCreator.FFScene();
scene.elements.forEach((element) => {
if (element.type === 'image') {
const imagePath = path.join(__dirname, 'images', element.path);
const img = new FFCreator.FFImage({ path: imagePath });
// 设置元素的属性，如位置、缩放等
if (element.x) img.setX(element.x);
if (element.y) img.setY(element.y);
if (element.scale) img.setScale(element.scale);
ffScene.addChild(img);
} else if (element.type === 'video') {
const videoPath = path.join(__dirname, 'videos', element.path);
const vid = new FFCreator.FFVideo({ path: videoPath });
// 设置视频元素的属性，如开始时间、时长等
if (element.startTime) vid.setStartTime(element.startTime);
if (element.duration) vid.setDuration(element.duration);
ffScene.addChild(vid);
} else if (element.type === 'text') {
const text = new FFCreator.FFText({ text: element.content });
// 设置文本元素的属性，如颜色、位置等
if (element.color) text.setColor(element.color);
if (element.x) text.setX(element.x);
if (element.y) text.setY(element.y);
ffScene.addChild(text);
}
});
// 设置场景过渡
if (scene.transition) {
ffScene.setTransition(scene.transition);
}
creator.addScene(ffScene);
});
try {
await creator.output(outputPath);
console.log(`视频 ${outputPath} 生成成功`);
} catch (error) {
console.error(`视频 ${outputPath} 生成失败:`, error);
}
});
2.配置文件示例 (config.json)
[
{
"width": 1280,
"height": 720,
"fps": 30,
"outputPath": "output/vid1.mp4",
"audio": "audio1.mp3",
"scenes": [
{
"transition": {
"type": "fade",
"duration": 2000
},
"elements": [
{
"type": "image",
"path": "image1.jpg",
"x": 100,
"y": 100,
"scale": 0.8
}
]
},
{
"elements": [
{
"type": "video",
"path": "video1.mp4",
"startTime": 0,
"duration": 5
}
]
},
{
"elements": [
{
"type": "text",
"content": "这是一段文字",
"color": "#ffffff",
"x": 500,
"y": 300
}
]
}
]
},
{
"width": 1920,
"height": 1080,
"fps": 25,
"outputPath": "output/vid2.mp4",
"scenes": [
{
"elements": [
{
"type": "image",
"path": "image2.jpg"
}
]
}
]
}
]
3.说明
-
配置文件：
config.json文件定义了每个视频的参数，包括视频尺寸、帧率、输出路径、音频文件以及每个场景的元素和过渡效果。 -
文件路径：代码假设素材文件（图片、视频、音频）分别存储在
images、videos和audio目录下，根据实际情况调整路径。 - FFCreator 配置：根据配置信息初始化 FFCreator 实例，并添加音频、场景和元素。每个元素的属性根据配置进行设置。
- 错误处理：在生成视频时捕获错误，并打印错误信息，以便调试。
3.与其他工具集成
可以与图像编辑工具、音频处理工具等其他相关工具集成。例如，在生成视频前，先使用图像编辑工具对图片进行预处理，或者使用音频处理工具对音频进行混音、降噪等操作，然后再将处理后的素材交给 FFCreator 进行视频制作，以实现更复杂、更专业的视频制作需求。
