[svg2png] + [ffmpeg-concat] + [ffmpeg]开发项目模块

项目功能描述

多张svg图片生成MP4视频，并添加转场动画，添加背景音乐javascript

实现思路：
一、将svg生成 jpg/png
二、将jpg/png生成固定时间的视频
三、将多个视频进行拼接
四、为视频添加音频

html

svg2png(svg转成png)

svg2png可使用npm进行下载安装
并可参考连接以下：
https://www.npmjs.com/package/svg2png.
使用svg2png能够彻底按照官方示例，SoEasy。

java

jpg/png生成固定时间的视频

ffmpeg -r 25 -loop 1 -i xx.png  -pix_fmt yuv420p -vcodec libx264 -b:v 600k -preset medium -crf 30 -s 720x576 -vframes 250 -r:v 25 -t 10 xx.mp4

-r：设置帧率
-loop：循环读取输入文件
-pix_fmt：显示可用的的像素格式
yuv420p：帧数据存储格式为YUV（还有一种是RGB）
-vcodec：视频编解码器（libx264）
-b:v：设置输出文件的比特率
-preset medium：预设值，与编码速度和质量有关（medium中间预设值，还有其余的，感兴趣能够搜一下）
-crf：控制转码后保证画面质量，取值范围是0-51（数值越大，画质越差，文件大小越小）
-s：设置宽x高
-vframes：设置要输出的视频的帧数
-t：设置输出的视频时长

node

ffmpeg-concat(完成视频拼接+转场动画)

ffmpeg-concat一样能够经过npm下载安装c++

npm install ffmpeg-concat

执行后在当前文件夹下生成两个文件node_modules和package_lock.json
（注意：安装ffmpeg-concat须要首先安装Visual Studio Installer，安装时要勾选使用c++的桌面开发，不然会报以下错误：）

ffmpeg-concat使用：ffmpeg-concat.js

npm

const concat = require('ffmpeg-concat')
console.log("--------------------------------------------")
console.log( process.env.PATH);
console.log("--------------------------------------------")

concat({ 
  output: 'D:/测试用文件/concat/ffmpeg-concat-test-tmp.mp4',
  videos: [
    'D:/测试用文件/video/tmp1.mp4',
    'D:/测试用文件/video/tmp2.mp4',
    'D:/测试用文件/video/tmp3.mp4',
    'D:/测试用文件/video/tmp4.mp4'
  ],
  transitions: [
    { 
      name: 'circleOpen',
      duration: 1000
    },
    { 
      name: 'crossWarp',
      duration: 500
    },
    { 
      name: 'squaresWire',
      duration: 1000
    }
  ]
})

node ffmpeg-concat.js 命令执行js文件
（json格式及参数可参考ffmpeg-concat的官方描述）
https://www.npmjs.com/package/ffmpeg-concat

json

ffmpeg(完成音视频合成，音频能够循环)

这一块踩的坑不少，由于ffmpeg的命令太杂乱，不过也正好看出ffmpeg的强大之处，在这除了给出我使用的音视频合成命令以外，额外多总结几个经常使用到的命令
在CSDN搜索音视频合成会出现不少道友的博客，我也找了很久都没找到适合本身项目的命令，只能本身以他们的命令作个参考去拼适合本身业务的命令。
ide

方案1（不推荐）（混声）

ffmpeg -i E:\1\subtitle\out3.mp4 -i E:\1\subtitle\music3D.wav -filter_complex [1:a]aloop=loop=-1:size=2e+09[out];[out][0:a]amix -ss 0 -t 60 -y out.mp4

//输入视频，最好选一个大于一分钟的尝试
-i E:\1\subtitle\out3.mp4
svg

//输入背景音，最好短一点，方便测试是否循环
-i E:\1\subtitle\music3D.wav
oop

//滤镜图
-filter_complex

//将背景音无限循环
[1:a]aloop=loop=-1:size=2e+09[out];

//将背景音和视频中的音频混合
[out][0:a]amix

//裁剪总时长，裁剪到60秒
-ss 0 -t 60

//输出
-y out.mp4

方案2（推荐）（混声）

ffmpeg -i video.mp4 -stream_loop -1 -i audio.wav -filter_complex [0:a][1:a]amix -t 60 -y out.mp4

其中
-stream_loop -1 -i audio.wav
-stream_loop -1 参数-1表明循环输入源
[0:a][1:a]amix 将0和1号的音频流进行混合
-t 60 裁剪60秒

方案3（推荐）（音频替换）

ffmpeg -an -i video.mp4 -stream_loop -1 -i audio.wav -t 60 -y out2.mp4

其中
-an -i video.mp4 表明消除视频中的音频

方案4（推荐）（音频替换，优化加快合成速度）

ffmpeg -an -i video.mp4 -stream_loop -1 -i audio.wav -c:v copy -t 60 -y out.mp4

-c:v copy 对视频流进行复制，不须要从新编解码（前提是输入流和输出流一致），速度极快

这里音频必须编码的缘由在于，输入源是一个wav的音频，而最后输出MP4文件中须要一个aac的音频，因此必须从新编码，不然会报错。

方案5（添加音频并循环）

ffmpeg -i ffmpeg-concat-test.mp4 -i audio.mp3 -filter_complex [1:a]aloop=loop=-1:size=2e+09[out] -map [out] -map 0:v:0 -t 30 -y mix_test.mp4

这是适合我本身的命令（因为我原来的视频是没有音频流的，因此没办法使用混音，只能是手动将视频和循环的音频添加到输出），抛个单个命令的解释以下：
-i：输入文件
-filter_complex：添加复杂滤镜
[1:a]aloop=loop=-1:size=2e+09[out]：音频循环播放，获得一个输出
-map：用于手动控制每一个输出文件中的流选择的选项(说白了就是你想输出什么东西)
0:✌️:0：第一个输入的视频流
-t：设置最终输出结果的时间（单位s）
-y：若是输出时有同名的文件，再也不手动确认，直接覆盖

参考连接：
https://blog.csdn.net/yu540135101/article/details/85936923
若是对复杂滤镜感兴趣，能够看这：
https://ffmpeg.org/ffmpeg-filters.html#aloop