大厂都在用的MP4播放动效解决方案,现在可支持插入动态元素

·  阅读 693
大厂都在用的MP4播放动效解决方案,现在可支持插入动态元素

背景

随着日益增长的需求,直播领域各个场景对动效资源的要求也越来越高。动效资源是直播领域一个十分重要的表现形式。动效资源可应用在很多的场景下,例如礼物动效、玩法动效等。

礼物动效也经历了不同的几个阶段 : 原生动效 ---> 序列帧 ---> 自研基于矢量动画的Lottie/SVGA ---> 视频动画。

有一天,产品大佬需要技术在一个礼物动效上增加用户和主播的昵称、头像,由于礼物动效有很多粒子效果,3D效果,用原来的SVGA/Lottie方案十分难实现;但是用MP4动效,又不支持在视频指定帧上,插入文字和头像动画。因此,自研一套可支持动态插入业务元素的混合MP4方案十分必要。

本章主要介绍目前最新的可支持动态插入业务元素的混合MP4方案(YYEVA)的整体框架。文章末尾有YYEVA开源的地址,希望大家给YYEVA团队给个Star

YYEVA项目介绍

YYEVA的目标是 提供 一套全新的动画解决方案,满足静态MP4可插入动态业务元素,并实现一套完整的工具链,覆盖设计侧的Adobe After Effects动画输出工具,到客户端渲染SDK。降低设计师的使用成本和业务接入成本,赋能上游业务营收。目前已开源相关代码。请点击YYEVA 了解相关信息

  • YYEVA是一个 轻量级、高性能、跨平台、动态的MP4资源解决方案

  • YYEVA包含一套从设计工具AE插件、在线预览工具、客户端渲染SDK的完整工具链

  • 基于仿射矩阵运算,得到图层每一帧的位置信息

  • 集成了MP4(avc/hevc)封装协议等相关功能

  • 高度可扩展性,可还原设计师的全部细节

  • 支持 Web、Android、iOS等

YYEVA工作流程

YYEVA为设计师开发了一个AE插件,用户为设计侧输出一个符合YYEVA规范的MP4资源,设计师在拿到资源后,可以在插件提供的预览工具,查看在不同端的展示效果,可以及时调整。最终确认资源后,输出一个YYEVA的MP4资源,给产品配置到线上,移动端拿到资源后,就可以解析、加载、设置元素、渲染。工作流程如下图所示:

image.png

YYEVA整体框架介绍

YYEVA是基于YYAlphaMP4,即透明MP4的基础上,进行的一次改造。 旨在能够在静态的MP4里,支持插入动态的元素。首先,资源都是设计侧制作的:

  • 插入什么样的元素
  • 元素的形状和大小
  • 插入在屏幕上的位置

都应该有设计师来指定。客户端拿到资源后,只需要按照设计师指定的规则,插入相应的业务元素即可,而无需关心任何的内在实现。因此,为了降低设计师的使用成本和业务接入成本,YYEVA为设计师制作了一个AE扩展(YYConverterMP4),以及支持渲染该资源的渲染SDK播放器(YYEVAPlayer)。

image.png

产物YYEVA资源实质是一个MP4+Json描述信息,该Json描述信息包含如下信息:

  • 视频的基本信息:分辨率、RGB位置、Alpha位置
  • 动态元素的相关信息
  • 动态元素在每一帧的位置信息

image.png

YYEVA特色优势

体积小

Json描述信息使用了zlib压缩,再通过base64写入MP4中,首先对MP4无任何的影响,同时Json数据体积得到大大压缩。

扩展性高

插件基于Adobe After Effects的扩展开发,可读取AE所有特性。对于新的AE特性,可以及时对插件进行开发支持。因为Json信息都是基于结果动画来开发的,只会把动态元素的位置信息写入,所以无需客户端sdk再进行支持。

完善的工具链

目前插件测内部扩充了AE无法直接导出MP4的能力,也支持导出动态元素视频,同时在插件内部,还支持预览视频,设计师无需跳转使用其他工具,十分便捷。渲染SDK目前已支持 iOS、Android、Web的接入。

YYEVA演示场景

  1. 玩法动画

teampk.gif

目前YYEVA已经开源,开源地址,请大家为YYEVA团队点击宝贵的Star

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改