--- theme: fancy --- > TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。 > >目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。 > > 团队倡导开源共建，拥有各种技术大牛，团队Github地址：[https://github.com/tnfe](https://github.com/tnfe) > > 今天为大家介绍FFCreator，项目地址: [FFCreator](https://github.com/tnfe/FFCreator) ## (前言)说点事情当前太平盛世，可是互联网领域可算是一直乱世。今天我们所说的是短视频领域。短视频已成为一种越来越流行的媒体传播形式。像微视和抖音这种 app，每天都会生产成千上万个精彩短视频。而这些视频也为产品带来了巨大的流量。随之而来，如何让用户可以快速生产一个短视频；或者产品平台如何利用已有的图片、视频、音乐素材批量合成大量视频就成为一个技术难点。 ![01.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13f5036683434d3eb84f56d3ed693d5b~tplv-k3u1fbpfcp-watermark.image?) 今天为大家带来的是一个基于node.js的轻量、灵活的短视频制作库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的的视频短片。 ![logo.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66c6d008fc4a4956a7e467c21e917ba2~tplv-k3u1fbpfcp-watermark.image) - ### github地址：[https://github.com/tnfe/FFCreator](https://github.com/tnfe/FFCreator) - ### 文档地址：[https://tnfe.github.io/FFCreator/#/](https://tnfe.github.io/FFCreator/#/) ### 这篇文章将会带领你从头到尾制作一个短视频。 ![02.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f734c7beb814577877b2d2439f4d736~tplv-k3u1fbpfcp-watermark.image?) ## 生成项目并安装依赖首先得建一个项目，然后执行npm init，一顿回车就好了。 ``` mkdir ffcreator-example && cd ffcreator-example npm init ``` 接下来进行今天咱们这个包的安装操作 ```js npm install ffcreator or yarn add ffcreator ``` ![a.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1466123c7ee345908e9e059e24c5747e~tplv-k3u1fbpfcp-watermark.image?) `重中之重，ffcreator依赖于FFmpeg，因此必须安装FFmpeg`。 FFCreatorLite依赖于`FFmpeg>=0.9`以上版本。请设置FFmpeg为全局变量, 否则需要使用setFFmpegPath添加FFmpeg本机路径。(windows用户的ffmpeg很可能不在您的`%PATH`中，因此您必须设置`%FFMPEG_PATH`)。安装FFmpeg的教程，我只说下windows和mac的哈，关于其他的在上面github里面有更详细的说明，之所以只说下windows和mac，因为对于前端开发人员来说，大多数都是mac，也有部分window。对于其他研发人员，如果想尝试的话，可以进到上面github查看其他环境的安装方式。 ### windows：共四分步：下载、解压、设置环境变量、使用。 [参考文档](http://blog.gregzaal.com/how-to-install-ffmpeg-on-windows/) ### mac：共两部分： - 安装homebrew(如已安装，可忽略，直接进行下一步)： ```js /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" ``` - 使用homebrew安装ffmpeg: ```js brew install ffmpeg ``` [参考文档](https://trac.ffmpeg.org/wiki/CompilationGuide/macOS) 至此，项目、环境、依赖都ready了，我们可以进行下一步的操作了。 ## 关于使用 ffcreator是一个node的库，提供了多种构造函数可以进行使用： - FFScene, // 屏幕,也称场景 ```js // 新建一个显示屏 const scene = new FFScene(); // 设置背景色 scene.setBgColor('#30336b'); // 设置停留时长 scene.setDuration(8.5); // 设置过渡动画(类型, 时间) scene.setTransition('Fat', 1.5); // 把屏幕添加到视频创造器实例上面 creator.addChild(scene); ``` - FFNode, 下面所有类型的基类，可以直接看下面。 - FFText, 文本元素 ```js 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, 图片元素 ```js // 创建一个图片元素，图片路径为../images/demo.png const 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时间为0 img.addEffect("slideInDown", 1.2, 0); // 把当前图片节点添加到屏幕上面 scene.addChild(img); ``` - FFVideo, 视频元素 ```js // 创建一个视频元素，视频路径为../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, 相册元素 ```js // 新建相册元素。 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, 虚拟主播形象 ```js 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.png vtuber.setPath(vpath, 1, 7); // 播放速度 vtuber.setSpeed(6); creator.addVtuber(vtuber); ``` - FFSubtitle, 字幕元素 ```js 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); // 设置语音配音-tts subtitle.setSpeech(dub); ``` - FFTween, 渐变除了上面几种类型之外，还有实例和运行： - FFCreator,// 创建一个实例 ```js 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的方式去运行 ```js // 可以通过这种方式启动多个任务， FFCreatorCenter.addTask(createFFTask) 当然也可以不使用FFCreatorCenter，直接运行 createFFTask(); ``` ## 有demo的哦 ![a.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/580a4898799040fb80b8c28e089f72ce~tplv-k3u1fbpfcp-watermark.image?) - 图片动画：

[图片动画demo地址](https://tnfe.github.io/FFCreator/#/demo/normal?id=%e5%9b%be%e7%89%87%e5%8a%a8%e7%94%bb), [demo源码地址](https://github.com/tnfe/FFCreator/blob/master/examples/image.js) - 多图相册：

[多图相册demo地址](https://tnfe.github.io/FFCreator/#/demo/normal?id=%e5%a4%9a%e5%9b%be%e7%9b%b8%e5%86%8c), [demo源码地址]( https://github.com/tnfe/FFCreator/blob/master/examples/album.js) - 场景过渡：

[场景过渡demo地址](https://tnfe.github.io/FFCreator/#/demo/normal?id=%e5%9c%ba%e6%99%af%e8%bf%87%e6%b8%a1), [demo源码地址](https://github.com/tnfe/FFCreator/blob/master/examples/transition.js) - 配音字幕：

[配音字幕demo地址](https://tnfe.github.io/FFCreator/#/demo/normal?id=%e9%85%8d%e9%9f%b3%e5%ad%97%e5%b9%95), [demo源码地址](https://github.com/tnfe/FFCreator/blob/master/examples/subtitle.js) - 视频动画：

[视频动画demo地址](https://tnfe.github.io/FFCreator/#/demo/normal?id=%e8%a7%86%e9%a2%91%e5%8a%a8%e7%94%bb), [demo源码地址](https://github.com/tnfe/FFCreator/blob/master/examples/video.js) ![b.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f982a0fad9b46a98ccaf267f2ed794e~tplv-k3u1fbpfcp-watermark.image?) ## 写在最后短视频横行互联网，何不顺应潮流，用代码去实现短视频的创作呢？既然可以node实现短视频的创造，何不搭配服务器，实现拖拽组合，**可视化生成短视频**呢？如果你过得快乐，请努力工作使自己更快乐；如果不过得不快乐，请努力工作让自己变得快乐；总之，工作使我快乐~ 祝大家工作顺利，天天快乐哦~