爱奇艺云剪辑Web端的技术实现

云编辑是一个集视频制作、制作和发布于一体的在线视频制作平台。它有工具和服务两种能力:在工具方面，云编辑有全面的视频编辑能力，比业内其他在线编辑工具更强大。其支持范围包括多声道音视频合成、音视频素材的剪切、剪切和拖拽、补丁字符设置和音频编辑等。在服务方面，云编辑平台支持多种服务，如服务调用、视频制作和分发、视频制作状态查询等

图1 Aiqiyi云编辑预览页面

随着网络技术的不断发展，特别是HTML5标准的发布和实施，前端不仅可以实现友好的界面显示和交互，还可以实现流媒体数据的操作和渲染随着网络功能的不断增强，网络应用程序的功能越来越复杂，性能要求也越来越高。使用桌面软件编辑音频和视频数据时，不仅需要更高的机器性能，还会消耗大量转码时间。爱奇艺云编辑通过网络技术优化在线音视频制作，云服务实现转码，有效降低用户对电脑性能的要求，提高转码性能和速度

云剪辑的主要功能有:

1、视频剪辑和拼接等基本功能

2、视频轨迹缩放和拖动的基本交互

3、视频粘贴和映射等基本打包功能

4、视频效果实时预览

5、视频在线转码功能

。这里的前四点需要在浏览器端完成。基于网络技术在浏览器端实现类似桌面的大规模编辑软件有很多技术难点:首先是

，如何在网络上实现模拟回放，实现所见即所得；

其次，当在网络端执行复杂的操作时，浏览器资源消耗很大。如何确保良好的互动体验和表现？

，除了剪切和拼接之外，视频制作，如粘贴字符、地图、滤镜等效果叠加，也需要浏览器来模拟，并且需要与服务器一致，这也是一个技术难点

让我们来看看爱奇艺技术团队如何通过网络技术在云编辑中实现在线音频和视频编辑。

云剪辑将电脑桌面程序功能迁移到云最初在一台计算机上运行的程序现在由多台计算机分别完成。以前由程序的不同模块执行的计算现在由通过网络连接的不同服务来协调。这给云编辑的架构设计带来了巨大的挑战。

如图2所示，aiqiyi云剪辑的整体架构分为四个部分:

图2 aiqiyi云剪辑整体架构图

网络客户端:负责与用户的具体交互，包括素材导入、视频剪辑和效果的实时预览具体功能参见图3

节点中间层:其主要功能是项目和视频数据的接收、转发、保存等

创作站:为云剪辑提供视频制作、转码、分发以及其他业务处理和调度

云平台:提供基本支持，如音频和视频转码、存储和分发等。

图3网络终端产品架构图

视频剪辑效果的实时预览已经成为云剪辑工具的技术难点Aiqiyi cloud clip player通过多个播放器实例创造性地结合了中继模式，实现了多个视频剪辑、剪切和拼接后实时预览的目的。剪辑预览播放器的原理如图4所示:

图4剪辑预览播放器

的原理图将多个视频播放器实例组合成一个视频播放器，并且通过画布投影来集成视频图片。那么应该解决以下问题:

2.1。多组视频播放器和播放顺序

的组织将视频播放器的实例分别放入不同的视频组视频团队是视频集成的更高层次的虚拟形式在每个视频组中，添加不同数量的视频实例。视频组有不同的分工。有些组负责预加载，有些组负责投影，有些组负责转换。视频团队相互补充，相互传递，相互制约。这种方式将有效解决视频拼接和播放的流畅问题。

2.2。如何确保在视频切换和跳过

期间正确准备要播放的资源当播放视频搜索时，不可能预测用户想要播放哪个视频段，因此没有必要预先准备资源。然而，经过大量的实际验证，我们发现创建一个专门缓存历史数据的视频团队可以有效地提高命中预载视频的概率。因此，将其他视频组中暂时未使用的资源聚合到缓存视频组中，缓存视频组通过自身灵活干预的优势，最大限度地重用缓存数据，从而最大限度地解决跳过播放中的卡顿现象。具体流程如图5所示:

图5预览播放器流程图

使用多个视频实例组合播放，对视频格式具有更好的兼容性和稳定性分组整合广播资源有效提高了资源利用率，减少了内存占用。

解决了视频预览的问题，并增加了各种包装定制和特殊效果功能，因为云剪辑的预览播放器图片被投影到画布元素上，这为我们的视频包装留下了很大的空间。视频打包过程如图6所示。

图6包装流程图

基于播放器组合中继原理和包装定制，云剪辑播放器实现了视频剪辑的实时预览功能，效果与云转码效果一致同时，从高性能和可维护性的角度出发，按照回放控制、核心和封装的层次结构设计播放器体系结构。图7是剪辑预览播放器的整体架构图

图7剪辑播放器架构图

视频制作本身就是用户和工具之间的一种强有力的互动云编辑是一个在线视频制作工具。与桌面程序相比，它的缺点主要在于性能和交互性。视频编辑轨迹是网络视频制作工具的难点在实现复杂的、可定制的视频制作功能的基础上，还应保证流畅的操作。我们可以通过各种方法解决这些问题，如功能分层和结构优化。图8是剪辑轨道的总体功能架构图:

图8剪辑轨道架构图

剪辑轨道要求在各种视频剪辑任务中有很大差异。一些只需要视频轨道，一些需要视频和音频轨道，一些需要简单的打包或映射轨道基于视频编辑的多样化需求，我们需要将轨道部分转换成可定制的组件。许多组件和复杂的交互使得代码结构必须合理，因此我们已经整理出了组件的开发方法和结构。图9是剪辑轨道:

的简化代码结构图。图9

的代码结构图清晰，确保了大型复杂程序的可伸缩性和可维护性，也确保了满足多样化的业务需求。

我们将使用节点中间层来解决接口集成、临时数据存储、前端和后端交互的数据一致性等问题。对于后端，它只需要提供原始数据，而不需要过多关注前端对接口数据格式的要求，更关注自己的业务。对于前端，获得定制的接口数据，并且可以减少前端发起的请求的数量。云剪辑中间层体系结构如下图10所示:

图10爱知云剪辑中间层体系结构图

，其中Nginx转发不需要中间层处理的请求，并提供静态资源服务节点处理业务逻辑，并负责与创作站的交互。云编辑的中间层采用自主开发的齐一翼框架。基于Koa2，它划分了路由器、控制器、服务、模型、dao等层。业务模块是相互分离的，模块的内部被分成多个层。代码架构如图11所示:

图11中间层代码架构图

我们通过网络端系统和代码架构设计解决了大量前端代码带来的代码维护和可伸缩性问题

5.1。Web端系统架构

在云编辑工具中，用户需要剪切、拼接、调整入口和出口点、修改速度和轨道上的其他操作，最后在播放器中预览该片段在整个操作过程中，平台定期将视频中间状态保存到服务器数据库中当页面刷新时，中间恢复视频从支持连续编辑的服务器获得。

图12数据流图

如图12所示，云编辑工具提供了大量的音频和视频资料以及各种文本模板。

云编辑工具以轨道数据为中心。一旦轨道数据发生变化(材料被拖至轨道，轨道内操作材料，配置区域修改材料)，数据分发过程将被触发。轨道将自己的数据分发给播放器、特效包装层和材料配置区域。这些模块处理分布式数据，并以它们需要的格式显示它。以磁道数据为中心的机制使磁道能够支持全局范围内的撤消重做，而不仅仅是磁道上的撤消重做

5.2。Web前端代码架构

云剪辑前端项目是在Vue+QUI2.0上构建的，这是由Aiqiyi前端团队孵化的一个组件库。这是一个基于Vue的网络端开发工具包，旨在为企业应用程序开发提供统一的前端解决方案，包括基本组件、工程框架和工具命令等。前端工程是一个包含多个模块的单页应用程序src目录下的代码结构如下图13所示

图13前端代码结构图

，其中编辑器模块根据功能分为六个部分:项目配置区项目、素材区素材、轨迹区轨迹、播放器区视频、装饰器特效区装饰器、视频发布区表单每个部分都有相应的存储来存储数据，实现了数据的统一管理和共享。

前端项目请求服务器的数据流如下图14所示

图14前端数据流图

通过结构化代码分层、严格的过程控制和精细的交互设计，使用网络技术实现复杂的音频和视频编辑随着网络技术的不断发展和完善，其性能和交互性将更接近甚至超过桌面程序。云编辑的网络端架构将继续与时俱进。我们还将引入网络组装来实现解码和计算，引入人工智能技术来支持视频等。目前，iQiyi云编辑仅适用于iQiyi的内部生产团队。未来，它将对外开放，为外部工作室、小团队和个人制作人提供高效便捷的创作能力，让每个人都能享受到网络+云服务+人工智能技术的便利，有效降低视频创作门槛，提高制作效率。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/202.html。