(馬蜂窩技術公眾號原創內容，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 文件

舉個