剪輯是集視頻制作、生產、分發等為一體的在線視頻制作平臺，具備工具及服務兩方面能力：工具方面，云剪輯具備全面視頻剪輯能力，相比行業中其他在線剪輯工具能力更強大，支持范圍包括多軌道音視頻合成、音視頻素材的裁剪、切割、拖拽，貼片貼字設置和音頻編輯等；服務方面，云剪輯平臺支持各種業務調用、視頻制作和分發以及視頻制作狀態查詢等服務。

隨著Web端技術的不斷發展，尤其是HTML5標準的發布和實施，前端不僅能夠實現友好的界面展示、交互，還能夠實現對流媒體數據的操作和渲染。Web端能力不斷的增強，Web應用功能越來越復雜，對性能要求也越來越高。當用桌面軟件進行音視頻數據的編輯時不僅對機器性能有較高的要求，還耗費大量轉碼時間。愛奇藝云剪輯則通過Web技術優化實現在線音視頻制作，云服務實現轉碼，有效降低了用戶的PC性能要求，還提升了轉碼性能與速度。

云剪輯的主要功能有：

1、視頻剪切、拼接等基礎功能

2、視頻軌道縮放、拖拽基本交互

3、視頻貼字、貼圖等基本包裝能力

4、視頻效果實時預覽

5、視頻的在線轉碼能力

這里前面4點都需要在瀏覽器端完成，基于Web技術在瀏覽器端實現類似桌面的大型編輯軟件有很多技術難點：

首先，如何在Web實現模擬播放，實現所見即所得；

其次，在Web端進行復雜的操作時，瀏覽器資源消耗較大，如何保證良好的交互體驗和性能；

再有，視頻制作除了剪切與拼接外，如貼字、貼圖、濾鏡等效果疊加，也需要瀏覽器端來進行模擬，且需要與服務端保持一致，這也是一個技術難點。

下面我們來看下愛奇藝技術團隊如何通過Web技術在云剪輯中實現在線的音視頻編輯的。

1 云剪輯架構設計的挑戰

云剪輯把PC桌面程序的功能遷移到云端。本來在一臺計算機上運行的程序，現在由多臺計算機分別完成。之前由一個程序不同模塊執行的計算，現在通過網絡相連的不同的服務協調完成。這就給云剪輯的架構設計帶來了很大的挑戰。

如圖2所示，愛奇藝云剪輯整體架構分為四個部分：

Web客戶端：負責與用戶的具體交互操作，包括素材導入、視頻剪輯和效果實時預覽。具體功能可參考圖3。

Node中間層：主要功能為項目和視頻數據接收、轉發、保存等。

創作中臺：為云剪輯提供視頻制作、轉碼、分發等業務處理和調度。

云平臺：提供基礎支撐，如音視頻轉碼、存儲分發等。

2 云剪輯實時預覽的技術原理

視頻剪輯效果的實時預覽，成為云剪輯工具的一個技術難點。愛奇藝云剪輯播放器，創造性的通過多個播放器實例組合接力的模式，實現了多個視頻裁剪、切割、拼接后實時預覽的目的。剪輯預覽播放器的原理如圖4所示：

多個視頻播放器實例組合成為一個視頻播放器,使用canvas投影整合視頻畫面。那么要解決下面的問題：

2.1. 多組視頻播放器以及播放次序組織問題

將視頻播放器的實例分別放入不同的視頻小組中。視頻小組是視頻整合的更高一級虛擬形式。每個視頻小組中，加入數量不等的視頻實例，視頻小組分工不同，有的小組負責預加載，有的小組負責投影，有的小組負責轉換。視頻小組互相補充，互相接力，又互相制約，通過這種方式將有效解決視頻拼接播放流暢性的問題。

2.2. 視頻在切換、跳轉時如何保證待播的資源準備得當

當視頻跳轉(seek)播放時，不能預測用戶要播放哪個視頻的哪個片段，也就談不上提前準備資源了。但是我們經過大量的實際驗證發現，打造一個專門用來緩存歷史數據的視頻小組，能有效提高命中預加載視頻的幾率。所以將其他視頻小組中暫時不用的資源聚合到緩存視頻小組，緩存視頻小組再通過自己靈活介入的優勢，將緩存數據最大限度的復用，這樣就最大限度的解決跳轉播放時出現的卡頓現象。具體流程如圖5所示：

利用多個視頻實例組合播放，對視頻格式有比較好的兼容性與穩定性。通過分組的方式整合播放資源，有效的提升了資源的利用率，降低了內存占用。

解決了視頻預覽的問題，還要加入各種各樣的包裝定制和特效功能，因為云剪輯的預覽播放器畫面是投影在canvas元素上的，這就給我們的視頻包裝留下了很大的發揮空間。視頻包裝流程如圖6所示。

基于播放器組合接力原理以及包裝定制等能力，云剪輯播放器實現了視頻剪輯的實時預覽功能，且效果與云端轉碼效果一致。同時從高性能、可維護性等角度出發，我們對播放器架構按播放控制、核心、包裝進行分層設計。圖7是剪輯預覽播放器的整體架構圖。

3 視頻剪輯軌道如何實現

視頻制作本身是用戶與工具強交互的行為。云剪輯是一個在線視頻制作工具，相比桌面程序的劣勢主要在性能與交互上，其中視頻剪輯軌道是視頻制作工具Web化的難點。在實現復雜的、可定制化的視頻制作功能的基礎上，還要保證操作流暢性。我們通過功能分層與結構優化等多種方式來解決這些問題，圖8是剪輯軌道整體的功能架構圖：

剪輯軌道需求在各個視頻剪輯任務中差別較大，有的只需要視頻軌道，有的需要視頻和音頻軌道，有的需要簡單的包裝或者貼圖軌道。基于視頻剪輯的多元化的需求，我們需要將軌道部分打造成可定制化的組件。眾多的組件和復雜的交互使得代碼結構是否合理就非常必要，因此我們對組件的開發方式和結構均進行了整理。圖9是剪輯軌道簡化后的代碼結構圖：

結構的清晰保證了大型復雜程序的可擴展性和可維護性，也保證了多元化的業務需求得到滿足。

4 云剪輯中間層：Node是前端與后端之間的橋梁

我們會通過Node中間層來解決接口整合、臨時數據存儲、前后端交互的數據一致性等問題。對于后端來說，只需提供原始數據而不必過多關注前端對接口數據格式的要求，更加專注于自身業務。對前端來說，獲得了定制化的接口數據，也能夠減少前端發起請求的次數。云剪輯中間層架構如下圖10所示：

其中Nginx轉發無需經過中間層處理的請求，提供靜態資源服務。Node處理業務邏輯，負責與創作中臺的交互。云剪輯中間層采用了自研的qiyi-wings框架，在Koa2的基礎上，劃分了router、controller、service、model、dao等層次。業務模塊之間相互分離，模塊內部按層次劃分。代碼架構如下圖11所示：

5 Web端整體架構

我們通過Web端系統與代碼架構設計解決數量龐大的前端代碼帶來的代碼維護與可擴展性問題。

5.1. Web端系統架構

在云剪輯工具中，用戶需要在軌道上對素材進行剪裁、拼接、調整出入點、修改倍速等一系列操作，最后在播放器中預覽成片。在整個操作過程中，平臺定時保存視頻中間態到服務端數據庫。當頁面刷新時，從服務端獲取中間態恢復視頻，支持繼續編輯。

如圖12所示，云剪輯工具提供海量的音視頻素材以及多種多樣的文字模板，

云剪輯工具以軌道數據為中心，軌道數據一旦發生變化（素材拖拽到軌道、軌道內操作素材、配置區修改素材），會觸發數據分發流程，軌道將自身數據分發到播放器、特效包裝層、素材配置區，這些模塊將分發的數據經過處理，轉化為自身需要的格式展示出來。以軌道數據為中心的機制使得軌道可支持全局范圍內的撤銷重做，不僅僅是軌道上的修改。

5.2. Web前端代碼架構

云剪輯前端工程是基于Vue+QUI2.0搭建的，QUI2.0是愛奇藝前端團隊孵化出來的組件庫。它是基于Vue的Web端開發套件，旨在為企業級應用開發提供統一的前端解決方案，包括基礎組件、工程框架和工具命令等。前端工程是包含多個模塊的單頁面應用。src目錄下的代碼結構如下圖13所示。

其中editor模塊按照功能劃分為六部分，項目配置區project，素材區material，軌道區track，播放器區video，裝飾器特效區decorator，視頻發布區forms。每個部分有相應的store存儲數據，實現數據統一管理與共享。

前端工程請求服務端數據的流程如下圖14。

6 總結

通過結構化的代碼分層、嚴格的流程控制、精細的交互設計，利用Web技術實現了復雜的音視頻編輯。隨著Web技術的不斷發展與完善，其性能與交互也將越來越接近甚至超越桌面程序。云剪輯的Web端架構也會隨著時代不斷進步，后續我們也將引入Web Assembly實現解碼和計算，引入AI技術為視頻賦能等。目前愛奇藝云剪輯只提供給愛奇藝內部的制作團隊使用，未來將對外開放，為外部工作室、小團隊、個人制作者提供高效便捷的創作能力，讓大家享用Web+云服務+AI技術的便利，有效降低視頻創作門檻，提高制作生產效率。

日實習

北京地區

、天弘基金、愛奇藝、滴滴出行

上海地區

西門子、上海東方證券資本投資有限公司

廣州地區

維他奶、網易游戲

深圳地區

中信銀行、iPIN

北京地區

【招聘崗位】HR 實習生

【工作地點】北京市

【崗位描述】

1. 協助招聘，電話預約、協調候選人、面試官時間，并安排面試

2. 基礎崗位招聘，網絡篩選簡歷、并進行電話面試

3. 協助進行員工入職、離職、績效的管理工作

4. 協助進行招聘渠道維護的相關工作

5. 協助進行人力資源相關的數據統計工作

【崗位要求】

1. 在讀 2018 屆準備讀研/出國的同學，2020 年畢業的本科或研究生

2. 2019 屆畢業準備就業的同學請勿投遞，請直接參加校招

3. 熟練運用 Excel、Word、PPT 等辦公軟件

4. 為人正直、親和力好、耐心、細致、認真、負責，抗壓

5. 善與人溝通、邏輯思維能力及應變能力較好，富于團隊協助精神

6. 盡快入職，能夠連續實習 3 個月及以上，每周出勤 4 天及以上者優先

【崗位待遇】

薪資為 120 元/天

【應聘方式】

1. 投遞郵箱：wanglijun.006@bytedance.com

2. 郵件命名：姓名+學校+專業+應聘崗位

天弘基金

【招聘崗位】大數據股權投資部實習生

【工作地點】北京

【崗位描述】

1. 協助項目經理完成行業分析及盡調報告等工作

2. 對標的項目開展盡職調查、參與專家訪談等

3. 項目經理要求的其他工作

【崗位要求】

1. 名校本科及以上（在讀），金融、財務、經濟、計算機、法律等專業，理工與金融雙背景優先

2. 對投資行業有興趣者優先

3. 具有較強的團隊協作意識和良好的信息搜集能力

4. 每周實習 4 天以上，至少三個月

5. 致力于在投資行業長期發展，善于自我激勵，能夠在壓力下獨立完成任務

【應聘方式】

1. 投遞郵箱：lushiyi@thfund.com.cn

2. 郵件命名：學校+專業+年級+姓名+畢業時間+實習開始時間+每周實習天數

愛奇藝

【招聘崗位】法務實習生

1. 負責法律部基礎合同、法律文件的核對、蓋章等工作

2. 負責法律部版權文件的審核

3. 配合公司內審、外審查找資料

4. 負責部分線上流程的發起、審批工作

【崗位要求】

1. 在校大學生，CET-4 級及以上水平，可連續實習至少 3 個月，每周至少可實習 4 個工作日

2. 可熟練操作計算機，熟悉各種辦公軟件

3. 能夠承擔一定的工作壓力，適應能力強，具備良好的溝通能力

4. 工作效率高，勤奮、負責、踏實，樂觀開朗

5. 有實習經歷，特別是互聯網、媒體實習經歷者優先，通過司法考試者優先

【應聘方式】

1. 投遞郵箱：mafengyun@qiyi.com

2. 郵件命名：姓名-學校-可實習時長

滴滴出行

【招聘崗位】策略運營實習生

1. 協助參與對滴滴司機創新性激勵方案的制定，包括設計實驗方案、建立評估標準、監控方案執行、評估方案結果等

2. 對海量數據進行分析處理，保證優質數據的輸出，產出有效的結論，撰寫項目分析報告

3. 協助參與公司內大數據、商業分析等團隊的合作，基于運營需要和數據洞察，提出產品、技術需求，并參與方案落地

【崗位要求】

1. 能熟練使用 Excel、PPT 等辦公軟件，熟悉 SQL、R 等數據分析工具，有較強的數據敏感度

2. 有經濟學、計算機、統計學等專業背景優先

3. 有數據分析實習實驗、互聯網運營實習經驗優先

4. 思維敏捷，有較強的鉆研學習能力，較好的溝通能力、文字處理能力和團隊合作能力

5. 一周工作時間五天，至少能實習 3 個月

6. 至少在校大二或以上年級，大四或研二、研三優先

【應聘方式】

1. 投遞郵箱：evarenfang@didichuxing.com

西門子

【招聘崗位】軟件技術支持實習生

【工作地點】上海市

【崗位職責】

1. 在西門子工業軟件高級工程師帶領下，專注于制造執行系統，質量管理系統，生產管理軟件，計劃排程類軟件的應用解決方案

2. 為客戶提供關鍵項目的系統數據，文檔準備和解決方案設計等工作

【任職要求】

1. 研究生一年級或者二年級，計算機相關專業

2. 有過開發 WEB 網頁者優先（熟悉 C++、HTML5、Angularjs）

【崗位待遇】

薪資為 2000-3000 元/月

【應聘方式】

1. 投遞郵箱：liuchang@siemens.com

2. 郵件命名：姓名+學校+專業+應聘崗位

上海東方證券資本投資有限公司

【招聘崗位】基金運營實習生

【工作地點】上海市復興東路外灘

【崗位描述】

1. 配合完成基金運行相關輔助工作

2. 配合來訪客戶的接待、基本咨詢和引見

3. 配合完成文秘、檔案、用印等行政事務事務性工作

4. 其他支持性工作

【崗位要求】

1. 全日制本科或碩士在讀學生

2. 熟練使用 MS Office

3. 每周至少能實習 4 個工作日，能保證長期實習者優先

4. 具有較強的學習能力、溝通能力

5. 工作踏實、穩重

【應聘方式】

1. 投遞郵箱：jiaweizhen@orientsec.com.cn

2. 郵件命名：崗位-姓名-學校

廣州地區

維他奶

【招聘崗位】HR Intern

【工作地點】廣州東站中泰國際廣場北塔 37 樓

【崗位描述】

1. 負責維他奶中國內部溝通平臺（微信企業號）的運營、文案編寫、海報設計、美工創意等工作

2. 參與員工活動創意方案（線上/線下）討論、設計、撰寫及執行，盡情發揮你的腦洞和創意，提高員工體驗

3. 其他支持性工作

【崗位要求】

1. 我們希望你 Idea 越多越好，熱衷于策劃和設計工作，關注新鮮創意，并且有好奇心和想法去實現它

2. 熟練操作 PPT、PS 等軟件

3. 有較強的學習與解決問題的能力，良好的組織規劃和溝通協調能力

4. 做事細心認真，責任心強，具有一定抗壓能力和創新意識

5. 有公眾號運營經驗及策劃組織校園社團活動者優先

6. 每周 4 天，可持續實習 3 個月以上，6 月到崗

7. 本科大二、大三、大四學生，專業不限

【崗位待遇】

1. 具有競爭力的實習薪酬 150 元/天，不扣稅

2. 上癮維他檸檬茶、維他奶任性喝

3. 提供轉正機會

【應聘方式】

1. 投遞郵箱：VitasoyHR@yeah.net（請附帶相關作品）

2. 郵件命名：學校-名字-年級-每周幾天-到崗時間

網易游戲

【招聘崗位】新媒體運營實習生

【工作地點】廣州市天河區金穗路 62 號僑鑫國際大廈

【崗位描述】

1. 負責部門微博、抖音、微信等新媒體的運營工作，主要包括日常編輯，活動發布，配合公眾號開發等工作

2. 負責視頻的創意策劃、設計，素材的收集、處理，以及基本的視頻編輯和制作

【崗位要求】

本崗位對游戲經歷有一定要求，請務必在簡歷中注明自己的游戲經歷

【崗位待遇】

2500 元/月，提供免費午餐晚餐

【應聘方式】

1. 投遞郵箱：wangyiyouxizp@163.com

2. 郵件命名：新媒體實習生-廣州]姓名-學校-專業-每周可實習天數（不含周末）-可持續幾個月

深圳地區

中信銀行

【招聘崗位】客服專員（50 人）

【工作地點】深圳市布吉中海信產業園

【崗位描述】

1. 信用卡業務處理，通過中信銀行 400 服務熱線，在線解決客戶各種業務需求，如提高信用額度、分期還款、賬戶查詢等（此崗位是呼入客服代表，只負責接聽客戶的來電，非銷售崗位）

2. 信用卡服務顧問，引導客戶合理使用信用卡，讓客戶充分了解信用卡各種優惠活動及特色活動，并享受信用卡帶來的便利

3. 客戶服務品質提升，收集并反饋客戶建議，推動中信銀行信用卡客戶服務流程優化，提升客戶滿意度

【崗位要求】

1. 年齡 35 歲以下，全日制大專以上學歷，專業不限，接收 2018 屆應屆畢業生

2. 普通話標準，表達流利，身體健康

3. 每周工作五天，每天八小時，輪班制

4. 實習期為三個月，取得畢業證后可轉正

【崗位待遇】

1. 實習補貼 4000 元以上/月，轉正后 7000+ 元/月

2. 提供工作餐，有過節費、醫療基金、福利卡、通訊補貼等福利，過節費 7500 元/年，4 次季度獎 1 次年終獎五位數

3. 提供住房公積金、五險一金、意外傷害保險等

4. 提供相關專業培訓，有各式各樣的娛樂設施和團建活動

5. 表現優秀者可正式編制

【應聘方式】

1. 投遞郵箱：3450875221@qq.com

2. 郵件命名：姓名+聯系電話+學歷+2018 屆/往屆

iPIN

【招聘崗位】運營實習崗（新媒體）

【工作地點】深圳市南山區科興科學園 B3 18 樓

【崗位描述】

1. 負責官方自媒體平臺（微信公眾號、、知乎等等)的日常內容的撰寫和運營

2. 收集、研究網絡熱點話題，結合新媒體特性，對內容的實時調整和更新

3. 完成上級交代的任務，能獨當一面

【崗位要求】

1. 全日制在校大學生，中文學、新聞學、教育學、師范專業等相關專業優先

2. 具有較強的新聞、熱點敏敢性，有較強的文案功底

3. 網感好，創意優，執行力強，有良好的策略思考能力并能獨立撰寫方案，一定程度掌握圖片處理軟件優先

4. 知識面廣，思維活躍，工作主動，有責任感，能承受較大的工作壓力

5. 有新媒體運營經驗優先；有微博和微信等內容運營成功案例者優先

6. 良好團隊合作精神，較強的執行力，獨立思考能力 ，觀察力和應變能力

7. 有互聯網科技類公司經驗、對教育行業有一定見解者優先

【應聘方式】

1. 投遞郵箱：hr@ipin.com（簡歷需附帶作品）

2. 郵件命名：應聘崗位-姓名-學校

剪輯是集視頻制作、生產、分發等為一體的在線視頻制作平臺，具備工具及服務兩方面能力：工具方面，云剪輯具備全面視頻剪輯能力，相比行業中其他在線剪輯工具能力更強大，支持范圍包括多軌道音視頻合成、音視頻素材的裁剪、切割、拖拽，貼片貼字設置和音頻編輯等；服務方面，云剪輯平臺支持各種業務調用、視頻制作和分發以及視頻制作狀態查詢等服務。

隨著Web端技術的不斷發展，尤其是HTML5標準的發布和實施，前端不僅能夠實現友好的界面展示、交互，還能夠實現對流媒體數據的操作和渲染。Web端能力不斷的增強，Web應用功能越來越復雜，對性能要求也越來越高。當用桌面軟件進行音視頻數據的編輯時不僅對機器性能有較高的要求，還耗費大量轉碼時間。愛奇藝云剪輯則通過Web技術優化實現在線音視頻制作，云服務實現轉碼，有效降低了用戶的PC性能要求，還提升了轉碼性能與速度。

云剪輯的主要功能有：

1、視頻剪切、拼接等基礎功能

2、視頻軌道縮放、拖拽基本交互

3、視頻貼字、貼圖等基本包裝能力

4、視頻效果實時預覽

5、視頻的在線轉碼能力

這里前面4點都需要在瀏覽器端完成，基于Web技術在瀏覽器端實現類似桌面的大型編輯軟件有很多技術難點：

首先，如何在Web實現模擬播放，實現所見即所得；

其次，在Web端進行復雜的操作時，瀏覽器資源消耗較大，如何保證良好的交互體驗和性能；

再有，視頻制作除了剪切與拼接外，如貼字、貼圖、濾鏡等效果疊加，也需要瀏覽器端來進行模擬，且需要與服務端保持一致，這也是一個技術難點。

下面我們來看下愛奇藝技術團隊如何通過Web技術在云剪輯中實現在線的音視頻編輯的。

1 云剪輯架構設計的挑戰

云剪輯把PC桌面程序的功能遷移到云端。本來在一臺計算機上運行的程序，現在由多臺計算機分別完成。之前由一個程序不同模塊執行的計算，現在通過網絡相連的不同的服務協調完成。這就給云剪輯的架構設計帶來了很大的挑戰。

如圖2所示，愛奇藝云剪輯整體架構分為四個部分：

Web客戶端：負責與用戶的具體交互操作，包括素材導入、視頻剪輯和效果實時預覽。具體功能可參考圖3。

Node中間層：主要功能為項目和視頻數據接收、轉發、保存等。

創作中臺：為云剪輯提供視頻制作、轉碼、分發等業務處理和調度。

云平臺：提供基礎支撐，如音視頻轉碼、存儲分發等。

2 云剪輯實時預覽的技術原理

視頻剪輯效果的實時預覽，成為云剪輯工具的一個技術難點。愛奇藝云剪輯播放器，創造性的通過多個播放器實例組合接力的模式，實現了多個視頻裁剪、切割、拼接后實時預覽的目的。剪輯預覽播放器的原理如圖4所示：

多個視頻播放器實例組合成為一個視頻播放器,使用canvas投影整合視頻畫面。那么要解決下面的問題：

2.1. 多組視頻播放器以及播放次序組織問題

將視頻播放器的實例分別放入不同的視頻小組中。視頻小組是視頻整合的更高一級虛擬形式。每個視頻小組中，加入數量不等的視頻實例，視頻小組分工不同，有的小組負責預加載，有的小組負責投影，有的小組負責轉換。視頻小組互相補充，互相接力，又互相制約，通過這種方式將有效解決視頻拼接播放流暢性的問題。

2.2. 視頻在切換、跳轉時如何保證待播的資源準備得當

當視頻跳轉(seek)播放時，不能預測用戶要播放哪個視頻的哪個片段，也就談不上提前準備資源了。但是我們經過大量的實際驗證發現，打造一個專門用來緩存歷史數據的視頻小組，能有效提高命中預加載視頻的幾率。所以將其他視頻小組中暫時不用的資源聚合到緩存視頻小組，緩存視頻小組再通過自己靈活介入的優勢，將緩存數據最大限度的復用，這樣就最大限度的解決跳轉播放時出現的卡頓現象。具體流程如圖5所示：

利用多個視頻實例組合播放，對視頻格式有比較好的兼容性與穩定性。通過分組的方式整合播放資源，有效的提升了資源的利用率，降低了內存占用。

解決了視頻預覽的問題，還要加入各種各樣的包裝定制和特效功能，因為云剪輯的預覽播放器畫面是投影在canvas元素上的，這就給我們的視頻包裝留下了很大的發揮空間。視頻包裝流程如圖6所示。

基于播放器組合接力原理以及包裝定制等能力，云剪輯播放器實現了視頻剪輯的實時預覽功能，且效果與云端轉碼效果一致。同時從高性能、可維護性等角度出發，我們對播放器架構按播放控制、核心、包裝進行分層設計。圖7是剪輯預覽播放器的整體架構圖。

3 視頻剪輯軌道如何實現

視頻制作本身是用戶與工具強交互的行為。云剪輯是一個在線視頻制作工具，相比桌面程序的劣勢主要在性能與交互上，其中視頻剪輯軌道是視頻制作工具Web化的難點。在實現復雜的、可定制化的視頻制作功能的基礎上，還要保證操作流暢性。我們通過功能分層與結構優化等多種方式來解決這些問題，圖8是剪輯軌道整體的功能架構圖：

剪輯軌道需求在各個視頻剪輯任務中差別較大，有的只需要視頻軌道，有的需要視頻和音頻軌道，有的需要簡單的包裝或者貼圖軌道。基于視頻剪輯的多元化的需求，我們需要將軌道部分打造成可定制化的組件。眾多的組件和復雜的交互使得代碼結構是否合理就非常必要，因此我們對組件的開發方式和結構均進行了整理。圖9是剪輯軌道簡化后的代碼結構圖：

結構的清晰保證了大型復雜程序的可擴展性和可維護性，也保證了多元化的業務需求得到滿足。

4 云剪輯中間層：Node是前端與后端之間的橋梁

我們會通過Node中間層來解決接口整合、臨時數據存儲、前后端交互的數據一致性等問題。對于后端來說，只需提供原始數據而不必過多關注前端對接口數據格式的要求，更加專注于自身業務。對前端來說，獲得了定制化的接口數據，也能夠減少前端發起請求的次數。云剪輯中間層架構如下圖10所示：

其中Nginx轉發無需經過中間層處理的請求，提供靜態資源服務。Node處理業務邏輯，負責與創作中臺的交互。云剪輯中間層采用了自研的qiyi-wings框架，在Koa2的基礎上，劃分了router、controller、service、model、dao等層次。業務模塊之間相互分離，模塊內部按層次劃分。代碼架構如下圖11所示：

5 Web端整體架構

我們通過Web端系統與代碼架構設計解決數量龐大的前端代碼帶來的代碼維護與可擴展性問題。

5.1. Web端系統架構

在云剪輯工具中，用戶需要在軌道上對素材進行剪裁、拼接、調整出入點、修改倍速等一系列操作，最后在播放器中預覽成片。在整個操作過程中，平臺定時保存視頻中間態到服務端數據庫。當頁面刷新時，從服務端獲取中間態恢復視頻，支持繼續編輯。

如圖12所示，云剪輯工具提供海量的音視頻素材以及多種多樣的文字模板，

云剪輯工具以軌道數據為中心，軌道數據一旦發生變化（素材拖拽到軌道、軌道內操作素材、配置區修改素材），會觸發數據分發流程，軌道將自身數據分發到播放器、特效包裝層、素材配置區，這些模塊將分發的數據經過處理，轉化為自身需要的格式展示出來。以軌道數據為中心的機制使得軌道可支持全局范圍內的撤銷重做，不僅僅是軌道上的修改。

5.2. Web前端代碼架構

云剪輯前端工程是基于Vue+QUI2.0搭建的，QUI2.0是愛奇藝前端團隊孵化出來的組件庫。它是基于Vue的Web端開發套件，旨在為企業級應用開發提供統一的前端解決方案，包括基礎組件、工程框架和工具命令等。前端工程是包含多個模塊的單頁面應用。src目錄下的代碼結構如下圖13所示。

其中editor模塊按照功能劃分為六部分，項目配置區project，素材區material，軌道區track，播放器區video，裝飾器特效區decorator，視頻發布區forms。每個部分有相應的store存儲數據，實現數據統一管理與共享。

前端工程請求服務端數據的流程如下圖14。

6 總結

通過結構化的代碼分層、嚴格的流程控制、精細的交互設計，利用Web技術實現了復雜的音視頻編輯。隨著Web技術的不斷發展與完善，其性能與交互也將越來越接近甚至超越桌面程序。云剪輯的Web端架構也會隨著時代不斷進步，后續我們也將引入Web Assembly實現解碼和計算，引入AI技術為視頻賦能等。目前愛奇藝云剪輯只提供給愛奇藝內部的制作團隊使用，未來將對外開放，為外部工作室、小團隊、個人制作者提供高效便捷的創作能力，讓大家享用Web+云服務+AI技術的便利，有效降低視頻創作門檻，提高制作生產效率。