FFCreatorLite
A lightweight and fast short video processing library based on node.js
Install / Use
/learn @drawcall/FFCreatorLiteREADME
Overview
FFCreatorLite is a lightweight and flexible short video processing library based on <a href="http://nodejs.org" target="_blank">Node.js</a>. You only need to add some pictures, music or video clips, you can use it to quickly create a very exciting video album.
Nowadays, short video is an increasingly popular form of media communication. Like weishi and tiktok is full of all kinds of wonderful short videos. So how to make users visually create video clips on the web easily and quickly. Or based on pictures Text content, dynamic batch generation of short videos is a technical problem.
FFCreatorLite is developed based on the famous video processing library FFmpeg, and splicing the complicated and tedious command line parameters of FFmpeg (this is not so easy), using FFmpeg various filters and features to realize animation And video clips and generate the final movie. So its processing speed is beyond your imagination, even faster than FFCreator.
For more introduction, please see here
Features
- Based on node.js development, it is very simple to use and easy to expand and develop.
- Only rely on
FFmpeg, easy to install, cross-platform, and low requirements for machine configuration. - The video processing speed is extremely fast, a 5-7 minute video only takes 1 minute.
- Supports multiple elements such as pictures, sounds, video clips, and text.
- Support for adding music and animation to the live stream before launching.
- The latest version supports more than 30 scene transition animations.
- Contains 70% animation effects of
animate.css, which can convert css animation to video.
Demo
<p align="center"> <a href="https://tnfe.github.io/FFCreator/#/guide/lite" style="margin-right:100px"><img width="300" src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/imgs/demo/03.gif?raw=true?raw=true" /></a> <img width="100" src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/imgs/demo/foo.png?raw=true" /> <a href="https://tnfe.github.io/FFCreator/#/guide/lite"><img width="300" src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/imgs/demo/04.gif?raw=true?raw=true" /></a> </p>Useage
Install npm Package
npm install ffcreatorlite --save
Note: To run the preceding commands, Node.js and npm must be installed.
Node.js
const { FFCreatorCenter, FFScene, FFImage, FFText, FFCreator } = require('ffcreatorlite');
// create creator instance
const creator = new FFCreator({
cacheDir,
outputDir,
width: 600,
height: 400,
log: true,
});
// create FFScene
const scene1 = new FFScene();
const scene2 = new FFScene();
scene1.setBgColor('#ff0000');
scene2.setBgColor('#b33771');
// scene1
const fbg = new FFImage({ path: bg1 });
scene1.addChild(fbg);
const fimg1 = new FFImage({ path: img1, x: 300, y: 60 });
fimg1.addEffect('moveInRight', 1.5, 1.2);
scene1.addChild(fimg1);
const text = new FFText({ text: '这是第一屏', font, x: 100, y: 100 });
text.setColor('#ffffff');
text.setBackgroundColor('#000000');
text.addEffect('fadeIn', 1, 1);
scene1.addChild(text);
scene1.setDuration(8);
creator.addChild(scene1);
// scene2
const fbg2 = new FFImage({ path: bg2 });
scene2.addChild(fbg2);
// logo
const flogo = new FFImage({ path: logo, x: 100, y: 100 });
flogo.addEffect('moveInUpBack', 1.2, 0.3);
scene2.addChild(flogo);
scene2.setDuration(4);
creator.addChild(scene2);
creator.addAudio(audio);
creator.start();
creator.on('progress', e => {
console.log(colors.yellow(`FFCreatorLite progress: ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
console.log(
colors.magenta(`FFCreatorLite completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `),
);
});
About Transition
The latest version of ffcreatorlite already supports scene transition animation, which means you can use it to make cool effects like ffcreator.
Of course you need to install 4.3.0 above version of ffmpeg. Because here is the Xfade filter to achieve Animation.
usage
// https://trac.ffmpeg.org/wiki/Xfade
scene.setTransition('diagtl', 1.5);
<table class="wiki">
<tr>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fade.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fade.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fadeblack.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fadeblack.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fadewhite.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/fadewhite.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/distance.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/distance.gif?raw=true"
/></a>
</td>
</tr>
<tr>
<td style="text-align: center"><strong>fade</strong> (default)</td>
<td style="text-align: center">fadeblack</td>
<td style="text-align: center">fadewhite</td>
<td style="text-align: center">distance</td>
</tr>
<tr>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipeleft.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipeleft.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wiperight.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wiperight.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipeup.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipeup.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipedown.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/wipedown.gif?raw=true"
/></a>
</td>
</tr>
<tr>
<td style="text-align: center"><strong>wipeleft</strong></td>
<td style="text-align: center"><strong>wiperight</strong></td>
<td style="text-align: center"><strong>wipeup</strong></td>
<td style="text-align: center"><strong>wipedown</strong></td>
</tr>
<tr>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideleft.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideleft.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideright.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideright.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideup.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slideup.gif?raw=true"
/></a>
</td>
<td style="text-align: center">
<a href="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slidedown.gif?raw=true" style="padding:0; border:none"
><img src="https://github.com/tnfe/FFCreatorLite/blob/master/examples/assets/gif/slidedown.gif?raw=true"
/></a>
</td>
</tr>
<tr>
<td style="text-align: center"><strong>slideleft</strong></td>
<td style="text-align: center"><strong>slideright</strong></td>
<td style="text-align: center"><strong>slideup</strong></td>
<Related Skills
qqbot-channel
344.1kQQ 频道管理技能。查询频道列表、子频道、成员、发帖、公告、日程等操作。使用 qqbot_channel_api 工具代理 QQ 开放平台 HTTP 接口,自动处理 Token 鉴权。当用户需要查看频道、管理子频道、查询成员、发布帖子/公告/日程时使用。
docs-writer
99.8k`docs-writer` skill instructions As an expert technical writer and editor for the Gemini CLI project, you produce accurate, clear, and consistent documentation. When asked to write, edit, or revie
model-usage
344.1kUse CodexBar CLI local cost usage to summarize per-model usage for Codex or Claude, including the current (most recent) model or a full model breakdown. Trigger when asked for model-level usage/cost data from codexbar, or when you need a scriptable per-model summary from codexbar cost JSON.
Design
Campus Second-Hand Trading Platform \- General Design Document (v5.0 \- React Architecture \- Complete Final Version)1\. System Overall Design 1.1. Project Overview This project aims t
