TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、挪动APP等大前端畛域都有所实际和积攒。
目前团队次要反对腾讯新闻各业务的前端开发，业务开发之余也积攒积淀了一些前端基础设施，赋能业务提效和产品翻新。
团队提倡开源共建，领有各种技术大牛，团队Github地址：https://github.com/tnfe
明天为大家介绍FFCreator，本文作者德莱问 , 我的项目地址: FFCreator
(前言)说点事件
以后兵荒马乱，可是互联网畛域可算是始终盛世。明天咱们所说的是短视频畛域。
短视频已成为一种越来越风行的媒体流传模式。像微视和抖音这种 app，每天都会生产成千上万个精彩短视频。而这些视频也为产品带来了微小的流量。
随之而来，如何让用户能够疾速生产一个短视频；或者产品平台如何利用已有的图片、视频、音乐素材批量合成大量视频就成为一个技术难点。
明天为大家带来的是一个基于node.js的轻量、灵便的短视频制作库。您只须要增加几张图片或视频片段再加一段背景音乐，就能够疾速生成一个很酷的的视频短片。
- github地址：https://github.com/tnfe/FFCreator
- npm地址：https://www.npmjs.com/package/ffcreator
这篇文章将会率领你从头到尾制作一个短视频。
生成我的项目并装置依赖
首先得建一个我的项目，而后执行npm init，一顿回车就好了。
mkdir ffcreator-example && cd ffcreator-examplenpm init接下来进行明天咱们这个包的安装操作
npm install ffcreatororyarn add ffcreator重中之重，ffcreator依赖于FFnpeg，因而必须装置FFmpeg。
FFCreatorLite依赖于FFmpeg>=0.9以上版本。请设置FFmpeg为全局变量, 否则须要应用setFFmpegPath增加FFmpeg本机门路。(windows用户的ffmpeg很可能不在您的%PATH中，因而您必须设置%FFMPEG_PATH)。
装置FFmpeg的教程，我只说下windows和mac的哈，对于其余的在下面github外面有更具体的阐明，之所以只说下windows和mac，因为对于前端开发人员来说，大多数都是mac，也有局部window。对于其余研发人员，如果想尝试的话，能够进到下面github查看其余环境的装置形式。
windows：
共四分步：下载、解压、设置环境变量、应用。
参考文档
mac：
共两局部：
装置homebrew(如已装置，可疏忽，间接进行下一步)：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"应用homebrew装置ffmpeg:
brew install ffmpeg
参考文档
至此，我的项目、环境、依赖都ready了，咱们能够进行下一步的操作了。
对于应用
ffcreator是一个node的库，提供了多种构造函数能够进行应用：
FFScene, // 屏幕,也称场景
// 新建一个显示屏const scene = new FFScene();// 设置背景色 scene.setBgColor('#30336b'); // 设置停留时长 scene.setDuration(8.5); // 设置过渡动画(类型, 工夫)scene.setTransition('Fat', 1.5); // 把屏幕增加到视频发明器实例下面creator.addChild(scene);- FFNode, 上面所有类型的基类，能够间接看上面。
FFText, 文本元素
const text = new FFText({text: '这是一个文字', x: 250, y: 80});// 文字色彩text.setColor('#ffffff'); // 背景色text.setBackgroundColor('#b33771'); // 呈现动画为fadeIn，动画的时长1秒，delay工夫为1秒，text.addEffect("fadeIn", 1, 1); // 设置文本程度居中text.alignCenter(); // 设置款式object text.setStyle({padding: [4, 12, 6, 12]}); // 把以后文本节点增加到屏幕下面scene.addChild(text);FFImage, 图片元素
// 创立一个图片元素，图片门路为../images/demo.pngconst img = new FFImage({path: '../images/demo.png'});// 设置地位 img.setXY(250, 340); // 设置缩放img.setScale(2); // 设置旋转 img.setRotate(45); // 设置透明度 img.setOpacity(0.3); // 设置宽高img.setWH(100, 200); // 设置动画成果// 设置动画成果为slideInDown，动画时长为1.2秒，delay工夫为0img.addEffect("slideInDown", 1.2, 0);// 把以后图片节点增加到屏幕下面scene.addChild(img);FFVideo, 视频元素
// 创立一个视频元素，视频门路为../videos/demo.mp4，地位在屏幕的100和150处// 宽度为500，高度为350.const video = new FFVideo({ path: videopath, x: 100, y: 150, width: 500, height: 350});设置是否有音乐video.setAudio(true); // 设置是否循环播放video.setLoop(true);// 截取播放时长,设置视频播放的开始工夫和完结工夫video.setTimes("00:00:43", "00:00:50");// 独自设置视频播放的开始工夫video.setStartTime("00:00:43"),// 独自设置视频播放的完结工夫video.setEndTime("00:00:50"),// video还有很多其余的办法...// 把以后视频元素增加到屏幕下面scene.addChild(video);FFAlbum, 相册元素
// 新建相册元素。const album = new FFAlbum({ list: [img1, img2, img3, img4], // 相册的图片汇合 x: 250, y: 300, width: 500, height: 300,}); // 设置相册切换动画album.setTransition('zoomIn'); // 设置单张停留时长album.setDuration(2.5); // 设置单张动画时长album.setTransTime(1.5); scene.addChild(album);// 把以后相册元素增加到屏幕下面scene.addChild(video);FFVtuber, 虚构主播形象
const vtuber = new FFVtuber({ x: 100, y: 400 });// 设置动画工夫循环周期vtuber.setPeriod([ [0, 3], [0, 3]]);// 门路设置这里 baby/[d].png 和 baby/%d.png 两种形式均能够const vpath = path.join(__dirname, "./avator/baby/[d].png"); // 从第1-7.pngvtuber.setPath(vpath, 1, 7); // 播放速度vtuber.setSpeed(6); creator.addVtuber(vtuber);FFSubtitle, 字幕元素
const content = '跟计算机工作酷就酷在这里，它们特地听话，说让干什么就干什么...';const subtitle = new FFSubtitle({ text: content, comma: true, // 是否逗号宰割 backgroundColor: '#00219C', // 背景色 color: '#fff', // 文字色彩 fontSize: 24 // 字号});// 设置文案，也能够放到conf里subtitle.setText(content); // 缓存帧subtitle.frameBuffer = 24; // 设置字幕总时长subtitle.setDuration(12); scene.addChild(subtitle);// 设置语音配音-ttssubtitle.setSpeech(dub);- FFTween, 突变
除了下面几种类型之外，还有实例和运行：
FFCreator,// 创立一个实例
const creator = new FFCreator({ cacheDir, // 缓存目录 outputDir, // 输入目录 output, // 输入文件名(FFCreatorCenter中能够不设) width: 500, // 影片宽 height: 680, // 影片高 audioLoop: true, // 音乐循环 fps: 24, // fps threads: 4, // 多线程(伪造)并行渲染 debug: false, // 开启测试模式 defaultOutputOptions: null,// ffmpeg输入选项配置});// 往发明器实例外面增加屏幕creator.addChild(scene);// 发明器的开始函数。启动。creator.start();- FFCreatorCenter, // 外围运行库，通过addTask的形式去运行
// 能够通过这种形式启动多个工作，FFCreatorCenter.addTask(createFFTask)当然也能够不应用FFCreatorCenter，间接运行createFFTask();有demo的哦
- 图片动画：
<video controls="controls" width="350" height="622">
<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/01.mp4"></video>
图片动画demo地址, demo源码地址
- 多图相册：
<video controls="controls" width="350" height="622">
<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/02.mp4"></video>
多图相册demo地址, demo源码地址
- 场景过渡：
<video controls="controls" width="350" height="622">
<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/03.mp4"></video>
场景过渡demo地址, demo源码地址
- 配音字幕：
<video controls="controls" width="350" height="622">
<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/04.mp4"></video>
配音字幕demo地址, demo源码地址
- 视频动画：
<video controls="controls" width="350" height="622">
<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/05.mp4"></video>
视频动画demo地址, demo源码地址
写在最初
短视频横行互联网，何不顺应潮流，用代码去实现短视频的创作呢？
既然能够node实现短视频的发明，何不搭配服务器，实现拖拽组合，可视化生成短视频呢？
这些应该都是能够实现的。
如果你过得高兴，请致力工作使本人更高兴；如果不过得不高兴，请致力工作让本人变得高兴；总之，工作使我高兴~
祝大家工作顺利，天天高兴哦~
感觉还不错的话，点个star再走哇~
团队
TNTWeb - 腾讯新闻前端团队，TNTWeb致力于行业前沿技术摸索和团队成员集体能力晋升。为前端开发人员整顿出了小程序以及web前端技术畛域的最新优质内容，每周更新✨，欢送star，github地址：https://github.com/tnfe/TNT-Weekly