fluent-ffmpeg图片合成视频

2019-10-19 11:16:46

1.思路

  1. 一张图片做背景图,生成视频总长度的视频

  2. 分别将需要添加的视频逐一添加到视频内

代码如下

生成视频

ffmpeg(image1) //图片文件
        .loop(5)
        .videoBitrate('2048k')
        .videoCodec('mpeg4')
        .on('end', function() {
            console.log('video one end')
        })
        .on('error', function(error) {
            console.log('an error happend: create one video' + error)
        })
        .save('./images/test_output1.mp4') //输出的第一个视频文件


插入图片到视频

 .input(videoOne) //第一个视频
        .input(image2)
        .complexFilter(["[0:v][1:v]overlay=x='if(gte(t,1), -w+(t-1)*800,NAN)':y=0"])  // 当时间大于1s 图片从左到右 
	    .videoCodec('mpeg4')
        .outputOptions('-b:v 4096k')
        .on('end', function() {
            console.log('video two end')
        })
        .on('error', function(error) {
            console.log('an error happend: create two video' + error)
        })
        .save(videoTwo)

一个问题

ffmpeg  -i ./images/output1.mp4 -loop 1  -t 1 -i ./images/2.jpg -filter_complex "
overlay=x='if(gte(t,1), -w+(t-1)*800,NAN)':y=0" -b:v 2048k -vcodec mpeg4 -y ./images/output3.mp4

如果直接用ffmpeg指令,fliter里直接写overlay就行了,但是使用fluent-ffmpeg同样的写法图片就怎么也合成不到视频中去,只是1s的单独视频,需要[0:v][1:v]这样使用。

  • 2020-05-07 13:21:25

    JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧。

  • 2020-05-07 13:42:13

    场景切换的集合移动,旋转,淡入淡出等

    两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的版本不支持 animation 属性。)

  • 2020-05-07 13:43:02

    css模拟开关按钮

    之前我们为大家分享过很多款各式各样的CSS3开关切换按钮,很多还是非常富有创意的,比如这里的多组超具创意的CSS3开关切换按钮和纯CSS3灯光开关动画。今天我们要带来另外一款外观很漂亮的纯CSS3开关切换按钮动画,它模拟了电灯的开关,并且在开和关之间切换时按钮的背景会有不同的变化,看起来非常不错。

  • 2020-05-07 18:40:35

    CSS让页面平滑滚动

    凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!