Skip to content

Commit 68a67b7

Browse files
transitive-bullshittransitive-bullshit
authored
Merge branch 'master' into feature/optimize-frames
2 parents eba5990 + c91b206 commit 68a67b7

File tree

2 files changed

+245
-0
lines changed

2 files changed

+245
-0
lines changed

‎readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
*(note that the quality and fps is only poor due to the GIF preview; [here](https://raw.githubusercontent.com/transitive-bullshit/ffmpeg-concat/master/media/example.mp4) is the original)*
1212

13+
- [![china](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **中文/Chinese**](https://github.com/transitive-bullshit/ffmpeg-concat/blob/master/readme.zh.md)
14+
1315

1416
## Intro
1517

‎readme.zh.md

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
2+
# ffmpeg-concat
3+
4+
> 拼接 一组视频.,通过使用 ffmpeg和 性感的 OpenGL 过渡 (动画效果)
5+
6+
[![NPM](https://img.shields.io/npm/v/ffmpeg-concat.svg)](https://www.npmjs.com/package/ffmpeg-concat) [![Build Status](https://travis-ci.com/transitive-bullshit/ffmpeg-concat.svg?branch=master)](https://travis-ci.com/transitive-bullshit/ffmpeg-concat) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
7+
8+
![](https://raw.githubusercontent.com/transitive-bullshit/ffmpeg-concat/master/media/example.gif)
9+
10+
*9个视频 与 独特过渡 连接在一起的示例*
11+
12+
*请注意,由于GIF预览,质量和fps很差;[这个](https://raw.githubusercontent.com/transitive-bullshit/ffmpeg-concat/master/media/example.mp4)是源文件*
13+
14+
## 介绍
15+
16+
[FFmpeg](http://ffmpeg.org/)是命令行视频编辑中的事实标准,但使用 非平凡过渡 将视频连接在一起真的很困难. 这里有一些[错综复杂](https://superuser.com/questions/778762/crossfade-between-2-videos-using-ffmpeg) [的例子](https://video.stackexchange.com/questions/17502/concate-two-video-file-with-fade-effect-with-ffmpeg-in-linux)两个视频之间的简单交叉淡入淡出. FFmpeg过滤图非常强大,但是为了实现过渡动画,它们太复杂且容易出错.
17+
18+
另一方面,[GL Transitions](https://gl-transitions.com/),是一个伟大的开源由[Gaëtan Renaudeau](https://github.com/gre)倡议,旨在使用 GLSL 建立一个普遍的过渡[集合](https://gl-transitions.com/gallery),它非常简单的规范使得定制现有过渡或编写自己的过渡非常容易,而不是使用复杂的ffmpeg过滤图.
19+
20+
**使用 gl-transitions 这个模块和CLI轻松地将视频连接在一起.**
21+
22+
## 安装
23+
24+
这个模块需要[ffmpeg](http://ffmpeg.org/)要安装.
25+
26+
```bash
27+
npm install --save ffmpeg-concat
28+
29+
# 或者 想使用 cli
30+
npm install -g ffmpeg-concat
31+
```
32+
33+
## CLI
34+
35+
```sh
36+
Usage: ffmpeg-concat [options] <videos...>
37+
38+
Options:
39+
40+
-V, --version 输出版本号
41+
-o, --output <output> 要写入的mp4文件的路径（默认值：out.mp4）
42+
-t, --transition-name <name> 要使用的gl-transition名称（默认值：淡入淡出）
43+
-d, --transition-duration <duration> 转换持续时间以毫秒为单位（默认值：500）
44+
-T, --transitions <file> json文件加载转换
45+
-f, --frame-format <format> 用于临时帧图像的格式（默认值：raw）
46+
-c, --concurrency <number> 要并行处理的视频数量（默认值：4）
47+
-C, --no-cleanup-frames 禁用清除临时帧图像
48+
-O, --temp-dir <dir> 用于存储帧数据的临时工作目录
49+
-h, --help 输出使用信息
50+
51+
Example:
52+
53+
ffmpeg-concat -t circleopen -d 750 -o huzzah.mp4 0.mp4 1.mp4 2.mp4
54+
```
55+
56+
## 用法
57+
58+
```js
59+
const concat = require('ffmpeg-concat')
60+
61+
// 拼接 3 个 mp4s 使用 2 个 500ms directionalWipe 过渡
62+
await concat({
63+
output: 'test.mp4',
64+
videos: [
65+
'media/0.mp4',
66+
'media/1.mp4',
67+
'media/2.mp4'
68+
],
69+
transition: {
70+
name: 'directionalWipe',
71+
duration: 500
72+
}
73+
})
74+
```
75+
76+
```js
77+
// 拼接 5 个 mp4 使用 4种不同的过渡
78+
await concat({
79+
output: 'test.mp4',
80+
videos: [
81+
'media/0.mp4',
82+
'media/1.mp4',
83+
'media/2.mp4',
84+
'media/0.mp4',
85+
'media/1.mp4'
86+
],
87+
transitions: [
88+
{
89+
name: 'circleOpen',
90+
duration: 1000
91+
},
92+
{
93+
name: 'crossWarp',
94+
duration: 800
95+
},
96+
{
97+
name: 'directionalWarp',
98+
duration: 500,
99+
// 将自定义参数传递给转换
100+
params: { direction: [ 1, -1 ] }
101+
},
102+
{
103+
name: 'squaresWire',
104+
duration: 2000
105+
}
106+
]
107+
})
108+
```
109+
110+
## API
111+
112+
### concat(options)
113+
114+
将 视频文件 与 OpenGL过渡 连接在一起. 返回一个`Promise`用于输出视频的时间.
115+
116+
请注意,您必须指定`videos`,`output`,或者`transition`要么`transitions`.
117+
118+
请注意,输出视频的大小 和 fps 由 第一个输入视频决定.
119+
120+
#### options
121+
122+
##### videos
123+
124+
类型: `Array<String>`
125+
**必需**
126+
127+
要连接的视频数组,其中每个 item 都是视频文件的路径或URL.
128+
129+
##### output
130+
131+
类型: `String`
132+
**必需**
133+
134+
输出的`mp4`视频文件路径.
135+
136+
注意: 我们目前只支持输出到mp4;如果您希望获得更多格式的支持,请打开一个问题.
137+
138+
##### transition
139+
140+
类型: `Object`
141+
142+
指定在每个视频之间使用的默认过渡.
143+
144+
请注意,您必须指定其中一个`transition`要么`transitions`,取决于您对每次过渡的控制程度. 如果同时指定,`transitions`优先.
145+
146+
```js
147+
// 例
148+
const transition = {
149+
duration: 1000, // ms
150+
name: 'directionalwipe', // 要使用的 gl-transition名称（小写匹配）
151+
params: { direction: [1, -1] } // 可选地覆盖默认参数
152+
}
153+
```
154+
155+
##### transitions
156+
157+
类型: `Array<Object>`
158+
159+
指定每个视频之间的 (可能唯一的) 过渡. 如果有N个视频,则应该有N-1个过渡.
160+
161+
请注意,您必须指定其中一个`transition`要么`transitions`,取决于您对每次过渡的控制程度. 如果同时指定,`transitions`优先.
162+
163+
```js
164+
// 例
165+
const transitions = [
166+
{
167+
duration: 1000,
168+
name: 'fade'
169+
},
170+
{
171+
duration: 500,
172+
name: 'swap'
173+
}
174+
]
175+
```
176+
177+
##### audio
178+
179+
类型: `String`
180+
**必需**
181+
182+
音频文件的路径或URL,用作 输出视频 的音轨.
183+
184+
##### frameFormat
185+
186+
类型: `string`默认: `raw`
187+
188+
临时帧图像的格式. 例如,您可以使用`png`要么`jpg`.
189+
190+
注意: 出于性能原因默认为`raw`,写入和读取 原始二进制像素数据 比 编码和解码`png`帧快得多. 原始格式很难预览和调试,在另一种情况下,您可能想要更改`frameFormat`至`png`.
191+
192+
##### concurrency
193+
194+
类型: `Number`默认: `4`
195+
196+
要并行处理的最大视频数量.
197+
198+
##### log
199+
200+
类型: `Function`默认: `noop`
201+
202+
用于记录进度和底层ffmpeg命令的可选功能. 例如,您可以使用`console.log`
203+
204+
##### cleanupFrames
205+
206+
类型: `boolean`默认: `true`
207+
208+
默认情况下,我们清理临时帧图像. 如果你需要调试中间结果,将此设置为`false`.
209+
210+
##### tempDir
211+
212+
类型: `string`默认值: `/tmp`下的随机目录
213+
214+
用于存储中间帧数据的临时工作目录. 这是`cleanupFrames`时,帧被保存的位置.
215+
216+
## 过渡
217+
218+
这里有一些[gl-transitions](https://gl-transitions.com/)我发现对高质量的视频过渡 特别有用:
219+
220+
- [fade](https://gl-transitions.com/editor/fade)
221+
- [fadegrayscale](https://gl-transitions.com/editor/fadegrayscale)
222+
- [circleopen](https://gl-transitions.com/editor/circleopen)
223+
- [directionalwarp](https://gl-transitions.com/editor/directionalwarp)
224+
- [directionalwipe](https://gl-transitions.com/editor/directionalwipe)
225+
- [crosswarp](https://gl-transitions.com/editor/crosswarp)
226+
- [crosszoom](https://gl-transitions.com/editor/CrossZoom)
227+
- [dreamy](https://gl-transitions.com/editor/Dreamy)
228+
- [squareswire](https://gl-transitions.com/editor/squareswire)
229+
- [angular](https://gl-transitions.com/editor/angular)
230+
- [radial](https://gl-transitions.com/editor/Radial)
231+
- [cube](https://gl-transitions.com/editor/cube)
232+
- [swap](https://gl-transitions.com/editor/swap)
233+
234+
## 有关
235+
236+
- [ffmpeg-gl-transition](https://github.com/transitive-bullshit/ffmpeg-gl-transition)- 用于在视频流之间 应用GLSL过渡 的 低级ffmpeg过滤器 ([gl-transitions](https://gl-transitions.com/)) . 它允许使用更高级和可自定义的过滤器图形,但它需要您构建自定义版本的ffmpeg.
237+
- [gl-transitions](https://gl-transitions.com/)- GLSL过渡的集合.
238+
- [fluent-ffmpeg](https://github.com/fluent-ffmpeg/node-fluent-ffmpeg)- 底层ffmpeg包装库.
239+
- [awesome-ffmpeg](https://github.com/transitive-bullshit/awesome-ffmpeg)- ffmpeg资源的精选列表,重点关注JavaScript.
240+
241+
## 执照
242+
243+
麻省理工学院©[Travis Fischer](https://github.com/transitive-bullshit)

0 commit comments

Comments
 (0)