[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