源码
马蜂窝视频编辑框架设计及在 iOS 端的业务实践
投稿者 **_(马蜂窝技术公众号原创内容/uff0cID: mfwtech)_** 熟悉马蜂窝的朋友一定知道/uff0c点击马蜂窝 App 首页的发布按钮/uff0c会发现发布的内容已经被简化成「图文」或者「视频」。 长期以来/uff0c游记、问答、攻略等图文形式的形态一直是马蜂窝发展的优势所在。将短视频提升至与图文并列的位置/uff0c是因为对于今天的移动互联网用户来说/uff0c内容更真实直观、信息密度更大、沉浸感更强的短视频已经成为刚需。为了使旅游用户拥有更好的内容交互体验/uff0c丰富和完整原有的内容生态体系/uff0c马蜂窝加码了对短视频领域的布局。 现在/uff0c每天都会有大量短视频在马蜂窝产生/uff0c覆盖美食、探店、景点打卡、住宿体验等多种当地玩乐场景。马蜂窝希望平台的短视频内容除了「好看」之外/uff0c更要「好用」。这个「好用」不仅仅是为有需求的用户提供好用的旅行信息/uff0c更是指通过技术让用户的短视频创作更加简单易行。 为此/uff0c我们在马蜂窝旅游 App 的视频编辑功能中提供了「自定义编辑」与「模板创作」两种编辑模式/uff0c使用户既可以通过「模板」快速创作与模板视频同款的炫酷视频/uff0c也能够进入「自定义编辑」模式发挥自己的创意/uff0c生成个性化视频。 本文将围绕马蜂窝旅游 App iOS 端中的视频编辑功能/uff0c和大家分享我们团队视频编辑框架的设计及业务实践。 # Part.1 需求分析 如前言所述/uff0c我们要做的是能够支持「自定义编辑」与「模板创作」两种模式的视频编辑功能。  **图1/uff1a产品示意图** 首先我们梳理一下「自定义编辑」模式下/uff0c需要提供的功能/uff1a - 视频拼接/uff1a将多段视频按顺序拼接成一段视频 - 播放图片/uff1a将多张图片合成一段视频 - 视频裁剪/uff1a删除视频中某个时间段的内容 - 视频变速/uff1a调整视频的播放速度 - 背景音乐/uff1a添加背景音乐/uff0c可以与视频原音做混音 - 视频倒播/uff1a视频倒序播放 - 转场过渡/uff1a拼接的两段视频切换时增加一些过渡效果 - 画面编辑/uff1a画面旋转/uff0c画布分区、设置背景色/uff0c增加滤镜、贴纸、文字等附加信息 有了上述这些功能/uff0c便可以满足「自定义编辑」模式的需求/uff0c能够让用户通过我们的视频编辑功能完成自己的创作。但是为了进一步降低视频编辑功能的使用门槛/uff0c让制作炫酷视频变得简单/uff0c我们还需要支持「模板创作」模式。即为用户提供「模板视频」/uff0c用户只需要选择视频或者图片/uff0c便可创作出与「模板视频」有同样编辑特效的同款视频/uff0c实现「一键编辑」。 支持「模板创作」模式后/uff0c我们视频编辑功能最终的流程图如下/uff1a  **图2/uff1a完整流程图** 如图所示/uff0c在媒体文件之外/uff0c多了一个模板 A 的输入/uff0c模板 A 描述了要对用户选择的媒体文件做哪些编辑。同时在编辑器的输出中多了一个模板 B/uff0c模板 B 描述了用户在完成编辑后/uff0c最终做了哪些编辑。其中模板 B 的输出/uff0c为我们解决了「模板视频」来源的问题/uff0c即「模板视频」既可以通过运营手段生产/uff0c也可以将用户通过「自定义编辑」模式创作的视频作为模板视频/uff0c使其他用户浏览该用户发布的视频时/uff0c可以快速创作同款视频。 通过上述需求分析的过程/uff0c可以总结出我们的视频编辑功能主要支持两个能力/uff1a 1. **常规视频编辑的能力** 2. **描述如何编辑的能力** 这两个能力的划分/uff0c为我们接下来进行视频编辑框架的设计提供了方向。 # Part.2 框架设计 常规视频编辑的能力是一个视频编辑框架需要提供的基本能力/uff0c能够支撑业务上的「自定义编辑」模式。「描述如何编辑」的能力则是将常规视频编辑能力进行抽象建模/uff0c描述「对视频做哪些编辑」这件事/uff0c然后将这种描述模型转化为具体的视频编辑功能/uff0c便能够支撑起业务上的「模板创作」模式。所以我们的编辑框架可以划分为两个主要的模块/uff1a - 编辑模块 - 描述模块 在两个模块之间/uff0c还需要一个转换模块/uff0c完成视频编辑模块与描述模块之间的双向转换。下图为我们需要的视频编辑框架示意图/uff1a ![在此输入链接描述][1] **图3/uff1a视频编辑框架示意图** - **编辑模块**所需要的具体功能/uff0c可以随着业务上的需求不断迭代添加/uff0c目前我们要支持的功能如图中所列。 - **描述模块**则需要一个描述模型/uff0c将媒体素材与各种编辑功能完整的描述出来。同时也需要将模型保存成文件/uff0c从而能够被传输分发/uff0c我们称之为描述文件。 - 另外在描述文件的基础上/uff0c「模板创作」模式中的「模板」还需要标题、封面图等运营相关的信息。所以还需要提供一个**运营加工**的功能/uff0c能够让运营同事将描述文件加工为模板。 - **转换模块**负责的则是将视频编辑功能抽象为描述文件、将描述文件解析为具体的编辑功能的任务/uff0c保证抽象与解析的正确性至关重要。 视频编辑模块在不同的开发平台上都有很好的实现方案/uff0c比如 iOS 原生提供的 AVFoundation/uff0c使用广泛的第三方开源库 GPUImage/uff0c以及更加通用的 ffmpeg 等。具体的实现方案可以结合业务场景与项目规划进行选择/uff0c我们目前在 iOS 端采用的方案是苹果原生的 AVFoundation。如何结合 AVFoundation 实现我们的视频编辑框架会在下文具体介绍。接下来我们就来看下具体功能模块的设计与实现。 # Part.3 模块功能与实现 ## 3.1 描述模块 ### **3.1.1 功能划分** 首先我们对「自定义编辑」模式下需要支持的具体功能进行分析/uff0c发现可以以编辑的对象为标准/uff0c将编辑功能划分为两类/uff1a段落编辑、画面编辑。 - **段落编辑**/uff1a将视频段看作编辑对象/uff0c不关心画面内容/uff0c只在视频段层面上进行编辑/uff0c包含如下功能/uff1a  **图4/uff1a段落编辑** - **画面编辑**/uff1a将画面内容作为编辑对象/uff0c包含如下功能/uff1a ![在此输入链接描述][2] **图5/uff1a画面编辑** ### **3.1.2 视频编辑描述模型** 有了编辑功能的划分后/uff0c要描述「对视频进行哪些编辑」/uff0c我们还需要一个视频编辑描述模型。定义如下几个概念/uff1a - **时间线**/uff1a由时间点组成的单向递增直线/uff0c起始点为 0 点 - **轨道**/uff1a以时间线为坐标系的容器/uff0c容器内存放的是每个时间点需要的内容素材及「画面编辑」功能 1. 轨道具有类型/uff0c一条轨道仅支持一种类型 - **段落**/uff1a轨道中的一段/uff0c即轨道所属时间线上两个时间点及两点之间的部分 1. 段落也具有类型/uff0c与其所属轨道类型保持一致 轨道类型列表/uff1a  其中「视频」、「图片」、「音频」类型轨道/uff0c是提供画面与声音内容的轨道。其余几个类型的轨道/uff0c则是用于描述具体做哪些画面编辑功能的轨道。特效类型轨道中可以指定若干画面编辑效果/uff0c如旋转、分区等。 结合编辑功能的划分/uff0c我们可以看出段落编辑功能的编辑对象是轨道内的段落/uff0c画面编辑功能的编辑对象是轨道内存放的内容素材。 有了时间线、轨道、段落三个概念以及段落编辑、画面编辑两个编辑行为的划分后/uff0c我们在抽象层面描述视频的编辑过程如下/uff1a ![在此输入链接描述][3] **图6/uff1a视频编辑描述模型示意图** 如上图所示/uff0c通过该模型/uff0c我们已经能够完整的描述出「对视频进行哪些编辑」/uff1a - 创作一个时长 60 秒的视频/uff0c内容素材有视频/uff0c图片/uff0c音乐/uff0c分别对应轨道 1、轨道 2、轨道 3/uff0c并且有转场、滤镜效果/uff0c由轨道 4、轨道 5 指定/uff08其他效果不再单独描述/uff0c以转场、滤镜效果为参考/uff09。 - 该视频由轨道 1 的 /[0-20/] 段、轨道 2 的 /[15-35/] 段、轨道 1 的 /[30-50/] 段以及轨道 2 的 /[45-60/] 段拼接而成。 - /[0-60/] 视频全段有背景音乐/uff0c音乐由轨道 3 指定。 - /[15-20/]、/[30-35/]、/[45-50/] 三段内有转场效果/uff0c转场效果由轨道 4 指定。 - /[15-35/] 段有滤镜效果/uff0c滤镜效果由轨道 5 指定。 ### **3.1.3 描述文件与模板** 有了上述的视频编辑描述模型后/uff0c我们还需要具体的文件来存储和分发该模型/uff0c即描述文件/uff0c我们使用 JSON 文件来实现。同时还需要提供运营加工的能力/uff0c使运营同事为描述文件添加一些运营信息/uff0c生成模板。 - **描述文件**: 根据视频编辑模型生成一份 JSON 文件 举个/ud83c/udf30 ``` { "tracks": [{ "type": "video", "name": "track_1", "duration": 20, "segments": [{ "position": 0, "duration": 20 }, ...] }, { "type": "photo", "name": "track_2", "duration": 20, "segments": [{ "position": 15, "duration": 20 }, ...] }, { "type": "audio", "name": "track_3", "duration": 60, "segments": [{ "position": 0, "duration": 60 }] }, { "type": "transition", "name": "track_4", "duration": 5, "segments": [{ "subtype": "fade_black", "position": 15, "duration": 5 }, ...] }, { "type": "filter", "name": "track_5", "duration": 20, "segments": [{ "position": 15, "duration": 20 }] }, ... ] } ``` - 模板: 由描述文件+若干业务信息组成的JSON文件 举个/ud83c/udf30 ``` { "title": "模板标题", "thumbnail": "封面地址", "description": "模板简介", "profile": { //描述文件 "tracks": [...] } } ``` 通过上述视频编辑描述模型与描述文件及模板的定义/uff0c结合转换器/uff0c我们便可以在用户使用「自定义」编辑功能的基础上/uff0c生成一份描述文件来描述用户最终对视频进行的编辑行为。反过来我们也可以通过解析描述文件/uff0c将用户选择的素材根据描述文件进行编辑/uff0c快速生成与描述文件中的编辑行为「同款」的视频。 ## 3.2 编辑模块 ### **3.2.1 AVFoundation 介绍** AVFoundation 音视频编辑分为素材混合、音频处理、视频处理、导出视频这四个流程。 **/uff081/uff09素材混合器 AVMutableComposition** AVMutableComposition 是一个或多个轨道/uff08AVCompositionTrack/uff09的集合/uff0c每个轨道会根据时间线存储源媒体的文件信息/uff0c比如音频、视频等。 ``` //AVMutableComposition 创建一个新AVCompositionTrack的API - (nullable AVMutableCompositionTrack *)addMutableTrackWithMediaType:(AVMediaType)mediaType preferredTrackID:(CMPersistentTrackID)preferredTrackID; ``` 每个轨道由一系列轨道段/uff08track segments/uff09组成/uff0c每个轨道段存储源文件的一部分媒体数据/uff0c比如 URL、轨道 ID/uff08track identifier/uff09、时间映射/uff08time mapping/uff09等。 ``` //AVMutableCompositionTrack部分属性 /* provides a reference to the AVAsset of which the AVAssetTrack is a part */ AVAsset *asset; /* indicates the persistent unique identifier for this track of the asset */ CMPersistentTrackID trackID; NSArray
本文由 投稿者 创作，文章地址：https://blog.isoyu.com/archives/mafengwoshipinbianjikuangjiashejijizai-ios-duandeyewushijian.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为:9 月 3, 2019 at 04:30 下午
