FFCreator 是一个基于Node.js的轻量级、灵活的短视频处理库。您只需要添加一些图片、音乐或视频片段,就可以使用它快速创建一个非常精彩的视频相册。
如今,短视频是一种越来越流行的媒体传播形式。像微视和抖音一样充满了各种精彩的短视频。那么如何让用户直观地在网络上轻松快速地创建视频剪辑。或者基于图片文本内容,动态批量生成短视频是一个技术问题。
FFCreator是一种轻量级且灵活的解决方案,需要很少的依赖项和低机器配置即可快速开始工作。并且模拟了 90% 的动画效果animate.css。您可以轻松地将网页端的动画效果转换为视频。
使用FFCreator和vue.js,您可以开发一个通过拖放构建视频的Web项目,就像h5构建工具一样,github地址:https://github.com/tnfe/shida。
当您需要处理大量视频片段并需要更快的合成速度时,FFCreatorLite是一个更好的选择,github地址:https://github.com/drawcall/FFCreatorLite
https://github.com/tnfe/FFCreator
安装 npm 包
npm install ffcreator --save
注意:要运行上述命令,必须安装 Node.js 和 npm。
示例代码:
const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");
// Create FFCreator instance
const creator = new FFCreator({
cacheDir,
outputDir,
width: 800,
height: 450
});
// Create scene
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);
// Create Image and add animation effect
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);
// Create Text
const text = new FFText({ text: "hello 你好", x: 400, y: 300 });
text.setColor("#ffffff");
text.setBackgroundColor("#000000");
text.addEffect("fadeIn", 1, 1);
scene.addChild(text);
// Create a multi-photo Album
const album = new FFAlbum({
list: [img1, img2, img3, img4], // Picture collection for album
x: 250,
y: 300,
width: 500,
height: 300,
});
album.setTransition('zoomIn'); // Set album switching animation
album.setDuration(2.5); // Set the stay time of a single sheet
album.setTransTime(1.5); // Set the duration of a single animation
scene.addChild(album);
// Create Video
const video = new FFVideo({ path, x: 300, y: 50, width: 300, height: 200 });
video.addEffect("zoomIn", 1, 0);
scene.addChild(video);
creator.output(path.join(__dirname, "../output/example.mp4"));
creator.start(); // Start processing
creator.closeLog(); // Close log (including perf)
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.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
});
网友回复
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流?