導讀：隨著移動互聯網的發展，視頻化浪潮借著5G的東風撲面而來。然而眾多用戶在進行視頻化創作的過程中，被傳統視頻編輯器復雜的功能和陡峭的學習曲線勸退。為此，百度百家號業務研發團隊結合用戶的實際創作需求，開發出一款簡單易用的在線視頻編輯和發布工具——百家號在線視頻編輯器。本文將細致地介紹這一編輯器的技術原理，架構和演進方向，并從一角揭示百度內部的技術合作與創新機制。
*第四期百度架構師「周一見」活動進行中，本期贈送小度音箱，詳細活動規則見二條推文～
前言
隨著移動互聯網的快速發展，人們越來越習慣于在手機上觀看視頻內容。百家號作為手百的內容生產平臺，需要為作者提供簡單易用的視頻編輯和發布工具。在線視頻編輯器正是在這種需求下應運而生。這篇內容將細致地介紹百家號視頻編輯器所采用的技術。
名詞解釋
BOS：百度對象存儲BOS（Baidu Object Storage）提供穩定、安全、高效以及高擴展存儲服務
VOD：視頻點播服務，本文特指百度VideoWorks（原VOD 音視頻點播服務）
一、一個在線視頻編輯器都要實現哪些功能？
1.1 編輯器的基礎功能
素材源文件管理，加載和編輯 多軌道編輯器 拖拽操作（添加/刪除素材, 添加/刪除效果, 快速剪輯, 切換軌道 等） 音視頻軌道分離 素材效果（浮雕、懷舊等），轉場動畫（淡入淡出、螺旋等），素材動畫（單點縮放、模擬晃動等） 字幕編輯和嵌入 視頻預覽 多種格式渲染導出
1.2 在線編輯器的獨特功能
素材管理：要實現素材源文件的上傳和刪除 視頻預覽：由前端js實現的簡單預覽 導出：在線視頻編輯器主要為百家號發布器服務，因此不導出視頻文件，而是接入視頻發布流程
二、如何實現一個在線視頻編輯器?
2.1 后端技術選型
2.2 FFmpeg介紹
2.2.1 FFmpeg 特性
自由軟件，代碼開源； 自帶眾多濾鏡（插件），能滿足現階段全部業務需求； 支持第三方濾鏡（插件），能滿足未來業務需求； 支持自定義編譯，支持動態編譯，盡可能降低內存占用； 支持遠程文件（http、ftp等）作為輸入，減少本地磁盤占用； 支持GPU編解碼，降低CPU占用，提升編解碼速度(本業務咱時未使用GPU集群）； 語法簡單，便于二次封裝或組裝。
2.2.2 命令行用法
例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濾鏡基本規則
2.2.4 基礎濾鏡及其示意圖
縮放scale（靜態）
ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4
縮放平移zoompan（動態）
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
模糊boxblur
ffmpeg -i tmp.mp4 -filter_complex "boxblur=luma_radius='min(h,w)/30':luma_power=2" -y boxblur.mp4 模糊虛化
疊加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
2.2.5 FFmpeg管道式語法
規則：
用[name] 來命名流 濾鏡之間用 , 分隔 流之間用 ; 分隔 第i個輸入命為[i-1] 第一個輸入文件的視頻流和音頻流為[0:v] 和[0:a] 最后一個流名可省略
舉例：
":v]split[front][back]; //復制并分離成front和back兩條流//背景流scale=1280:-2, //等比例縮放到輸出寬度1280boxblur=luma_radius='min(h,w)/30':luma_power=2, //模糊crop=iw:720[background]; //剪裁到1280:720=-2:720[foreground]; //等比例縮放到輸出高度720=(W-w)/2:(H-h)/2 //疊加"
實際效果：
2.3 前端技術選型
2.4 前后端功能邊界及交互
2.4.1 前后端功能邊界
用戶與視頻編輯器的交互 視頻簡單預覽（受限于前后端技術棧差異和使用的資源差異，預覽效果與最終結果可能不盡相同） 將用戶在編輯界面操作的結果轉換成時間軸數據結構 ...
時間軸轉譯成FFmpeg命令 視頻產出后調用視頻發布流程 ...
字幕 <==> 音頻 素材上傳 ...
黃線內的功能區 綠線內的多軌道編輯區 紅線內的快速預覽區
2.4.2 時間軸數據結構
{"timeline":{"video_track": [ //視頻軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //可以是視頻video, 圖片image, 轉場動畫transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "negative", // 效果: 負片,模糊,浮雕,黑白 等等"duration": 1.5, //時長"speed": 1, //播放速度"animation": "zoompan", //視頻資源的動畫效果, 如鏡頭晃動, 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音頻軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "jazz", // 效果: 爵士, 搖滾, 人聲 等等平衡器效果"duration": 1.5, //時長"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //語音轉字幕}],"subtitle": [ //字幕軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"style": "Arial,23,yellow,white", // 效果: 字體,大小,顏色,描邊顏色"duration": 1.5, //時長"text": "這是一條字幕","pos_x": 100, //字幕定位"pos_y": 200, //字幕定位"tts": true, //使用字幕合成語音}],"watermark": [ //水印,特圖{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"style": "transparent", //可以是透明transparent, 負片 等效果"style_params": "0.8", //效果的具體參數, 如透明度等"duration": 1.5, //時長"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //貼圖定位"pos_y": 200, //貼圖定位"height": 100, //貼圖高度"width": 100, //貼圖寬度}]},"author_info":{}, //作者信息"extra":{}, //其他信息}
2.4.3 異步調用和輪詢
2.5 后端時間軸轉譯流程
3. 百家號在線視頻編輯器的具體實現
3.1 百家號視頻編輯器整體架構
3.2 用戶界面和服務接口
3.3 業務層: 時間軸轉譯
3.3.1 圖片視頻化
blur：傳入視頻/圖片比例和尺寸可能與最終輸出結果不一致，如手機豎屏拍攝的視頻、網上下載的圖片等等。之前業內對于不同比例的視頻，要么留黑邊，要么局部裁剪。隨著手機短視頻的興起，現在流行的做法是如圖13所示,，用模糊放大的背景圖代替黑邊。
zoompan：對于傳入的靜態圖片，通常要將圖片運動起來，使畫面不至于太死板，獲得更好的展現效果。
3.3.2 視頻連接及轉場
concat：將傳入的個圖片/視頻流進行合并，連接成一條更長的視頻軌。 overlay：在視頻和視頻相連接的時刻，添加一層轉場動畫，避免生硬的直接畫面切換。
3.3.3 音頻
將傳入的多段視頻伴音/配音/TTS朗讀接合成一條長音軌。 根據用戶選擇添加BGM，使視頻更有氛圍。 處理淡入淡出，避免生硬切換。
3.3.4 字幕
添加ass特效字幕頭。 根據時間軸中的文本，生成ass字幕文件。 將ass字幕文件壓制到視頻流中。
3.3.5 組裝
將所有濾鏡命令用管道式濾鏡流方式組合，生成濾鏡流腳本。 將濾鏡流腳本與生成的ass字幕同時分別上傳到BOS上，便于后續FFmpeg命令直接讀取和執行。
3.3.6 其他
需要在空白位置添加特定長度的空白視頻/音頻，保證產出視頻的時間軸與視頻編輯器界面的時間軸一致。 對較長的文本，需要精細拆分，以保證每段字幕都與TTS朗讀同步（這一步驟在UI層進行計算）。
3.4 內部服務
3.5 離線調度
4. 離線調度框架：實現分布式FFmpeg調度
4.1 Dispatch架構圖
4.2 Dispatch實現原理
實例啟動時，Redis Hash數據結構注冊自己，member=ip，value = 當前隊列長度：當前狀態：更新時間戳； 任何一個接收到Service層模塊的請求后，如果自己當前隊列長度為0，直接本地執行，否則將請求轉發給隊列最短的正常實例； 轉發請求前先要從Redis獲取所有Dispatch數據，解析所有實例的 ip、隊列長度、狀態、更新時間戳，根據規則選擇一個最佳實例轉發請求； 消費隊列中的請求時，調用FFmpeg從BOS上獲取輸入文件，管道化濾鏡流腳本，ass字幕文件, 然后執行道化濾鏡流腳本，在本地磁盤生成產出文件，并上傳BOS/VOD； 根據請求參數，回調Service層模塊接口，更新任務狀態。
5. 圖文轉視頻技術項目：依托于視頻編輯器后端服務的技術性嘗試
5.1 以場景為單元編輯視頻
5.2 文章落地頁URL轉視頻
5.3 圖文轉視頻Demo
6. 總結與展望
6.1 組合創新，適應潮流
6.2 技術共享，合作共贏
往期推薦