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

背景

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

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

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

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

YYEVA项目介绍

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

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

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

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

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

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

6. 支持 Web、Android、iOS等

YYEVA工作流程

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

 插入什么样的元素

 元素的形状和大小

 插入在屏幕上的位置

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




 YYEVA特色优势

 体积小

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

  扩展性高

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

  完善的工具链

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



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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,002评论 6 509
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,777评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,341评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,085评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,110评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,868评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,528评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,422评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,938评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,067评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,199评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,877评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,540评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,079评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,192评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,514评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,190评论 2 357

推荐阅读更多精彩内容