導(dǎo)讀：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，視頻化浪潮借著5G的東風(fēng)撲面而來。然而眾多用戶在進(jìn)行視頻化創(chuàng)作的過程中，被傳統(tǒng)視頻編輯器復(fù)雜的功能和陡峭的學(xué)習(xí)曲線勸退。為此，百度百家號業(yè)務(wù)研發(fā)團(tuán)隊(duì)結(jié)合用戶的實(shí)際創(chuàng)作需求，開發(fā)出一款簡單易用的在線視頻編輯和發(fā)布工具——百家號在線視頻編輯器。本文將細(xì)致地介紹這一編輯器的技術(shù)原理，架構(gòu)和演進(jìn)方向，并從一角揭示百度內(nèi)部的技術(shù)合作與創(chuàng)新機(jī)制。

前言

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，人們越來越習(xí)慣于在手機(jī)上觀看視頻內(nèi)容。百家號作為手百的內(nèi)容生產(chǎn)平臺，需要為作者提供簡單易用的視頻編輯和發(fā)布工具。在線視頻編輯器正是在這種需求下應(yīng)運(yùn)而生。這篇內(nèi)容將細(xì)致地介紹百家號視頻編輯器所采用的技術(shù)。

名詞解釋

BOS：百度對象存儲BOS（Baidu Object Storage）提供穩(wěn)定、安全、高效以及高擴(kuò)展存儲服務(wù)

VOD：視頻點(diǎn)播服務(wù)，本文特指百度VideoWorks（原VOD 音視頻點(diǎn)播服務(wù)）

一、一個(gè)在線視頻編輯器都要實(shí)現(xiàn)哪些功能？

1.1 編輯器的基礎(chǔ)功能

我們調(diào)查了本地視頻編輯器，列舉出一些視頻編輯器必須要實(shí)現(xiàn)的功能：

素材源文件管理，加載和編輯
多軌道編輯器
拖拽操作（添加/刪除素材, 添加/刪除效果, 快速剪輯, 切換軌道等）
音視頻軌道分離
素材效果（浮雕、懷舊等），轉(zhuǎn)場動(dòng)畫（淡入淡出、螺旋等），素材動(dòng)畫（單點(diǎn)縮放、模擬晃動(dòng)等）
字幕編輯和嵌入
視頻預(yù)覽
多種格式渲染導(dǎo)出

1.2 在線編輯器的獨(dú)特功能

一款在線視頻編輯器，同樣也要實(shí)現(xiàn)上述功能，只是具體實(shí)現(xiàn)上有所不同，例如：

素材管理：要實(shí)現(xiàn)素材源文件的上傳和刪除
視頻預(yù)覽：由前端js實(shí)現(xiàn)的簡單預(yù)覽
導(dǎo)出：在線視頻編輯器主要為百家號發(fā)布器服務(wù)，因此不導(dǎo)出視頻文件，而是接入視頻發(fā)布流程

此外，依托于百度和百家號技術(shù)體系，還可以實(shí)現(xiàn)音頻轉(zhuǎn)字幕，字幕合成音頻，百家號圖文內(nèi)容轉(zhuǎn)視頻等額外功能。

二、如何實(shí)現(xiàn)一個(gè)在線視頻編輯器?

2.1 后端技術(shù)選型

FFmpeg是業(yè)界最常用的視頻編解碼集成框架，不僅功能強(qiáng)大，而且編解碼效率很高。因此，后端服務(wù)采用FFmpeg作為視頻編解碼底層。

2.2 FFmpeg介紹

FFmpeg是一個(gè)自由軟件，可以運(yùn)行音頻和視頻多種格式的錄影、轉(zhuǎn)換、流功能。包含了libavcodec——一個(gè)用于多個(gè)項(xiàng)目中音頻和視頻的解碼器庫，以及l(fā)ibavformat——一個(gè)音頻與視頻格式轉(zhuǎn)換庫。

△圖 1 ffmpeg

2.2.1 FFmpeg 特性

自由軟件，代碼開源；
自帶眾多濾鏡（插件），能滿足現(xiàn)階段全部業(yè)務(wù)需求；
支持第三方濾鏡（插件），能滿足未來業(yè)務(wù)需求；
支持自定義編譯，支持動(dòng)態(tài)編譯，盡可能降低內(nèi)存占用；
支持遠(yuǎn)程文件（http、ftp等）作為輸入，減少本地磁盤占用；
支持GPU編解碼，降低CPU占用，提升編解碼速度(本業(yè)務(wù)咱時(shí)未使用GPU集群）；
語法簡單，便于二次封裝或組裝。

2.2.2?命令行用法

△圖 2 ffmpeg命令行用法

例1: ffmpeg -i in.wmv -vcodec libxvid out.mp4例2: ffmpeg -framerate 1 -t 1 -loop 1 -i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg" -vcodec libx264 -pix_fmt yuv420p -y test.mp4

2.2.3 FFmpeg濾鏡基本規(guī)則

FFmpeg中的Filter（avfilter）通常翻譯為過濾器/濾鏡，濾鏡的作用就是過濾（Filtering)）。

任何對解碼后的多媒體資源進(jìn)行的編輯操作均可以稱作廣義上的Filtering，而進(jìn)行這些操作的組件和插件，就是濾鏡。

例如，音頻升降調(diào)/速、視頻插幀/抽幀、剪裁/截取/合并/疊加等等。

△圖 3 FFmpeg轉(zhuǎn)碼和Filter過程

2.2.4 基礎(chǔ)濾鏡及其示意圖

基礎(chǔ)濾鏡使用非常簡單，只要在輸入文件（及選項(xiàng)）和輸出文件（及選項(xiàng)）之間，使用-vf來添加需要的濾鏡即可。例如：

縮放scale（靜態(tài)）

ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4

△圖 4 scale示意圖

縮放平移zoompan（動(dòng)態(tài)）

ffmpeg -framerate 1 -t 1 -loop 1-i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg"-vf"zoompan=z='if(eq(on,0),1,if(lt(zoom,1.25),zoom+0.0005,1.25))':d=16.06*25:x='if(lt(zoom,1.25),0,(x-1))':y='if(lt(zoom,1.25),0,(y+1))':s='1024x720'" -y tmp.mp4

△圖 5 zoompan示意圖

模糊boxblur

ffmpeg -i tmp.mp4 -filter_complex "boxblur=luma_radius='min(h,w)/30':luma_power=2" -y boxblur.mp4  模糊虛化

△圖 6 boxblur示意圖

疊加overlay

ffmpeg -i tmp.mp4 -i watermark.png -filter_complex "[1:v]scale=-2:48[logo];[0:v][logo]overlay=48:48" -y watermark.mp4  左上logo

△圖 7 overlay示意圖

2.2.5 FFmpeg管道式語法

規(guī)則：

用[name]?來命名流
濾鏡之間用?,?分隔
流之間用?;?分隔
第i個(gè)輸入命為[i-1]
第一個(gè)輸入文件的視頻流和音頻流為[0:v]?和[0:a]
最后一個(gè)流名可省略

舉例：

-filter_complex "    [0:v]split[front][back];  //復(fù)制并分離成front和back兩條流    [back] //背景流            scale=1280:-2, //等比例縮放到輸出寬度1280            boxblur=luma_radius='min(h,w)/30':luma_power=2, //模糊            crop=iw:720[background]; //剪裁到1280:720    [front]scale=-2:720[foreground]; //等比例縮放到輸出高度720    [background][foreground]overlay=(W-w)/2:(H-h)/2  //疊加"

△圖 8 管道化濾鏡流示意圖

實(shí)際效果：

△圖 9 管道化濾鏡流執(zhí)行結(jié)果

2.3 前端技術(shù)選型

前端界面使用React框架實(shí)現(xiàn)，快速預(yù)覽功能基于瀏覽器的html5音視頻播放器實(shí)現(xiàn)，通過html標(biāo)簽傳遞調(diào)整參數(shù)給播放器，實(shí)現(xiàn)簡單的負(fù)片、浮雕、黑白等播放效果，通過在視頻上疊加動(dòng)圖的方式模擬轉(zhuǎn)場效果。

受限于前端預(yù)覽方案的性能和復(fù)雜度，前端快速預(yù)覽只能展現(xiàn)部分編輯效果。

2.4 前后端功能邊界及交互

2.4.1 前后端功能邊界

進(jìn)行具體的功能開發(fā)之前，需要根據(jù)需求和技術(shù)能力特點(diǎn)劃分前后端功能邊界，例如：

前端界面實(shí)現(xiàn)

用戶與視頻編輯器的交互
視頻簡單預(yù)覽（受限于前后端技術(shù)棧差異和使用的資源差異，預(yù)覽效果與最終結(jié)果可能不盡相同）
將用戶在編輯界面操作的結(jié)果轉(zhuǎn)換成時(shí)間軸數(shù)據(jù)結(jié)構(gòu)
...

后端服務(wù)實(shí)現(xiàn)

時(shí)間軸轉(zhuǎn)譯成FFmpeg命令
視頻產(chǎn)出后調(diào)用視頻發(fā)布流程
...

需要前后端共同實(shí)現(xiàn)

字幕??<==> 音頻
素材上傳
...

根據(jù)我們的功能需求和前后端的功能劃分，百家號在線視頻編輯器的用戶界面大致劃分成3個(gè)區(qū)域：

黃線內(nèi)的功能區(qū)
綠線內(nèi)的多軌道編輯區(qū)
紅線內(nèi)的快速預(yù)覽區(qū)

△圖 10 百家號在線視頻編輯器界面分區(qū)

2.4.2 時(shí)間軸數(shù)據(jù)結(jié)構(gòu)

為了能在前后端之間進(jìn)行交互，需要定義一種數(shù)據(jù)結(jié)構(gòu)，這種數(shù)據(jù)結(jié)構(gòu)要既便于前端多軌道編輯器的加載，修改和存儲，又便于后端提取結(jié)構(gòu)化數(shù)據(jù)。

我們定義了一種時(shí)間軸數(shù)據(jù)結(jié)構(gòu)，時(shí)間軸中的軌道與多軌道編輯器中的軌道一一對應(yīng)：


{"timeline":{"video_track": [ //視頻軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video, 圖片image, 轉(zhuǎn)場動(dòng)畫transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "negative", // 效果: 負(fù)片,模糊,浮雕,黑白 等等"duration": 1.5, //時(shí)長"speed": 1, //播放速度"animation": "zoompan",  //視頻資源的動(dòng)畫效果, 如鏡頭晃動(dòng), 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音頻軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "jazz", // 效果: 爵士, 搖滾, 人聲 等等平衡器效果"duration": 1.5, //時(shí)長"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //語音轉(zhuǎn)字幕}],"subtitle": [ //字幕軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"style": "Arial,23,yellow,white", // 效果: 字體,大小,顏色,描邊顏色"duration": 1.5, //時(shí)長"text": "這是一條字幕","pos_x": 100, //字幕定位"pos_y": 200,  //字幕定位"tts": true, //使用字幕合成語音}],"watermark": [ //水印,特圖{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"style": "transparent", //可以是透明transparent, 負(fù)片 等效果"style_params": "0.8", //效果的具體參數(shù), 如透明度等"duration": 1.5, //時(shí)長"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //貼圖定位"pos_y": 200,  //貼圖定位"height": 100, //貼圖高度"width": 100, //貼圖寬度}]},"author_info":{}, //作者信息"extra":{}, //其他信息}

2.4.3 異步調(diào)用和輪詢

當(dāng)用戶在完成編輯工作后，需點(diǎn)擊"保存"按鈕提交。這時(shí)前端會將多軌道編輯器內(nèi)所有資源要素封裝成時(shí)間軸結(jié)構(gòu)傳遞給后端服務(wù)。后端服務(wù)接到時(shí)間軸結(jié)構(gòu)后會進(jìn)行轉(zhuǎn)譯，并調(diào)用FFmpeg進(jìn)行視頻編解碼。

后端這一階段的工作是計(jì)算密集型的，通常需要消耗時(shí)間軸長度2-5倍的時(shí)間來完成視頻最終合成。因此點(diǎn)擊"保存"按鈕后，前端采用異步調(diào)用 + 定期輪詢狀態(tài)的方式檢查后端視頻合成是否完成。

2.5 后端時(shí)間軸轉(zhuǎn)譯流程

前面提到后端服務(wù)要對前端傳遞來的時(shí)間軸進(jìn)行轉(zhuǎn)譯，轉(zhuǎn)寫成FFmpeg命令。

這一步的主要流程如下圖所示：

△圖 11 時(shí)間軸轉(zhuǎn)譯FFmpeg命令程圖

3. 百家號在線視頻編輯器的具體實(shí)現(xiàn)

3.1 百家號視頻編輯器整體架構(gòu)

△圖 12 整體架構(gòu)

3.2 用戶界面和服務(wù)接口

目前視頻編輯器提供了兩種使用方法：面向最終用戶的圖形界面和面向開發(fā)者的服務(wù)接口。

其中圖形界面集成在百家號內(nèi)容創(chuàng)作后臺，現(xiàn)已對部分百家號作者開放，而通過接口提供的音頻轉(zhuǎn)碼，視頻合并等服務(wù)也已經(jīng)應(yīng)用到了百家號線上服務(wù)當(dāng)中。

3.3 業(yè)務(wù)層: 時(shí)間軸轉(zhuǎn)譯

在業(yè)務(wù)層中，為了隔離內(nèi)外部網(wǎng)絡(luò)請求，添加了UI層模塊，用于處理來自于圖形界面的視頻編輯請求。Service模塊是基于PHP開發(fā)的編輯器核心模塊，主要作用是將圖形界面和服務(wù)接口這兩種類型的請求打平，將時(shí)間軸數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)譯出能夠直接執(zhí)行的FFmpeg命令，并送給離線調(diào)度模塊執(zhí)行。

業(yè)務(wù)層Service模塊在轉(zhuǎn)譯時(shí)主要完成了如下工作：

3.3.1 圖片視頻化

blur：傳入視頻/圖片比例和尺寸可能與最終輸出結(jié)果不一致，如手機(jī)豎屏拍攝的視頻、網(wǎng)上下載的圖片等等。之前業(yè)內(nèi)對于不同比例的視頻，要么留黑邊，要么局部裁剪。隨著手機(jī)短視頻的興起，現(xiàn)在流行的做法是如圖13所示,，用模糊放大的背景圖代替黑邊。
zoompan：對于傳入的靜態(tài)圖片，通常要將圖片運(yùn)動(dòng)起來，使畫面不至于太死板，獲得更好的展現(xiàn)效果。

3.3.2 視頻連接及轉(zhuǎn)場

concat：將傳入的個(gè)圖片/視頻流進(jìn)行合并，連接成一條更長的視頻軌。
overlay：在視頻和視頻相連接的時(shí)刻，添加一層轉(zhuǎn)場動(dòng)畫，避免生硬的直接畫面切換。

△圖 13 overlay添加過場動(dòng)畫

3.3.3 音頻?

將傳入的多段視頻伴音/配音/TTS朗讀接合成一條長音軌。
根據(jù)用戶選擇添加BGM，使視頻更有氛圍。
處理淡入淡出，避免生硬切換。

3.3.4 字幕

添加ass特效字幕頭。
根據(jù)時(shí)間軸中的文本，生成ass字幕文件。
將ass字幕文件壓制到視頻流中。

△圖 14 特效字幕頭

3.3.5 組裝

將所有濾鏡命令用管道式濾鏡流方式組合，生成濾鏡流腳本。
將濾鏡流腳本與生成的ass字幕同時(shí)分別上傳到BOS上，便于后續(xù)FFmpeg命令直接讀取和執(zhí)行。

3.3.6 其他

需要在空白位置添加特定長度的空白視頻/音頻，保證產(chǎn)出視頻的時(shí)間軸與視頻編輯器界面的時(shí)間軸一致。
對較長的文本，需要精細(xì)拆分，以保證每段字幕都與TTS朗讀同步（這一步驟在UI層進(jìn)行計(jì)算）。

3.4 內(nèi)部服務(wù)

在業(yè)務(wù)層中，涉及到用戶信息、物料信息、語音合成等各種查詢和調(diào)用，這些功能均由百家號和百度內(nèi)部服務(wù)提供。

3.5 離線調(diào)度

Dispatch是一個(gè)分布式的任務(wù)調(diào)度系統(tǒng)，負(fù)責(zé)在多個(gè)實(shí)例（或容器內(nèi)）均衡地執(zhí)行FFmpeg請求，將生成資源上傳BOS/VOD，回調(diào)Service層模塊返回任務(wù)調(diào)度的執(zhí)行結(jié)果。

FFmpeg是一套開源的、完善的音視頻流轉(zhuǎn)編碼自由軟件，負(fù)責(zé)最終執(zhí)行FFmpeg命令，生成音視頻文件。

4. 離線調(diào)度框架：實(shí)現(xiàn)分布式FFmpeg調(diào)度

4.1 Dispatch架構(gòu)圖

△圖 15 Dispatch架構(gòu)

4.2 Dispatch實(shí)現(xiàn)原理

實(shí)例啟動(dòng)時(shí)，Redis Hash數(shù)據(jù)結(jié)構(gòu)注冊自己，member=ip，value =?當(dāng)前隊(duì)列長度：當(dāng)前狀態(tài)：更新時(shí)間戳；
任何一個(gè)接收到Service層模塊的請求后，如果自己當(dāng)前隊(duì)列長度為0，直接本地執(zhí)行，否則將請求轉(zhuǎn)發(fā)給隊(duì)列最短的正常實(shí)例；
轉(zhuǎn)發(fā)請求前先要從Redis獲取所有Dispatch數(shù)據(jù)，解析所有實(shí)例的 ip、隊(duì)列長度、狀態(tài)、更新時(shí)間戳，根據(jù)規(guī)則選擇一個(gè)最佳實(shí)例轉(zhuǎn)發(fā)請求；
消費(fèi)隊(duì)列中的請求時(shí)，調(diào)用FFmpeg從BOS上獲取輸入文件，管道化濾鏡流腳本，ass字幕文件, 然后執(zhí)行道化濾鏡流腳本，在本地磁盤生成產(chǎn)出文件，并上傳BOS/VOD；
根據(jù)請求參數(shù)，回調(diào)Service層模塊接口，更新任務(wù)狀態(tài)。

5. 圖文轉(zhuǎn)視頻技術(shù)項(xiàng)目：依托于視頻編輯器后端服務(wù)的技術(shù)性嘗試?

5.1 以場景為單元編輯視頻

相比視頻編輯器，圖文轉(zhuǎn)視頻項(xiàng)目的用戶界面取消了時(shí)間軸，轉(zhuǎn)而采用"場景（Scene）"這一概念。即一張圖+一段話便是一個(gè)場景，視頻就是由場景串接起來的。

△圖 16 以場景為單元?jiǎng)?chuàng)建視頻（設(shè)計(jì)稿）

5.2 文章落地頁URL轉(zhuǎn)視頻

得益于場景這一簡單概念，可以將落地頁URL簡單地轉(zhuǎn)成場景，從而讓圖文/圖集作者可以一鍵開始視頻內(nèi)容的編輯和創(chuàng)作。

圖17展示了這一創(chuàng)作過程的流程圖。

△圖17 URL轉(zhuǎn)視頻流程

當(dāng)轉(zhuǎn)成時(shí)間軸之后，即可調(diào)用視頻編輯器的接口，生成和發(fā)布視頻。

5.3 圖文轉(zhuǎn)視頻Demo

文末會附上幾個(gè)圖文轉(zhuǎn)視頻項(xiàng)目在技術(shù)驗(yàn)證時(shí)生成的視頻，以展現(xiàn)實(shí)際效果。

6. 總結(jié)與展望

6.1 組合創(chuàng)新，適應(yīng)潮流

百家號的在線視頻編輯器技術(shù)可以簡單總結(jié)為：后端使用PHP將前端JS生成的時(shí)間軸格式數(shù)據(jù)轉(zhuǎn)譯成FFmpeg命令，并通過Dispatch調(diào)度調(diào)度框架來執(zhí)行FFmpeg產(chǎn)出最終視頻。從這一層面看，這一技術(shù)沒有高深的技術(shù)門檻，沒有復(fù)雜抽象的邏輯模型，我們的技術(shù)創(chuàng)新，主要是組合現(xiàn)有技術(shù)，形成一項(xiàng)適應(yīng)潮流的新的技術(shù)方案。

伴隨著視頻化浪潮到來的，不僅是普通用戶對視頻內(nèi)容的大量需求，還有創(chuàng)作者對視頻編輯工具便利性的熱切期待。百家號一直站創(chuàng)作者的角度，為創(chuàng)作者們提供更加優(yōu)秀的視頻編輯器。希望通過我們的努力，給視頻化浪潮里的創(chuàng)作者們帶去得力的船槳。

6.2?技術(shù)共享，合作共贏

在百家號在線視頻編輯器技術(shù)發(fā)展過程中，吸引了來自百度ACG的媒體云團(tuán)隊(duì)的關(guān)注，兩個(gè)團(tuán)隊(duì)在在線視頻編輯器技術(shù)上進(jìn)行了深入的技術(shù)交流。

隨后，百度媒體云基于這一技術(shù)開發(fā)出了智能視頻快編服務(wù)。得益于媒體云的長期技術(shù)積累和對視頻編輯底層技術(shù)的深入挖掘，智能視頻快編服務(wù)使用智能分片+GPU編解碼技術(shù)，將視頻編輯合成的效率提升了數(shù)倍，同時(shí)也提供了更多新特性和新功能，使在線視頻編輯技術(shù)更加實(shí)用化。

目前，百家號正在將視頻編輯器及通用視頻編輯能力的底層服務(wù)逐步遷移到媒體云的智能視頻快編服務(wù)。百家號團(tuán)隊(duì)作為在線視頻編輯器技術(shù)的輸出方，已經(jīng)開始享受技術(shù)合作帶來的紅利。

技術(shù)交流，歡迎加我微信：ezglumes ，拉你入技術(shù)交流群。

推薦閱讀：

音視頻開發(fā)工作經(jīng)驗(yàn)分享 || 視頻版

OpenGL ES 學(xué)習(xí)資源分享

開通專輯 | 細(xì)數(shù)那些年寫過的技術(shù)文章專輯

NDK 學(xué)習(xí)進(jìn)階免費(fèi)視頻來了

你想要的音視頻開發(fā)資料庫來了

推薦幾個(gè)堪稱教科書級別的 Android 音視頻入門項(xiàng)目

覺得不錯(cuò)，點(diǎn)個(gè)在看唄~

百家號在線視頻編輯器的技術(shù)演進(jìn)

前言

一、一個(gè)在線視頻編輯器都要實(shí)現(xiàn)哪些功能？