YYEVA: Baidu's Cross-Platform Dynamic Effect Solution Based on Transparent MP4

YYEVA is a lightweight, high-performance, cross-platform dynamic MP4 resource solution developed by Baidu/YY. It provides a complete toolchain including AE plugin, online preview tool, and client-side rendering SDK, enabling designers to create animations with WYSIWYG capability while supporting dynamic business element insertion.

The article explores different animation implementation approaches: result-oriented recording (frame-by-frame images), process-oriented recording (animation parameters), transparent MP4 video, and YYEVA's hybrid solution. Transparent MP4 achieves transparency by storing RGB and Alpha data in separate channels - for a 500x500 animation, the MP4 resolution is 1000x500 with left side for RGB and right side for Alpha.

YYEVA combines video frames and JSON description information into a single MP4 resource for synchronized rendering. The JSON describes dynamic elements through: frameIndex (time), RenderFrame (position/size), and OutputFrame (mask/transformation). The toolchain includes Layer Parsing Module (affine matrix calculation, mask extraction), H264 Module (video encoding via ffmpeg), and Resource Synthesis Module (data packaging and MP4 metadata embedding).

The client-side rendering pipeline involves: extracting JSON from MP4 metadata, parsing dynamic elements, decoding video/audio tracks, and rendering video frames with mask dynamic elements. YYEVA supports Web, Android, and iOS platforms, and is now open-source on GitHub.