(馬蜂窩技術公眾號原創內容，ID: mfwtech)

熟悉馬蜂窩的朋友一定知道，點選馬蜂窩 App 首頁的釋出按鈕，會發現釋出的內容已經被簡化成「圖文」或者「視訊」。

長期以來，遊記、問答、攻略等圖文形式的形態一直是馬蜂窩發展的優勢所在。將短視訊提升至與圖文並列的位置，是因為對於今天的移動網際網路使用者來說，內容更真實直觀、資訊密度更大、沉浸感更強的短視訊已經成為剛需。為了使旅遊使用者擁有更好的內容互動體驗，豐富和完整原有的內容生態體系，馬蜂窩加碼了對短視訊領域的佈局。

現在，每天都會有大量短視訊在馬蜂窩產生，覆蓋美食、探店、景點打卡、住宿體驗等多種當地玩樂場景。馬蜂窩希望平臺的短視訊內容除了「好看」之外，更要「好用」。這個「好用」不僅僅是為有需求的使用者提供好用的旅行資訊，更是指通過技術讓使用者的短視訊創作更加簡單易行。

為此，我們在馬蜂窩旅遊 App 的視訊編輯功能中提供了「自定義編輯」與「模板創作」兩種編輯模式，使使用者既可以通過「模板」快速創作與模板視訊同款的炫酷視訊，也能夠進入「自定義編輯」模式發揮自己的創意，生成個性化視訊。

本文將圍繞馬蜂窩旅遊 App iOS 端中的視訊編輯功能，和大家分享我們團隊視訊編輯框架的設計及業務實踐。

Part.1 需求分析

如前言所述，我們要做的是能夠支援「自定義編輯」與「模板創作」兩種模式的視訊編輯功能。

圖1：產品示意圖

首先我們梳理一下「自定義編輯」模式下，需要提供的功能：

• 視訊拼接：將多段視訊按順序拼接成一段視訊

• 播放圖片：將多張圖片合成一段視訊

• 視訊裁剪：刪除視訊中某個時間段的內容

• 視訊變速：調整視訊的播放速度

• 背景音樂：新增背景音樂，可以與視訊原音做混音

• 視訊倒播：視訊倒序播放

• 轉場過渡：拼接的兩段視訊切換時增加一些過渡效果

• 畫面編輯：畫面旋轉，畫布分割槽、設定背景色，增加濾鏡、貼紙、文字等附加資訊

有了上述這些功能，便可以滿足「自定義編輯」模式的需求，能夠讓使用者通過我們的視訊編輯功能完成自己的創作。但是為了進一步降低視訊編輯功能的使用門檻，讓製作炫酷視訊變得簡單，我們還需要支援「模板創作」模式。即為使用者提供「模板視訊」，使用者只需要選擇視訊或者圖片，便可創作出與「模板視訊」有同樣編輯特效的同款視訊，實現「一鍵編輯」。

支援「模板創作」模式後，我們視訊編輯功能最終的流程圖如下：

圖2：完整流程圖

如圖所示，在媒體檔案之外，多了一個模板 A 的輸入，模板 A 描述了要對使用者選擇的媒體檔案做哪些編輯。同時在編輯器的輸出中多了一個模板 B，模板 B 描述了使用者在完成編輯後，最終做了哪些編輯。其中模板 B 的輸出，為我們解決了「模板視訊」來源的問題，即「模板視訊」既可以通過運營手段生產，也可以將使用者通過「自定義編輯」模式創作的視訊作為模板視訊，使其他使用者瀏覽該使用者釋出的視訊時，可以快速創作同款視訊。

通過上述需求分析的過程，可以總結出我們的視訊編輯功能主要支援兩個能力：

1. 常規視訊編輯的能力

2. 描述如何編輯的能力

這兩個能力的劃分，為我們接下來進行視訊編輯框架的設計提供了方向。

Part.2 框架設計

常規視訊編輯的能力是一個視訊編輯框架需要提供的基本能力，能夠支撐業務上的「自定義編輯」模式。「描述如何編輯」的能力則是將常規視訊編輯能力進行抽象建模，描述「對視訊做哪些編輯」這件事，然後將這種描述模型轉化為具體的視訊編輯功能，便能夠支撐起業務上的「模板創作」模式。所以我們的編輯框架可以劃分為兩個主要的模組：

• 編輯模組

• 描述模組

在兩個模組之間，還需要一個轉換模組，完成視訊編輯模組與描述模組之間的雙向轉換。下圖為我們需要的視訊編輯框架示意圖：

圖3：視訊編輯框架示意圖

• 編輯模組所需要的具體功能，可以隨著業務上的需求不斷迭代新增，目前我們要支援的功能如圖中所列。

• 描述模組則需要一個描述模型，將媒體素材與各種編輯功能完整的描述出來。同時也需要將模型儲存成檔案，從而能夠被傳輸分發，我們稱之為描述檔案。

• 另外在描述檔案的基礎上，「模板創作」模式中的「模板」還需要標題、封面圖等運營相關的資訊。所以還需要提供一個運營加工的功能，能夠讓運營同事將描述檔案加工為模板。

• 轉換模組負責的則是將視訊編輯功能抽象為描述檔案、將描述檔案解析為具體的編輯功能的任務，保證抽象與解析的正確性至關重要。

視訊編輯模組在不同的開發平臺上都有很好的實現方案，比如 iOS 原生提供的 AVFoundation，使用廣泛的第三方開源庫 GPUImage，以及更加通用的 ffmpeg 等。具體的實現方案可以結合業務場景與專案規劃進行選擇，我們目前在 iOS 端採用的方案是蘋果原生的 AVFoundation。如何結合 AVFoundation 實現我們的視訊編輯框架會在下文具體介紹。接下來我們就來看下具體功能模組的設計與實現。

Part.3 模組功能與實現

3.1 描述模組

3.1.1 功能劃分

首先我們對「自定義編輯」模式下需要支援的具體功能進行分析，發現可以以編輯的物件為標準，將編輯功能劃分為兩類：段落編輯、畫面編輯。

• 段落編輯：將視訊段看作編輯物件，不關心畫面內容，只在視訊段層面上進行編輯，包含如下功能：

圖4：段落編輯

• 畫面編輯：將畫面內容作為編輯物件，包含如下功能：

圖5：畫面編輯

3.1.2 視訊編輯描述模型

有了編輯功能的劃分後，要描述「對視訊進行哪些編輯」，我們還需要一個視訊編輯描述模型。定義如下幾個概念：

• 時間線：由時間點組成的單向遞增直線，起始點為 0 點

• 軌道：以時間線為座標系的容器，容器記憶體放的是每個時間點需要的內容素材及「畫面編輯」功能

1. 軌道具有型別，一條軌道僅支援一種型別

• 段落：軌道中的一段，即軌道所屬時間線上兩個時間點及兩點之間的部分

1. 段落也具有型別，與其所屬軌道型別保持一致

軌道型別列表：

其中「視訊」、「圖片」、「音訊」型別軌道，是提供畫面與聲音內容的軌道。其餘幾個型別的軌道，則是用於描述具體做哪些畫面編輯功能的軌道。特效型別軌道中可以指定若干畫面編輯效果，如旋轉、分割槽等。

結合編輯功能的劃分，我們可以看出段落編輯功能的編輯物件是軌道內的段落，畫面編輯功能的編輯物件是軌道記憶體放的內容素材。

有了時間線、軌道、段落三個概念以及段落編輯、畫面編輯兩個編輯行為的劃分後，我們在抽象層面描述視訊的編輯過程如下：

圖6：視訊編輯描述模型示意圖

如上圖所示，通過該模型，我們已經能夠完整的描述出「對視訊進行哪些編輯」：

• 創作一個時長 60 秒的視訊，內容素材有視訊，圖片，音樂，分別對應軌道 1、軌道 2、軌道 3，並且有轉場、濾鏡效果，由軌道 4、軌道 5 指定（其他效果不再單獨描述，以轉場、濾鏡效果為參考）。

• 該視訊由軌道 1 的 [0-20] 段、軌道 2 的 [15-35] 段、軌道 1 的 [30-50] 段以及軌道 2 的 [45-60] 段拼接而成。

• [0-60] 視訊全段有背景音樂，音樂由軌道 3 指定。

• [15-20]、[30-35]、[45-50] 三段內有轉場效果，轉場效果由軌道 4 指定。

• [15-35] 段有濾鏡效果，濾鏡效果由軌道 5 指定。

3.1.3 描述檔案與模板

有了上述的視訊編輯描述模型後，我們還需要具體的檔案來儲存和分發該模型，即描述檔案，我們使用 JSON 檔案來實現。同時還需要提供運營加工的能力，使運營同事為描述檔案新增一些運營資訊，生成模板。

• 描述檔案: 根據視訊編輯模型生成一份 JSON 檔案

舉個