关于ffmpeg:从零开始制作一个短视频

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-example
npm init

接下来进行明天咱们这个包的安装操作

npm install ffcreator
or
yarn 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 查看其余环境的装置形式。

共四分步：下载、解压、设置环境变量、应用。

参考文档

共两局部：

装置 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.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, 视频元素

// 创立一个视频元素，视频门路为../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.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();

图片动画：

<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/01.mp4">

</video>

图片动画 demo 地址, demo 源码地址

多图相册：

<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/02.mp4">

</video>

多图相册 demo 地址, demo 源码地址

场景过渡：

<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/03.mp4">

</video>

场景过渡 demo 地址, demo 源码地址

配音字幕：

<source type="video/mp4" src="https://tnfe.github.io/FFCreator/_media/video/normal/04.mp4">

</video>

配音字幕 demo 地址, demo 源码地址

视频动画：

<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

关于ffmpeg:从零开始制作一个短视频

(前言)说点事件

生成我的项目并装置依赖

windows：

mac：

对于应用

有 demo 的哦

写在最初

团队