剪辑是集视频制作、生产、分发等为一体的在线视频制作平台，具备工具及服务两方面能力：工具方面，云剪辑具备全面视频剪辑能力，相比行业中其他在线剪辑工具能力更强大，支持范围包括多轨道音视频合成、音视频素材的裁剪、切割、拖拽，贴片贴字设置和音频编辑等；服务方面，云剪辑平台支持各种业务调用、视频制作和分发以及视频制作状态查询等服务。

随着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技术的便利，有效降低视频创作门槛，提高制作生产效率。