TNTweb - 全称腾讯新闻前端团队, 组内小伙伴在 Web 前端, Node.JS 开发, UI 设计, 移动 App 等大前端领域都有所实践和积累.
目前团队主要支持腾讯新闻各业务的前端开发, 业务开发之余也积累沉淀了一些前端基础设施, 赋能业务提效和产品创新. 团队倡导开源共建, 拥有各种技术大牛, 团队 GitHub 地址: https://github.com/tnfe
今天为大家介绍 FFCreator, 本文作者德莱问 https://github.com/dravenww , 项目地址: https://github.com/tnfe/FFCreator
(前言)说点事情
当前太平盛世, 可是互联网领域可算是一直乱世. 今天我们所说的是短视频领域.
短视频已成为一种越来越流行的媒体传播形式. 像微视 https://weishi.qq.com/ 和抖音这种 App, 每天都会生产成千上万个精彩短视频. 而这些视频也为产品带来了巨大的流量.
随之而来, 如何让用户可以快速生产一个短视频; 或者产品平台如何利用已有的图片, 视频, 音乐素材批量合成大量视频就成为一个技术难点.
今天为大家带来的是一个基于 node.JS http://nodejs.org/ 的轻量, 灵活的短视频制作库. 您只需要添加几张图片或视频片段再加一段背景音乐, 就可以快速生成一个很酷的的视频短片.
image.PNG
GitHub 地址: https://github.com/tnfe/FFCreator
NPM 地址: https://www.npmjs.com/package/ffcreator
这篇文章将会带领你从头到尾制作一个短视频.
生成项目并安装依赖
首先得建一个项目, 然后执行 NPM init, 一顿回车就好了.
- mkdir ffcreator-example && cd ffcreator-example
- NPM init
接下来进行今天咱们这个包的安装操作
- NPM install ffcreato
- or
- yarn add ffcreato
重中之重, ffcreator 依赖于 FFnpeg, 因此必须安装 FFMPEG.
FFCreatorLite 依赖于 FFMPEG>=0.9 以上版本. 请设置 FFMPEG 为全局变量, 否则需要使用 setFFmpegPath 添加 FFMPEG 本机路径.(Windows 用户的 FFMPEG 很可能不在您的 %PATH 中, 因此您必须设置 %FFMPEG_PATH).
安装 FFMPEG 的教程, 我只说下 Windows 和 Mac 的哈, 关于其他的在上面 GitHub 里面有更详细的说明, 之所以只说下 Windows 和 Mac, 因为对于前端开发人员来说, 大多数都是 Mac, 也有部分 Windows. 对于其他研发人员, 如果想尝试的话, 可以进到上面 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);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);// 创建一个图片元素, 图片路径为../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);// 创建一个视频元素, 视频路径为../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);// 新建相册元素.
- 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);
FFNode, 下面所有类型的基类, 可以直接看下面.
FFText, 文本元素
FFImage, 图片元素
FFVideo, 视频元素
FFAlbum, 相册元素
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.PNG
- vtuber.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);
- // 设置语音配音 - tts
- subtitle.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 的哦
图片动画:
图片动画 demo 地址, demo 源码地址
多图相册:
多图相册 demo 地址, demo 源码地址
场景过渡:
场景过渡 demo 地址, demo 源码地址
配音字幕:
配音字幕 demo 地址, demo 源码地址
视频动画:
视频动画 demo 地址, demo 源码地址
写在最后
短视频横行互联网, 何不顺应潮流, 用代码去实现短视频的创作呢?
既然可以 node 实现短视频的创造, 何不搭配服务器, 实现拖拽组合, 可视化生成短视频呢?
这些应该都是可以实现的.
如果你过得快乐, 请努力工作使自己更快乐; 如果不过得不快乐, 请努力工作让自己变得快乐; 总之, 工作使我快乐~
祝大家工作顺利, 天天快乐哦~
觉得还不错的话, 点个 star 再走哇~
团队
TNTWeb - 腾讯新闻前端团队, TNTWeb 致力于行业前沿技术探索和团队成员个人能力提升. 为前端开发人员整理出了小程序以及 Web 前端技术领域的最新优质内容, 每周更新, 欢迎 star,GitHub 地址: https://github.com/tnfe/TNT-Weekly
image.PNG
来源: https://www.qcloud.com/developer/article/1867062